Vue.js Devtools(Vue.js调试插件) v6.0.0beta2 官方版
星级

4.8

Vue.js Devtools(Vue.js调试插件) v6.0.0beta2 官方版

更新时间:2021-02-10 当前版本:V 大小:460KB
软件类别:网络应用 软件平台:win7/win8/win10/xp
已下线 1039人安装1455人喜欢
应用介绍

Vue.js Devtools插件是适合广大前端开发IT工程师使用的开发者调试插件,该插件用于调试Vue.js应用程序的Chrome和Firefox DevTools扩展,让用户能够通过Vue.js Devtools在浏览器开发者工具下调试代码,边侧边栏窗格页面,边检查代码,便利实用。

Vue.js Devtools操作简单,只需了解HTML,CSS和JavaScript,即可在阅读指南后即可立即开始构建,并且借助该插件还能够很容易的对数据结构进行解析和调试,或是通过一些特殊的语法,将DOM和数据绑定起来,感兴趣的朋友可以下载使用。

Vue.js Devtools插件特色

1、上手简单

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

2、功能多样

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

3、演示优化

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

Vue.js devtools插件还可以看到它们最后的更新时间,如果它们有自己的主页,还可以对它们进行分类和其他更多的功能

注意事项

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

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

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

使用方法

1、下载好后进入vue-devtools-master工程 执行cnpm install,下载依赖,然后执行npm run build,编译源程序

2、编译完成后,目录结构如下

3、修改shells目录下的mainifest.json 中的persistant为true

位置:C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultExtensionsljjemllljcmogpfapbkkighbhhppjdbg6.0.0.2_0

4、打开谷歌浏览器的设置--->扩展程序,并勾选开发者模式

5、然后将刚刚编译后的工程中的shells目录下,chrome的整个文件夹直接拖拽到当前浏览器中,并选择启用,即可将插件安装到浏览器

6、打开一个已有的vue项目,我们以todolist项目为例,运行项目,然后在浏览器中--->设置--->更多工具--->开发者工具,进入调试模式

7、安装完插件后,将会看到多了vue一栏,选择vue,就可以在调试vue项目的过程中查看相应的组件等

最新下载
最新文章