【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 npmnpm install

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

构建代码

yarn run build# or use npmnpm run build

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

在浏览器中添加扩展

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

使用

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