在google浏览器下安装vue-devtools扩展

一、下载vue-devtools，下载地址：https://github.com/vuejs/vue-devtools

二、解压到对应目录，例如: D:软件vue-devtools-dev

三、进入解压的目录中

1.执行命令：npm install (需要静心等待一会)

2.执行命令：npm run build

3.修改配置文件，D:软件vue-devtools-devshellschrome目录manifest.json文件里的"persistent":false改成true

4.打开扩展程序页面，然后点击"加载已解压的扩展程序 "，选择D:软件vue-devtools-devshellschrome

5.在插件目录vue-devtools-dev下执行命令npm run dev，这样插件就会安装在浏览器中了。

打开localhost:8080可以看到插件已经安装并运行了

在vue项目页面下，按F12就可以看到vue面板

注：如果后期vue面板出不来，再到vue-devtools-dev文件夹下执行一遍npm run dev即可

ps :
如果图标亮但不能调试并且提示：
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是压缩版本的，默认会关闭调试，要引入vue.js。

另外种方法是在或者在代码的主文件中配置vue的环境：
Vue.config.devtools = true;
(该方法没有亲测)

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_32786873/article/details/100562931
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-29 21:14:30
阅读 ( 1801 )
分类：

在google浏览器下安装vue-devtools扩展

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看