windows下chrome安装vue-devtools扩展程序（亲测）

一.摘要

我是windows系统，刚开始安装vue-devtools扩展程序查阅了网上不少博客资料，都没安装成功，遇到各种问题，但最后当然是必须安装成功了啊！亲测有效~

二.vue-devtools安装 (windows/chrome)

1.下载

1. cmd 命令安装：
   前提是安装了nodeJs了，没安装的百度去哈。cmd命令切换到nodeJs下node_modules目录，运行npm install -g vue-devtools。安装成功，如果npm安装不了，也可以cnpm指令安装（见尾）。在这里我要声明下，有人从https://github.com/vuejs/vue-devtools下载的，我试过不行，会遇到一些问题，如果你没遇到，那就不要在意这个下载过程了。
   

2. chrome扩展程序设置：

chrome设置->扩展程序->加载已解压的扩展程序->选中vue-devtools的vender包。这时候浏览器右上角会出现灰色的“V”的vue标志。扩展程序安装成功~

3. 运行你的Vue项目，打开chrome调试模式，你会发现多了Vue选项，说明vue-devtools可以正常使用了。

三.踩过的坑

1. 添加扩展程序时报错：无法为内容脚本加载JavaScript“build/hook.js”。

遇到这样的问题，是因为***.js文件等安装在了src文件夹里，你只需要把manifest.json里的build改成src就行。当然，用我上面的安装方法是在build文件的，不用修改。如图：

这个问题解决了以后，又遇到了下面的问题…

2.vue-devtools扩展程序的“V”标签发灰，没亮，显示“vue.js not detected”。

这个坑也遇到过，查过资料说是把manifest.json（在vue-devtools/vendor）里的persistent改为true。我试过是正常的，改了后不报这个错了，但是…

3. 点击扩展程序的“V”标签报错：Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author或者是Vue.js is detected on this page. Open DevTools and look for the Vue pane。

正常来说，打开我们的vue项目，调试vue页面的时候“V”标签应该是运作的，但是也有遇到这种情况的，查看会报这个错误，提示vue项目没有赋予扩展权限。这个时候找到你的vue项目的src/main.js文件，添加一行代码：Vue.config.devtools=true。 理论上说这样就可以了，但是我的还是不行…

以上问题都是在个人在安装vue-devtools过程中遇到的问题，虽然解决了但是还是不能用。但是如果你是用我的安装方法下载的vue-devtools扩展程序，这些问题都不会遇到的。反正我是没遇到，如有遇到，欢迎留言商讨。

另附cpnm安装方法：

1.命令行安装npm淘宝镜像：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之后我们就可以使用cnpm代替npm安装依赖包了。