谷歌浏览器Chrome安装 Vuejs devtools 插件 最新最全

网上一大堆的教程,全是旧的有好多bug.(好气好气)  哎,踩了很多坑,还是自己来记录一下吧,希望对你们有所帮助.

按照其他网站上面教程错误的,请看这里: https://blog.csdn.net/qq_45010409/article/details/105476375 这个小姐姐写的不错.

具体操作：前面都一样

1 . 下载chrome扩展插件。

在github上下载压缩包并解压到本地，github下载地址：https://github.com/vuejs/vue-devtools  

最重要的,请下载下面的版本,反正我直接下载新的,一大堆问题 !!!!!!

2. npm install

下载完成后打开命令行cmd进入vue-devtools-master文件夹，

1. npm install，安装依赖包；如果安装太慢，cnpm install。

2. npm run build

npm run build 执行完，会在shells>chrome下的src文件夹里生产如上图所示的几个js文件

无法加载背景脚本"build/background.js":解决:

3. 打开shells>chrome>manifest.json并把json文件里的"persistent":false改成true

把这里的false改成true就可以了

4. 扩展chrome插件

1.打开chrome浏览器，打开更多工具>扩展程序；

2.再点击加载已解压的扩展程序，然后把shells>chrome文件夹放入

别高兴太早: 这个还是灰色的呢,你又会想知道,怎么变亮吧,别急.

看这里: https://blog.csdn.net/qq_21891743/article/details/89002178?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-4&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-4   解决Chrome浏览器vue devtools F12后控制台不显示的问题

 

其实很简单,开启在隐身模式下启用 和 允许访问文件地址 就行了

,重新启动项目 刷新吧

帮助到你了 点个赞呗!