Vue Devtools文檔
當(dāng)在Chrome瀏覽器中按官網(wǎng)這種方式打不開鏈接，又不想更換瀏覽器去安裝vue-devtools，可采用下面兩種方案
image.png
方法1.在 vuejs/devtools github上下載源碼在本地打包編譯出谷歌擴(kuò)展程序
image.png
這里選擇最新tag下載
image.png
進(jìn)入目錄后，運(yùn)行 yarn install 安裝依賴，這里安裝會“很慢”。。。
image.png
注: 若遇到安裝報錯，重新安裝
npm install -g yarn
yarn install
安裝成功后執(zhí)行 yarn run build，成功后如下
image.png
最后添加到Chrome擴(kuò)展程序中即可【注意：編譯的devtools谷歌瀏覽器擴(kuò)展程序目錄是 packages\shell-chrome】
image.png
效果如下：
image.png
方法2.桌面方式打開-官網(wǎng)提供的另一種方式 - 這種安裝更快捷，更通用，就是使用上麻煩點(diǎn)
如果您使用的是不受支持的瀏覽器，或者您有其他特定需求（例如，您的應(yīng)用程序在Electron中），您可以使用獨(dú)立的應(yīng)用程序。
image.png
1.這里我是全局安裝的 npm install -g @vue/devtools
2.命令窗口運(yùn)行：vue-devtools
3.修改自己項(xiàng)目中的index.html，在<head>下添加 <script src="http://localhost:8098"></script>
image.png
4.運(yùn)行自己的項(xiàng)目
最后效果如下：
image.png
參考：
Vue Devtools文檔
安裝vue-devtools時出現(xiàn)報錯
若對你有幫助，請點(diǎn)個贊吧，謝謝支持！
本文地址：http://www.itdecent.cn/p/e0f292a60403?v=1675404021940，轉(zhuǎn)載請注明出處，謝謝。
