安装vue开发调试神器vue-devtools

下载chrome扩展插件 
GitHub下载地址： 
https://github.com/vuejs/vue-devtools

使用cnpm代替npm按照依赖包了，npm安装依赖包确实太慢了… 
cnpm安装查看上篇文章

下载chrome扩展插件完成后打开命令行cmd进入vue-devtools文件夹,输入命令

cnpm install

• 1

如果在安装时报错 

[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)

cnmp安装过程中问题: http://www.jianshu.com/p/dbdec7ea220d

输入命令

npm update

• 1

输入命令

cnpm run build

• 1

期间如图全是红色错误,将下载的vue-devtools-master Chrome插件删除,重新再一遍就好了 

将C:\t00l\vueTool\vue-devtools-master\shells\chrome\manifest.json 文件的”persistent”:false改成true 

添加chrome扩展插件

1.打开chrome浏览器，右上角三个点>更多工具>扩展程序

2.再点击加载已解压的扩展程序，然后选择C:\t00l\vueTool\vue-devtools-master\shells\chrome文件夹 

最后打开个vue写的项目，f12打开调试工具即可进行vue项目的调试 

Chrome的插件扩展程序安装目录是什么？在哪个文件夹？

正常情况下，Chrome插件扩展程序的默认安装目录如下：

1.windows xp中chrome插件默认安装目录位置:  C:\Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions

2.windows7中chrome插件默认安装目录位置:  C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions

3.MAC中chrome插件默认安装目录位置：~/Library/Application Support/Google/Chrome/Default/Extensions

4.Ubuntu中chrome插件默认安装目录位置：      ~/.config/google-chrome/Default/Extensions

如果在这些不同操作系统中的chrome插件默认安装位置，没有找到插件。那么请通过下面的方式查看,如下图所示：

1.地址栏输入chrome:version 回车

2.用资源管理器打开"个人资料路径"栏的路径,该路径下的Extensions文件夹即默认的扩展安装路径

Vue.js devtool插件安装后无法使用，出现提示“vue.js not detected”的解决办法

Vue.js devtool 插件最近在开发人员中很火，但是初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后，都会经常有一个疑问。我在chrome浏览器里面已经成功安装好 Vue.js devtool插件，怎

Vue.js devtool插件最近在开发人员中很火，但是初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后，都会经常有一个疑问。我在chrome浏览器里面已经成功安装好 Vue.js devtool插件，怎么点击后提示 vue.js not detected，无法正常使用呢？对于这样的问题，新人可能会花费很多时间去找答案，今天我们chrome插件网就整理了解决方法，希望对大家有帮助。

首先，我们先要确保 Vue.js devtool插件已经安装成功了。具体的 Vue.js devtool插件的安装方法可以：chrome插件CRX的离线安装方法中找到答案。



其次，我们需要找到 Vue.js devtool插件的安装目录。可以在本站文章chrome插件CRX文件的安装目录中找到插件的安装位置。话说来，我们真找不到插件的安装位置，可以在本地电脑搜索插件的ID： nhdogjmejiglipccpnnnanhbledajbpd。用户可以在插件列表中找到插件的ID,如下图所示。这是我在win8系统上chrome插件的安装位置
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\ 3.1.2_0

第三，在找到了Vue.js devtool插件的安装目录后，打开mainifest.json文件（这是关键）。

将mainfest.json中代码persistent：false，修改成persistent：true。如下图所示：

一般情况下，修改完如上的位置的代码。打开vue项目后，在控制台选择vue，就应该可以正常使用了。

第四，如果通过上面的方法调整过后，还是不能够使用，那么可以调整一下webpack.config.js的代码，如下图所示：

最后，重启一下你的vue项目应该就可以使用了。