vue chrome devtools调试工具的安装

在vue官网 我们找到 Cookbook页面 中的‘替代方案’

鼠标点击红框里的 【chrome版本】，

打开的地址是这样的: 

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

如果打不开连接，可以复制【nhdogjmejiglipccpnnnanhbledajbpd】，这个是chrome上devtools扩展的id

然后打开 https://chrome-extension-downloader.com/ ， 输入复制的id ，点击 【download extension】下载devtools扩展

这是下载下来的扩展文件：

然后打开chrome浏览器，打开扩展程序：chrome://extensions/， 把Vue.js-devtools_v5.3.3.crx文件拖到里面安装

启动vue项目，打开调试工具F12，就可以看到后面多一个Vue，说明安装成功。

常见错误：

1. 如果报错误：程序包无效CRXHEADERINVALID，解决方法参考下面地址：

标准版Vue Devtools_5.3.4_chrome扩展插件下载_极简插件

2. 安装后调试工具没有出现Vue (如果是vue3项目 则可能会出现这个问题) , 此时需要安装devtool beta版

beta版Vue.js Devtools_6.0.0.21_chrome扩展插件下载_极简插件

注：原来的标准版可删可不删，如果不删，则需要先禁止