安装Vue Devtools调试工具插件

Vue Devtools是Vue官方推出的浏览器插件，可以算是Vue开发调试神器，它可以让你能够在浏览器实时的编辑数据并立即看到其反映出来的变化，让你告别console大法。非常好用，谁用谁知道，Vue开发必备，强烈推荐！

因为众所周知的原因，Google Chrome商店无法正常访问，所以本文提供另一种谷歌插件安装的方式。

1.下载Vue Devtools插件，请到GitHub仓库：https://github.com/Jackyyans/code123下载，路径：/normal/libs/Vue.js Devtools_5.3.3.crx。

2.谷歌浏览器地址栏输入：chrome://extensions，点击右边的按钮，打开开发者模式。

3.将Vue.js Devtools_5.3.3.crx拖动到谷歌浏览器，安装。

4.点击添加扩展程序，就可以看到多了个Vue Devtools的图标，安装成功。

5.打开Vue的项目，可以看到图标变亮，多了个vue面板，显示了当前页面用到的vue组件，点击组件，右边会展示当前组件的data、computed等数据，可以直接更改或删除数据进行调试。另外，也可以比较直观的看到Vuex、Vue Router等信息。

6.React也有类似的浏览器插件React Developer Tools，安装方法跟Vue Devtools一样的，请到GitHub仓库：https://github.com/Jackyyans/code123下载，路径：/normal/libs/React Developer Tools_4.7.0.crx。

7.在安装完Vue.js devtools后，打开自己写的一个vue.js网页，发现这个图标并没有亮起来，还是灰色，点击图标显示Vue.js not detected，打开控制台也没有发现有vue的选项   

         网上找了很多解决方案都没有解决，大部分都是让重新安装Vue.js devtools，搞了大半天终于解决了。

        我们先看看Vue.js devtools是否生效，打开Bilibili（B站是用的vue），你就可以发现这个图标变绿了，说明Vue.js devtools是能用的。

    但是在自己写的页面里面这个图标是灰色的，控制台里面也没有Vue选项，然后点开扩展程序

看到以下页面

 

点击详细信息

 

把这个允许访问文件网址的开关打开，锵锵，神奇的事情发生了，自己写的页面也能用vue.js devtools了