谷歌浏览器安装 devtools 调试工具

1、github下载devtools源码

用dev版本(@5.3.4)打包报未知错:Error: Unknown option '--hide-modules'
所以用的低版本地址:https://github.com/vuejs/vue-devtools/tree/v5.1.1

2、npm install 安装依赖
3、npm run build 打包
企业微信截图_16159612332537.png
4、修改:shells/chrome/manifest.json中的"persistent": false。将值改为true
企业微信截图_1615961671701.png
5、打开谷歌浏览器,输入 chrome://extensions/ ,选择开发者模式,加载已解压的扩展程序,选择Chrome导入即可。
企业微信截图_16159617774242.png
6、安装成功。选择扩展工具,点击vue-devtools,将其固定。(个人爱好)
企业微信截图_16159618255228.png

注意:Chrome浏览器vue devtools F12后控制台不显示的问题
解决:使用开发版本的vue.js既可以,不用使用min版本 的
扩展程序中开启允许访问文件网址和在隐身模式下启用两项后就可以了

你可能感兴趣的:(谷歌浏览器安装 devtools 调试工具)