Vue.js devtools |数据结构调试工具

Vue.js devtools – 数据结构调试工具背景

Vue.js devtools是前端开发IT工程师的好帮手,通过Vue.js devtools数据结构调试工具可以在浏览器开发者工具下调试代码,边侧边栏窗格页面,边检查代码。

由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么。但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。

Vue.js devtools – 数据结构调试工具简介

Vue.js devtools数据结构调试工具是一款适用于调试Vue.js应用程序的谷歌浏览器插件。

Vue.js devtools – 数据结构调试工具优点

1.上手简单

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

2.功能多样

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

3.演示优化

20KB min + gzip运行,快速虚拟DOM,最少的优化工作。

Vue.js devtools – 数据结构调试工具安装提示

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项目应该就可以使用了。

注意事项!!

1、如果页面使用的是Vue.js的生产/精简版本,则默认情况下禁用devtools检查,因此不会显示Vue窗格。要使其适用于通过file://协议打开的页面,您需要在Chrome的扩展程序管理面板中选中此扩展程序的“允许访问文件URL”。
2、仅当您希望自己从源代码构建扩展以获取尚未发布的功能时,才需要这样做。

插件下载地址:

此处内容已经被作者无情的隐藏,请输入验证码查看内容:
验证码:
请关注本站公众号回复“验证码”,获取验证码。 【注】”在微信里搜索“不会笑青年”或者“laughyouth”或者微信扫描右侧二维码都可以关注微信公众号。
不会笑青年

本文由网站小白学堂创作,采用 CC BY 3.0 CN协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。
小白学堂 » Vue.js devtools |数据结构调试工具

提供最优质的资源集合

立即查看 了解详情