【Windows】在 Microsoft Edge 和 Chrome 中安装 vue-devtools

---

1. 插件商店安装

Edge 浏览器可以直接在商店下载安装：Edge 外接程序
如果网络能够访问的话，也可以直接到谷歌插件商店搜索安装：Chrome 网上应用店

Edge 可以从谷歌应用商店安装插件， Chrome 却无法从 Edge 商店安装插件 (提示不兼容)

2. 源码构建安装

下载

如果没办法访问谷歌插件商店，可以选择下载 源码 手动构建安装。

本地安装构建前确保已安装 node 6+ (npm 3+) 或者 yarn

获取源码
首先从 GitHub 克隆源码或下载源码压缩包：✅ vue-devtools - Github地址

下载压缩包后需要解压

安装依赖

进入 dev\vue-dev-tools-dev 目录

• 如果安装了git，可以直接右键 Git Bash Here，执行下面的命令安装依赖。
• 没安装的话可以 Shift+右键 在此处打开 Powershell ，执行以下命令：

yarn install

# or use npm
npm install

安装依赖的时间可能会比较久，如果安装失败了就把 node_modules 删除重新安装，这是NPM 安装完成的结果。

构建代码

yarn run build

# or use npm
npm run build

构建代码会生成 packages\shell-chrome 目录

在浏览器中添加扩展

打开浏览器扩展程序，开启开发人员模式，选择允许来自其他 Microsoft Store 的扩展，然后加载解压的扩展，选择 vue-devtools-dev\shells\chrome 文件夹：

使用

打开浏览器开发者工具，当浏览器检测Vue的时候就会出现相应的页面组件结构。