1. 去 GitHub 克隆 Vue Devtools 代码到本地

git clone https://github.com/vuejs/vue-devtools.git

2. 进入 vue-devtools 目录，安装依赖

cd vue-devtools

npm install

如果你的 npm 是 npm7.x，那么很可能出现以下问题：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: vue-devtools@6.0.0-beta.15
npm ERR! Found: eslint@7.32.0
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^7.26.0" from the root project
npm ERR!   peer eslint@"^7.12.1" from @vue/eslint-config-standard@6.1.0
npm ERR!   node_modules/@vue/eslint-config-standard
npm ERR!     dev @vue/eslint-config-standard@"^6.0.0" from the root project
npm ERR!   3 more (eslint-plugin-import, eslint-plugin-node, eslint-plugin-promise)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^5.0.0 || ^6.0.0" from eslint-plugin-vue@6.2.2
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^6.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/ykx/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxx/.npm/_logs/2021-09-01T06_06_25_956Z-debug.log

因为npm7.x对某些事情比npm6.x更严格

解决办法：$ npm i --legacy-peer-deps

3. 修改 manifest.json 文件 persistent 为 true

vue-devtools>packages>shell-chrome>manifest.josn

4. 在 vue-devtools 目录下编译代码

npm run build

这个过程若报错如下：

lerna notice cli v4.0.0
lerna info Executing command in 9 packages: "yarn run build"
lerna ERR! yarn run build exited 2 in '@vue/devtools-api'
lerna ERR! yarn run build exited 2 in '@vue/devtools-api'

解决办法：

1. 安装 yarn 工具 $ npm install yarn -g
2. 用 yarn 安装依赖 $ yarn install
3. 用 yarn 构建 $ yarn run build

5. 安装 Chrome 扩展插件

打开 Chrome 浏览器，点击 三个点-更多工具-扩展程序-开发者模式-加载已解压的扩展程序- vue-devtools>packages>shell-chrome 放入

安装成功后浏览器网址栏后面会出现 Vue logo

6. 启动 Vue 项目后，f12 在控制台中即会出现 vue 一栏，选中 vue 就可使用了

问题

在 npm run build 编译代码时容易报错，因为最新版本 vue-devtools 使用最新版本 webpack4，所以 node 版本至少大于6.11.5，卸掉以前的 node ，重新安装新版本即可

还有一个简单的方法，直接下载已编译的代码，已编译的代码已存在百度网盘，下载解压后，直接把 chrome 文件添加到扩展程序即可