Chrome(谷歌浏览器)安装Vue插件vue-devtools

发布于 2024-04-01  226 次阅读

​

 这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题

vue-devtools是什么？

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。

一、vue.js插件下载

棚子站点官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘

根据下图打开谷歌浏览器中的【拓展程序】：

在这里插入图片描述​编辑

勾选【开发者模式】——点击【加载已解压的拓展程序】——选择刚刚解压的vuejs-devtools插件整个文件夹导入即可。导入后即可看到一件导入的vuejs-devtools插件。

在这里插入图片描述​编辑

用谷歌打开文件进入调试模式（按F12即可进入），即可在调试控制台看到vue页签。如下图：

在这里插入图片描述​编辑

四、常见问题解决

安装好插件后，打开文件并打开调试模式后没有vue页签，这可很常见，解决方法如下：

在这里插入图片描述​编辑

其他方法01：这些方法都是网上流传的，不过有人说有用，有人说没用，这个看大家了，我觉得按方法一与方法二即可解决大部分问题。在扩展程序中点击这个拓展程序的详细信息，开启允许访问文件网址和在无痕模式下启用两项后就可以了。

在这里插入图片描述​编辑

在这里插入图片描述​编辑

 ​编辑 ​