下载和安装vue-devtools工具的最简单方法

Vue开发项目,自然少不了它的调试工具 vue-devtools 。这个非常好用,对vue开发者来说,这简直是福音。

由于github和谷歌商店是外国网站等因素,访问和下载都较慢,甚至还可能无法访问,解决起来较麻烦。

幸运的是,可以访问国内的插件站点进行下载和安装。

一、下载vue-devtools 插件工具

访问插件网站:https://chrome.zzzmh.cn/#/search

在搜索框搜索vue,选择需要下载的版本Vue Devtools,如图所示:

进入Vue Devtools详情界面,点击推荐下载:

二、安装和配置插件

下载好压缩包后进行解压缩。打开Google Chrome浏览器,点击控制菜单栏->更多工具->扩展程序。

开启开发者模式,打开解压完毕的文件夹,拖拽.CRX文件到页面空白部分,确认添加Vue.js Devtools扩展程序,如图所示:

下图是已经安装好的 vue-devtools 插件。

打开Vue.js Devtools扩展程序的详细信息,勾选选项—在所有网站上—允许访问文件网址—收集各项错误,如图所示:

三、验证使用

可以参考下图,在浏览器中对插件进行固定显示。

使用了Vue框架的界面的Vue-Devtools插件的logo才会亮起,否则是灰色的,如图所示:

按F12打开开发者工具,如图所示:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据