简介

chrome浏览器是前端开发的重要调试工具，vue是当下国内前端最流行的框架。vue-devtools作为vue开发的专用调试工具，在vue的开发中起着至关重要的作用。然而，在国内的的开发环境中，正常的网络环境是无法访问chrome浏览器的插件市场，这也就导致没有办法从google应用市场直接安装vue-devtools。本文将带领大家通过正常合法的途径安装vue-devtools。

vue2与vue3不同的调试工具

vue2推荐安装v6.5.1版本，vue3推荐使用v7.6.8版本。注意：vue-devtools v6.x虽然也支持vue3的调试，但其中存在大量bug，所以尽量不要使用v6.x的版本用来调试vue3；vue-devtools v7.x是无法支持vue2的调试的。

从github上下载vue-devtools源码

国内目前开发环境可能访问github也不是很流畅，大家可以配置一下自己的host文件：

• host文件目录：C:\Windows\System32\drivers\etc\hosts （一般情况是这个路径，大家根据自己电脑实际情况）。
• 从 https://ping.chinaz.com/github.com 中找一个访问速度比较快的ip

• 将该ip地址添加到hosts文件中

如果GitHub做了配置访问还是有困难，可以换个时间或使用其他方案。大家有好的合法访问方式可评论区讨论。

vue-devtools v6.5.1下载：
https://github.com/vuejs/devtools-v6/tree/v6.5.1

vue-devtools v7.6.8 下载：
https://github.com/vuejs/devtools/tree/v7.6.8

我的环境

依赖安装

可能国内yarn的默认环境会导致导致安装依赖失败，可以配置镜像解决

yarn config set registry https://registry.npmmirror.com/

验证是否配置成功：

另外，可能在安装依赖时，虽然已经配置了安装镜像，但是electron还是会出现安装不成功的可能，如果安装不成功，则需要对其进行单独安装。

安装electron

下载electron地址：
https://registry.npmmirror.com/binary.html?path=electron/

根据你下载的vue-devtools中pakage.json文件下载对应的electron版本

下载之后将会得到一个zip压缩包，解压该压缩包

然后回到下载的源码中，在源码对应的位置创建node_modules\electron\dist文件夹，将刚才解压好的内容全部复制到该文件夹下node_modules\electron下创建一个path.txt文件

安装依赖

随后正常安装依赖就可以了

yarn install

如果安装依赖过程中出现，下面的错误

error An unexpected error occurred: "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz: read ECONNRESET".

请将源码中的yarn.lock文件删除，然后运行安装

打包并安装

依赖安装成功之后，对其进行打包

yarn run build

打包成功之后，我们打开chrome扩展管理添加对应的即可：

vue-devtools v6.5.1选择：

vue-devtools v7.6.8选择：

安装成功后，启动一个vue项目，并打开chrome调试工具，则会出现如下面的标签内容

到这里就算全部安装成功了。

注意：尽量不要将两个版本的调试工具同时运行。