欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Chrome中无差错安装Vue调试工具vue-devtools(错误合集及解决方法)

程序员文章站 2022-06-28 18:21:42
Chrome中无差错安装Vue调试工具vue-devtools1.搜索极简插件Vue Devtools,下载并解压Vue Devtools下载地址2.将Vue.js解压到D盘中,把文件后缀由.crx修改为.zip,并将其进行解压3.打开文件夹,找到mainifest.js4.修改mainifest.json文件中的persistent的属性为true;关于persistent参数persistent为true时,在background字段中指出的js脚本将持续运行在后台,而若persist...

Chrome中无差错安装Vue调试工具vue-devtools

前言
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。

前提
我尝试了网上不少方法,在无数次试错中终于安装好了我的Devtools,如果你也有以下错误:

  1. (安装成功但无法使用)在安装完Vue.js devtools后,打开自己写的一个vue.js网页,发现这个图标并没有亮起来,还是灰色,点击图标显示Vue.js not detected,打开控制台也没有发现有vue的选项
  2. (cur的postBuffer的默认值太小) error: RPC failed; curl 18 transfer closed with outstanding read data remaining fatal: The remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed
  3. (npm run build总出错)npm ERR! missing script: start npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2017-11-20T09_43_06_459Z-debug.log

可以采用我的办法!!!!简单又有效!!!

1.搜索极简插件Vue Devtools,下载并解压
Vue Devtools下载地址Chrome中无差错安装Vue调试工具vue-devtools(错误合集及解决方法)

2.将Vue.js解压到D盘中,把文件后缀由.crx修改为.zip,并将其进行解压
Chrome中无差错安装Vue调试工具vue-devtools(错误合集及解决方法)

3.打开文件夹,找到mainifest.js
Chrome中无差错安装Vue调试工具vue-devtools(错误合集及解决方法)

4.修改mainifest.json文件中的persistent的属性为true;
关于persistent参数
persistent为true时,在background字段中指出的js脚本将持续运行在后台,而若persistent为false,则这些脚本将只在事件活动时运行,事件不活动时就会释放其占有的内存等资源。

5.添加代码配置vue的环境:Vue.config.devtools = true;
Chrome中无差错安装Vue调试工具vue-devtools(错误合集及解决方法)
6.打开chrome的更多工具->扩展程序,把文件夹拖拽到上面

7.点击详细信息,将”有权访问的网站“选择在所有网站上,将“允许访问文件网址”打开。

Chrome中无差错安装Vue调试工具vue-devtools(错误合集及解决方法)

8.重新启动项目,再次打开浏览器就可以啦
Chrome中无差错安装Vue调试工具vue-devtools(错误合集及解决方法)ps:解压好的安装包不要随意挪动位置

本文地址:https://blog.csdn.net/meiko667/article/details/107544712