安装了VueDevtools插件但在控制台不显示Vue的解决方案

  1. 出现问题
    安装好Vue Devtools插件后,在Google浏览器中开发调试的时候,右上角的Vue图标变亮,但是在开发者工具中没有出现Vue调试。
    如下图:在这里插入图片描述
    控制台的Vue调试应该如下图显示
    在这里插入图片描述
  2. 分析原因
    第一种情况:没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选
https://github.com/vuejs/vue-devtools
 
1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.
2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>//出错处

第二种情况:
Vue.js devtools 插件出错

  1. 解决方法:

官方建议在项目入口文件(main.js)引入:

Vue.config.devtools = true;

第二种情况:
Vue.js devtools 插件出错解决方案
进入chrome浏览器扩展程序 -> Vue.js devtools 点击详细信息 ->在无痕模式下启用 + 允许访问文件网址 在这里插入图片描述

参考文章

评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值