首页 前端知识 完美解决Vue Devtools调试工具无法显示在F12的问题

完美解决Vue Devtools调试工具无法显示在F12的问题

2025-03-15 13:03:40 前端知识 前端哥 587 251 我要收藏

在网上搜集了各种信息,试了各种方法,打开F12时候,还是没有找到vuedevtools这个插件的选项

例如:

1、打开允许访问文件网址

2、代码入口文件添加以下代码

	Vue.config.devtools = true;

3、修改mainifest.json 中的persistant为true等等方法

尝试过以上方法均不能显示!

打开F12后还是不能显示

个人理解:是不是浏览器不能将该文件识别成使用vue元素的项目?从这个文件的url来看,相当于用浏览器直接打开了该文件

从这一个角度出发,猜测如果该文件能够和通过npm create vue@2 一样创建的项目部署在npm的服务器上,是不是就能识别出该文件使用了vue元素?

直接实践:

这里下载一个模拟服务器Live Server

配置好LiveServer服务器参数点击此处icon-default.png?t=O83Ahttps://blog.csdn.net/qq_74629570/article/details/142446617?spm=1001.2014.3001.5502

右键你需要调试的项目文件,点击Open With Live Server

项目打开后可以看到,该文件运行在了本地服务器上,打开F12,发现多了一个Vue的选项!

 紧接着,点击该选项,发现VueDevtools调试工具完美显示!

总结:前面的假设成立。运行vue.js项目文件时,需要将其部署在本地服务器上。VueDevtools才是识别出该文件使用了vue元素,从而该插件才能显示。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23770.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!