Chrome下载及安装使用vue-devtools插件

Chrome下载及安装使用vue-devtools插件

---

一、下载

链接：https://pan.baidu.com/s/1CKAqFa-yfeQ-Nd4iEXJxeg
提取码：8888

二、解压安装插件

在谷歌浏览器中搜索`chrome://extensions/`进入扩展程序窗口，如下图。

• 点击【加载已解压的扩展程序】选中我们解压完成后的文件夹。
• 出现如下图红框中的vue.js devtools 插件，就代表完成了。

三、插件的使用

返回谷歌首页，如下图，可以看到vue插件呈现灰色，说明没有运行。点击时，可以看到提示Vue.js not detected，没有检测到vue。原因是这个界面没有引用vue。

随便打开个网站如：https://www.bilibili.com/，可以看到vue这个图标变绿了。说明可以使用。但是，当我点击图标时，可以看到出现提示Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.信息。说明这个窗口引用了vue，但是引用的是生产版本的，而这个插件时只应用于开发版本的，不能应用于生产版本的。按F12，可以看到没有vue的选择窗口。

当我打开我自己编写的程序，里面引用了vue开发版本的，就可以使用了，如下图，我打开了我的若依框架，可以看到上面的图标变成了绿色了，按F12，可以看到如下图有个vue的窗口了。