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的窗口了。

在这里插入图片描述

Guess you like

Origin blog.csdn.net/CSDN_java1005/article/details/114367728
Recommended