vue-devtools浏览器插件离线安装的两种方式

1. 官网及GitHub地址

1. github地址

https://github.com/vuejs/devtools

6.5.0版本：vuejs/devtools at v6.4.5 (github.com)

直接下载：https://codeload.github.com/vuejs/devtools/zip/refs/tags/v6.5.0

2. 官网

官网地址：https://devtools.vuejs.org/

官网中说明了在chrome、edg、firefox、standalone app中怎么安装与使用

2. 源码中拷贝安装

以devtools-6.5.0.zip版本及Chrome浏览器举例安装

1. 下载解压devtools-6.5.0.zip到指定的目录中
2. shell-chrome 在E:\mysoftware\Vue3\devtools-6.5.0\packages目录下
3. 打开chrome浏览器，按照章节4 Chrome安装与使用安装

3. 源码编译安装

通过IntelljIDEA或VScode工具进行编译，以devtools-6.5.0.zip版本及Chrome浏览器举例编译安装

1. 下载源码

1. 源码在github上下载
2. 这里以版本devtools-6.5.0.zip进行编译

2. 编译

1. 将devtools-6.5.0.zip解压到自己的目录，如E:\mysoftware\Vue3\devtools-6.5.0

2. 使用yarn编译

#进入到E:\mysoftware\Vue3\devtools-6.5.0目录下
# 安装依赖,使用`yarn intall`命令安装依赖
PS E:\mysoftware\Vue3\devtools-6.5.0> yarn install

# 2.编译
yarn build

# 编译成功如下
......
orphan modules 9.01 MiB [orphan] 882 modules
runtime modules 6.06 KiB 18 modules
cacheable modules 14.8 MiB
  modules by path ../../node_modules/ 10.1 MiB 762 modules
  modules by path ../app-frontend/ 620 KiB 111 modules
  modules by path ../app-backend-core/lib/ 100 KiB 21 modules
  modules by path ../shared-utils/lib/*.js 53.3 KiB 14 modules
  modules by path ../app-backend-vue2/lib/ 50.6 KiB 9 modules
  modules by path ../app-backend-api/lib/*.js 18.5 KiB 8 modules
  modules by path ../app-backend-vue3/lib/ 33.7 KiB 7 modules
  modules by path ./src/*.js 3.77 MiB 3 modules
  ../api/lib/esm/index.js + 4 modules 4.57 KiB [built] [code generated]
  ../app-backend-vue1/lib/index.js 304 bytes [built] [code generated]
+ 18 modules
webpack 5.74.0 compiled successfully in 111942 ms
lerna success run Ran npm script 'build' in 9 packages in 200.6s:
lerna success - @vue/devtools-api
lerna success - @vue-devtools/app-backend-api
lerna success - @vue-devtools/app-backend-core
lerna success - @vue-devtools/app-backend-vue1
lerna success - @vue-devtools/app-backend-vue2
lerna success - @vue-devtools/app-backend-vue3
lerna success - @vue-devtools/shared-utils
lerna success - @vue-devtools/shell-chrome
lerna success - @vue/devtools
Done in 202.88s.

3. 编译打包成功后会在E:\mysoftware\Vue3\devtools-6.5.0\node_modules\@vue-devtools目录下生成shell-chrome文件夹。此文件夹就是用来放入chrome的扩展程序。
4. 将shell-chrome拷贝到一个单独目录，如:E:\mysoftware\Vue3\shell-chrome

4. Chrome安装与使用

扩展Chrome插件

打开Chrome浏览器–>选择更多工具–>扩展程序–>打开开发者模式,点击“加载已解压的扩展程序”,选择 E:\mysoftware\Vue3\shell-chrome文件夹 ->确定。如果看不到“加载已解压的扩展程序…”按钮，先勾选“开发者模式”

注意：扩展时提示Manifest version 2 is deprecated，但是不影响

Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details.