安装vue devtools及常见问题

下载

以下三种方式选择一种即可。

vue2百度网盘下载

下载链接：https://pan.baidu.com/s/1ktNIarB-zXz2ij0pda6IQw?pwd=v6d3

网盘中包含vue2的devtools安装工具，vue3无法使用，vue3请使用github下载的方式

crx安装

第一步：打开浏览器的管理扩展程序页签：

第二步：

将得到的vue_dev_tools.crx文件,拖动到

极简插件下载

下载链接：https://chrome.zzzmh.cn/#/index

下载完成后,解压可以查看到安装步骤

github下载

下载链接：https://github.com/vuejs/vue-devtools（也可通过gitcode下载，速度会很快，且不需要梯子）
第一步：下载
或者通过git克隆

git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git

第二步：解压并编译
前提：首先需要安装node，安装方法见文章创建vue项目的两种方式

解压后可看到下面的目录

在当前目录下启动cmd，执行下面的脚本。有些操作系统安装时，需要有管理员的权限，这就需要以管理员的权限运行cmd脚本

# 需要先安装有yarn 需要有管理员的权限，在可在任意目录安装
cnpm install -g yarn
# 使用yarn安装依赖 必须在下载的devtools解压目录下安装 
yarn install 
# 安装完成后编译打包  必须在下载的devtools解压目录下安装
yarn run build:watch

执行完build:watch后界面会停在这个界面，按 ctrl +c 退出

#  继续执行下面的命令必须在下载的devtools解压目录下安装
yarn run dev:chrome

出现如下界面表示安装成功

此时在packages/shell-chrome下可看到编译打包结果

通过浏览器的管理扩展程序，将shell-chrome目录作为解压的扩展程序（如下图）

安装成功

警告提示（manifest_version:2的2024年将移除），点击提示如下，可忽略，直接重启浏览器即可

常见问题

1、vue2项目打开浏览器的调试器后，看不到vue标签。
Re：显示调试工具的原因是用了生产环境的版本或是压缩的vue版本， Vue Devtools只在开发环境生效。
需要在项目main.js中引入以下配置：

Vue.config.devtools = true;