Chrome 安装 DevTools 插件

1. 手动下载安装包

如果在中国大陆无法直接访问 Chrome 应用商店，你可以尝试以下方法获取 Vue.js 开发者工具（Vue.js DevTools）：

克隆仓库：您需要从 GitHub 上克隆 dev-tools 的主分支代码或者下载 zip 包到本地。（如果您默认克隆的是 dev 分支，需要切换到 master 分支，因为 dev 分支可能不包含所有必要的构建文件）
安装依赖：进入到克隆下来的 dev-tools 目录中，使用 npm install 命令安装项目所需的依赖包。（我用的 yarn 1.22.22 node 16.16.0）
构建项目：依赖安装完成后，执行 npm run build 命令来编译和打包项目。编译成功后，会在指定的目录下生成 shells/chrome 或者 packages/shell-chrome 文件夹，这个文件夹就是用于添加到 Chrome 浏览器的扩展程序。
加载扩展：打开谷歌浏览器的扩展程序页面，选择“加载已解压的扩展程序”，然后将刚刚生成的 chrome 文件夹拖动到此页面，完成扩展程序的添加。

install 报错问题

一般是因为包依赖冲突造成的解析错误。可以尝试以下方法来解决这个问题：

使用 --force 参数重新安装: 尝试使用 npm install --force 命令来强制安装依赖并解决可能存在的依赖冲突。
使用 --legacy-peer-deps 参数: 你也可以尝试使用命令 npm install --legacy-peer-deps 来接受旧版本 peer 依赖解析，解决依赖冲突。
手动解决依赖冲突: 如果以上方法无效，你可能需要手动解决依赖冲突。可以尝试更改相应包的依赖版本，以使其与项目中其他依赖项兼容。
更新依赖版本: 检查一下相关依赖的版本是否有更新，如果有更新的版本可能已经解决了依赖冲突的问题。
删除 node_modules 目录: 可以尝试删除当前项目中的 node_modules 目录，然后再运行 npm install 安装依赖。
以管理员身份运行: 确保你有足够的权限来删除和安装文件。可以尝试以管理员身份运行命令提示符或 PowerShell
删除 package.lock.json 文件: 删除 package.lock.json 文件，然后重新运行 npm install 命令。
使用 yarn 安装依赖: 在命令行工具中输入 npm install -g yarn 并回车执行，然后再运行 yarn install 安装依赖。
直接下载我构建好的文件: 下载地址 download-devtools-chrome-v6.6.1
下载之后在 chrome 里打开打开地址 chrome://extensions/, 把下载好的文件直接拖到浏览器即可。

通过以上方法，你可以绕过 Chrome 应用商店直接下载并安装 Vue.js 开发者工具。

如果你在 Chrome 可以正常访问, Chrome 浏览器上安装 Vue.js 开发者工具（Vue.js DevTools）的步骤如下：

首先，确保你的 Chrome 浏览器是最新版本，并打开 Chrome 浏览器。
在 Chrome 浏览器的地址栏中输入以下网址：chrome://extensions/，然后按下回车键打开 Chrome 的扩展程序管理页面。
在扩展程序管理页面的右上角，找到并打开“开发者模式”选项。
确认“开发者模式”已开启后，在页面左侧菜单栏点击“从 Chrome 网上应用商店安装扩展程序”（如果你在中国大陆访问 Chrome 应用商店受限，可以使用第三方插件，如“谷歌访问助手”、“极简插件”等）。
在搜索框中输入“Vue.js DevTools”进行搜索。
找到 Vue.js 开发者工具的官方扩展程序（通常是由“Vue.js devtools”官方发布的），点击“添加至 Chrome”进行安装。
安装完成后，Vue.js 开发者工具图标会出现在 Chrome 浏览器的工具栏上。
点击 Vue.js 开发者工具图标，打开 Vue.js DevTools，确保该插件已成功安装并正常运行。

通过以上步骤，你就可以在 Chrome 浏览器上下载并安装 Vue.js 开发者工具（Vue.js DevTools）了。