Google浏览器中开发调试的时候,右上角出现vue的图标,但是在开发者工具中没有出现vue调试(已在扩展程序中安装 Vue Devtools)

控制台却没有。

错误原因:

没显示调试工具的原因是用了生产环境的版本或是压缩的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.

解决方法:

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

Vue.config.devtools = true;

  

关于安装了Vue-devtools插件但在浏览器控制台不显示的解决方案的更多相关文章

  1. Chrome Vue Devtools插件安装和使用

    安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...

  2. vue中使用baidushare分享到微信无法显示bug解决方案

    最近vue单页面项目中有个页面分享的功能需求,按以往经验,选择了百度开源的baidushare.js 经过一天的挣扎,终于弄清楚了分享到微信后无法显示的原因. 对比分析: 以往成功使用:另写了一个专门 ...

  3. Firefox浏览器怎么安装adobe flash player插件

    https://jingyan.baidu.com/article/0a52e3f435d171bf62ed7237.html 有些朋友在使用Firefox火狐浏览器,但是火狐浏览器安装以后是没有fl ...

  4. Vue安装及插件Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  5. 解决游览器安装Vue.js devtools插件无效的问题

    一: 打开自己写的一个vue.js网页,发现这个图标并没有亮起来,还是灰色 解决方案:  1.我们先看看Vue.js devtools是否生效,打开Bilibili(https://www.bilib ...

  6. 在浏览器上安装 Vue Devtools工具

    Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地 ...

  7. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

  8. 在google chrome浏览器上安装 Vue Devtools工具

    [转]https://www.cnblogs.com/tanyongli/p/7554045.html Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的 ...

  9. Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法

    我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...

随机推荐

  1. ruoyi LogUtils

    package com.ruoyi.framework.util; import java.io.PrintWriter; import java.io.StringWriter; import ja ...

  2. CocoaPods-Alcatraz插件

    Alcatraz:Xcode的插件管理工具,可通过它添加CocoaPods插件 下载地址:https://github.com/alcatraz/Alcatraz 建议: 不提倡通过终端命令下载Alc ...

  3. Python笔记_第四篇_高阶编程_GUI编程之Tkinter_3.数据显示

    1. 表格数据显示: 图示: 实例: import tkinter from tkinter import ttk # 创建主窗口__编程头部 win = tkinter.Tk() # 设置标题 wi ...

  4. maven打包springboot项目的插件配置概览

    jar包的术语背景: normal jar: 普通的jar,用于项目依赖引入,不能通过java -jar xx.jar执行,一般不包含其它依赖的jar包. fat jar: 也叫做uber jar,是 ...

  5. vue-resource CRUD示例

    GET请求 var demo = new Vue({ el: '#app', data: { gridColumns: ['customerId', 'companyName', 'contactNa ...

  6. POJ-1679 The Unique MST(次小生成树、判断最小生成树是否唯一)

    http://poj.org/problem?id=1679 Description Given a connected undirected graph, tell if its minimum s ...

  7. 吴裕雄--天生自然 PYTHON3开发学习:File(文件) 方法

    # 打开文件 fo = open("runoob.txt", "wb") print("文件名为: ", fo.name) # 关闭文件 f ...

  8. Linux介绍,基本命令

  9. redis day03

    模拟缓存 django-admin startproject rmysite3   创建django项目 python3 manage.py startapp user     创建py应用 33 行 ...

  10. spring cloud关于feign client的调用对象列表参数、设置header参数、多环境动态参数试配

    spring cloud关于feign client的调用 1.有些场景接口参数需要传对象列表参数 2.有些场景接口设置设置权限等约定header参数 3.有些场景虽然用的是feign调用,但并不会走 ...