【详细】在新版Microsoft Edge和Chrome中安装vue-devtools

---

谷歌插件商店安装

如果能够访问的话，可以直接到谷歌插件商店搜索安装。
Chrome 网上应用店

源码构建安装

下载

如果没办法访问谷歌插件商店，可以选择下载 源码 手动构建安装。
手动安装的前提是：确保安装了 Node 6+ 和 NPM 3+ 或者 YARN

• 首先在 GitHub 下载插件压缩包并解压 ✅vue-devtools - Github地址
  （或者克隆项目也是一样的）

• 下载后解压缩

安装依赖

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

• 如果安装了git，可以直接右键 Git Bash Here，执行下面的命令安装依赖。

• 没安装的话可以 Shift+右键 在此处打开 Powershell ，执行命令

npm install
# 或者是
yarn install

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

构建代码

npm run build
# 或者是
yarn run build

构建代码会生成 shell-chrome

在浏览器中添加扩展

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

使用

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