Vue在浏览器安装Vue Devtools的两种方法

本文最后更新于2022.05.14-16:51，某些文章具有时效性，若有错误或已失效，请在下方留言或联系涛哥。

在vue中，通常情况下我们使用Google Chrome浏览器，和Firefox两种浏览器开发，因为vue官方只提供了这两种浏览器的调试开发工具。

一、在线安装方式（Vue Devtools）

1.选择Get Started

2.点击Get the Chrome Extension进行安装，要获取安装包必须是外网环境，这里推荐使用Upnet VPN  或者别的任意VPN

3.根据官方的教程完成后续Settings(设置)

二、不能使用外网情况下的安装方式（https://github.com/vuejs/vue-devtools）

1.下载chrome扩展插件

在github上下载压缩包并解压到本地，github下载地址：https://github.com/vuejs/vue-devtools下载master分支。

2.npm install

下载完成后打开命令行cmd进入vue-devtools-master文件夹，

2.1. npm install，安装依赖包；（如果安装太慢，就先安装淘宝镜像,命令行输入   $ npm install -g cnpm --registry=https://registry.npm.taobao.org。  安装完成后可以测试是否安装成功：可输入命令：$ cnpm -v         返回版本号说明安装成功　现在就可以用 $ cnpm install ）

2.2.npm run build 编译

编译打包完后会在shells>chrome下的src文件夹里生产如上图所示的几个js文件;

 

 

 

 

 

 

 

 

 

3.扩展chrome插件

3.1.打开chrome浏览器，点击右上角，打开更多工具>扩展程序；

3.2.打开右上角的开发者模式。 再点击加载已解压的扩展程序，然后把shells>chrome文件夹放入

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

注意如果使用的是vue.min.js  需要在程序中设置

Vue.config.devtools = true; 开启。