在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扩展插件下载_极简插件
注:原来的标准版可删可不删,如果不删,则需要先禁止