vue-devtools介绍与安装

2024-04-20 13:39:47

vue-devtools

vue-devtools是一款浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大提高我们的调试效率。

由于vue是借助数据驱动的，所以在开发调试中查看DOM不能解析出什么，

但是借助vue-devtools插件，就可以很容易的对数据结构进行解析和调试。

安装

下载地址：

https://github.com/vuejs/vue-devtools#vue-devtools

安装有多种途径：

1.通过直接下载谷歌浏览器插件（需要翻墙）。

2.下载火狐浏览器插件。

https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

3.下载后外部引入

https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md

官网带使用说明。

4.自己构建

需要node 6+ 、npm 3+

打开git 命令行，输入：

git clone https://github.com/vuejs/vue-devtools.git

进入clone下来的vue-devtools文件夹，在此处打开命令行。

输入：

npm install

或者

cnpm install

(使用淘宝镜像的话)

然后找到目录下的shells下的chrome下的manifest.json

将persistent:false 改为true

然后再回到目录下的命令行，输入：

npm run build

谷歌浏览器扩展

打开谷歌浏览器的扩展程序选项，要勾选开发者模式，才会有加载已解压的扩展程序，点击选中shells下的chrome文件夹即可。

chrome文件夹下载：

https://download.csdn.net/download/badao_liumang_qizhi/10735017

使用

运行vue项目，按F12,找到vue。

vue-devtools介绍与安装相关推荐

VUE脚手架介绍及安装教程
目录一.vue 是单文件组件 1.1之前注册组件有什么缺点 ? 1.2什么是单文件组件 :后缀为 .vue 的文件二.脚手架简介 2.1 webpack 三.脚手架介绍 3.1.vue-cli简介 ...
vuejs之Vue Devtools
Vue Devtools大法好这是一篇小白friendly教程 Vue Devtools是一款谷歌浏览器插件,专门为调试vue而设计.假设你做了一个vue应用,当你在调试的过程中,打开的控制台是这样 ...
Vue Devtools 安装
Vue Devtools 是Chrome 浏览器插件,用来调试Vue的,能够更直观.更友好的调试Vue应用下载地址:https://github.com/vuejs/vue-devtools#vue ...
Vue Devtools安装（谷歌浏览器插件：）
vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...
超详细Vue Devtools的下载和安装——Vue的调试工具
在使用 Vue 时,我们推荐在浏览器上安装 Vue Devtools. Vue Devtools 是 Vue 官方发布的调试浏览器插件,可以安装在 Chrome 和 Firefox 等浏览器上,直接内 ...
安装vue Devtools学习记录
在学习vue之前,建议使用Google chrome上安装vue devtools拓展工具.vue devtools提供界面供我们查看vue组件和全局状态管理器vuex中记录的数据. 有条件的可以直接 ...
安装Vue Devtools调试工具插件
Vue Devtools是Vue官方推出的浏览器插件,可以算是Vue开发调试神器,它可以让你能够在浏览器实时的编辑数据并立即看到其反映出来的变化,让你告别console大法.非常好用,谁用谁知道,Vu ...
在火狐浏览器安装vue devtools【简单、快速】
1.打开火狐浏览器 2.添加组件 3.搜索vue devtools 4.点击第一个 5.点击添加到火狐 6.在跳出的框中点击确认添加 7.到此添加成功 8.按F12就可以看到vue扩展程序了
[转]vue全面介绍--全家桶、项目实例
慢慢了解vue及其全家桶的过程原文http://blog.csdn.net/zhenghao35791/article/details/67639415 简介 "简单却不失优雅,小巧而不乏 ...
（18）Vue DevTools插件
一.Vue DevTools插件介绍 Vue DevTools插件是 Vue.js 官方提供的用来调试 Vue 应用的工具. 二.Vue DevTools插件安装安装地址如下: https://ch ...

最新文章

热门文章