vue.js应用调试插件Vue.js devtools

Vue.js devtools是一个chrome查看器上的开发者调试插件，你能根据这款插件在查看器开发者工具下调试代码。由于vue是数据驱动的，所以这就存在在开发调试中浏览DOM结构并不能分析出什么。但是借助vue-devtools插件，我们即可很容易的对数据结构进行分析和调试。

使用方法：

1、你能从chrome应用商店里找到Vue.js devtools插件，如果你的chrome应用商店无法打开，你能在本站的下方找到Vue.js devtools下载地址。

2、离线安装chrome插件的方法均可参照：怎么在谷歌查看器中安装.crx扩展。如果你是最新版chrome查看器，能够参考chrome 67版本后无法拖拽离线安装CRX格式插件的解决方案。

3、下载Vue.js devtools的crx文件后，打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序搜索），然后拖放 crx文件到扩展页面安装它；

4、点击“添加拓展程序”完成安装。

5、Vue.js devtool插件安装后无法使用，出现提示“vue.js not detected”，这时我们能够使用下面的方法：

第一，我们需要找到Vue.js devtool插件的安装目录。（如果真找不到插件的安装位置，能够在本地电脑查找插件的ID：nhdogjmejiglipccpnnnanhbledajbpd。）不一样操作系统中chrome插件安装位置不一样，比如win8系统中chrome插件的安装位置：C:⁄Users⁄Administrator⁄AppData⁄Local⁄Google⁄Chrome⁄User Data⁄Default⁄Extensions⁄nhdogjmejiglipccpnnnanhbledajbpd

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

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

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

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

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

功能介绍

- 上手简单

在用户已经了解HTML，CSS和JavaScript的情况下，阅读指南后就可以立即开始构建。

- 功能多样

渐进式的生态系统，在图书馆和功能多面的框架之间进行扩展。

- 演示改进

20KB min + gzip运行，快速虚拟DOM，最少的改进工作。

你还能够看到它们最后的更新时间，如果它们有自己的主页，还能够对它们进行分类和其他更多的功能。

使用注意事项：

如果页面使用的是Vue.js的生产/精简版本，则默认情况下禁用devtools检查，因此不会显示Vue窗格。

要使其适用于根据file：//协议打开的页面，您需要在Chrome的扩展程序管理面板中选中此扩展程序的“允许访问文件URL”。

仅当您希望自己从源代码构建扩展以获得尚未发布的功能时，才需要这样做。