Vue调试神器vue-devtools的详细安装步骤

最新推荐文章于 2025-06-12 09:21:22 发布

原创最新推荐文章于 2025-06-12 09:21:22 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了在使用最新版本的Vue Devtools项目时遇到的npm run build打包错误问题及解决方案，包括下载编译版本、修改manifest.json文件等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

----------------2020/5/13更新------------------------------------
现在github上拉下来的项目，在npm run build的时候会出现报错，没办法打包的问题
貌似是最新版本问题
4.1.3已编译版本下载地址：https://download.youkuaiyun.com/download/weixin_44309374/12415422（貌似不允许设置0币）

----------------之前的方法-----------------------
1、在github上打开 Vue Devtools项目

https://github.com/vuejs/vue-devtools#vue-devtools

2、下载压缩包
在这里插入图片描述

3、文件解压缩
在这里插入图片描述
4、进入压缩后的文件夹安装依赖包

npm install

如图：在这里插入图片描述
5、编译项目文件

npm run build

如图：
在这里插入图片描述
编译后的目录：
6、修改安装目录vue-devtools\shells\chrome中的manifest.json文件。将persistent属性改为true
目录：

修改：

"background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": true // 可常驻浏览器后台的脚本，可以连接其他页面
  },

7、打开扩展程序
Chrome浏览器 > 更多程序 > 拓展程序

在这里插入图片描述
打开界面如下：

8、开启开发者模式

9、点击加载已解压的扩展程序然后选择 vue-devtools/shells/chrome

结果如下：