如果已经安装了vue-devtools可以不看这部分

先介绍三种安装vue-devtools的方法:
① 如果就可以直接去chrome商店下载该插件

② 非科学上网的小伙伴给你们准备vue-detools一分钟成功安装方法,这里的版本为5.1.0版本,如果需要最新的版本的话就去git下载看第③步骤
-------------------------------------------------5.1.0----------------------------------------
链接: https://pan.baidu.com/s/1i75Nwz-CRbnIJBr5qROvWA 提取码: 5w84
-------------------------------------------------------------------------------------------------
打开chrome浏览器 >>> 更多工具 >>> 扩展程序(打开开发者模式),然后直接下载将它拖到里面,就会提示你是否安装vue-devtools,有老旧版本的记得先卸载在安装,然后右上角就会出现该插件的图标啦,如果有vue项目就会亮起来;

③ 使用npm install的方法

  1. 首先如果没有npm的小伙伴,先去 Node官网 下载nodejs,然后会一起下载npm,最好下载node@8+版本
  2. 然后去github下载vue-devtools(github下载地址:https://github.com/vuejs/vue-devtools)解压ZIP到桌面
  3. 可以直接使用window里的命令行进入vue-devtools文件安装依赖及打包,也可以把该文件拖入到vscode或者webStorm中,打开终端执行npm install安装它的依赖也就是node_modules里面的插件,如果中途卡住了或者下载太慢,可以 淘宝NPM镜像执行以下 $ npm install -g cnpm --registry=https://registry.npm.taobao.org
  4. install完成之后再npm run build,完成之后进入C:\Software\vue-devtools-master\shells\chrome目录下,修改mainifest.json 文件中的persistent属性的值为true。(根据自己安装的目录去找mainifest.json 文件)
  5. 打开谷歌浏览器 —— 更多工具 ——扩展程序—— 右上角勾选开发者模式(有的已默认勾选了)—— 加载已解压的扩展程序 —— 找到本地磁盘中vue-devtools-master目录下的chrome文件夹 —— 选择该文件夹并点击确定按钮
汇总一下不能用或者报错的原因及其解决方法

问题1:
装完Vue Devtools,想用来查看用vue.js写的页面,然而却发现图标灰色,无法使用,提示检测不到Vue.js
在这里插入图片描述
关于这个persistent参数可以参考大神总结的:
persistent为true时,在background字段中指出的js脚本将持续运行在后台,而若persistent为false,则这些脚本将只在事件活动时运行,事件不活动时就会释放其占有的内存等资源。

问题2:
如果图标亮但不能调试并且提示:
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项目中的main.js入口文件添加这段代码配置vue的环境,注意此时最好重新启动项目,再次打开浏览器,就可以解决上面的问题了:

Vue.config.devtools = true
Logo

前往低代码交流专区

更多推荐