Vue Devtools文档
当在Chrome浏览器中按官网这种方式打不开链接，又不想更换浏览器去安装vue-devtools，可采用下面两种方案
image.png
方法1.在 vuejs/devtools github上下载源码在本地打包编译出谷歌扩展程序
image.png
这里选择最新tag下载
image.png
进入目录后，运行 yarn install 安装依赖，这里安装会“很慢”。。。
image.png
注: 若遇到安装报错，重新安装
npm install -g yarn
yarn install
安装成功后执行 yarn run build，成功后如下
image.png
最后添加到Chrome扩展程序中即可【注意：编译的devtools谷歌浏览器扩展程序目录是 packages\shell-chrome】
image.png
效果如下：
image.png
方法2.桌面方式打开-官网提供的另一种方式 - 这种安装更快捷，更通用，就是使用上麻烦点
如果您使用的是不受支持的浏览器，或者您有其他特定需求（例如，您的应用程序在Electron中），您可以使用独立的应用程序。
image.png
1.这里我是全局安装的 npm install -g @vue/devtools
2.命令窗口运行：vue-devtools
3.修改自己项目中的index.html，在<head>下添加 <script src="http://localhost:8098"></script>
image.png
4.运行自己的项目
最后效果如下：
image.png
参考：
Vue Devtools文档
安装vue-devtools时出现报错
若对你有帮助，请点个赞吧，谢谢支持！
本文地址：https://www.jianshu.com/p/e0f292a60403?v=1675404021940，转载请注明出处，谢谢。
