一、前言
因為最近練習Vue3專案的時候，發現Chrome瀏覽器的devtools插件不起作用了，這才想起當前安裝的devtools是5版本的，而Vue3專案需要6版本才支持，
二、安裝
1. 在Github上搜索devtools專案，直達車
2. 找到devtools專案tags的6.0版本以上的的beta版本，下載到本地
3. 解壓后，用編輯器打開，因為這個專案是用yarn管理的，而我本地沒有安裝yarn，因此需要安裝yarn工具,如果不了解yarn的推薦看這里
npm install -g yarn
4. 執行yarn install下載專案依賴，這里如果不成功的話，推薦使用淘寶鏡像
5. 執行yarn run build打包專案，但是這里報錯了
這是因為我用的windows，識別不了rm，在windows環境下要是用rimraf
因此需要安裝rimraf,參考npm包--rimraf：丫丫0721的博客
npm install rimraf --save-dev
安裝完成后，需要把所有的rm -rf替換成rimraf,只有兩個檔案夾有，一個就是我們需要的packages\shell-chrome\package.json，另一個在packages\shell-electron\package.json
修改完成后在執行yarn run build,就可以打包成功了，這個時候packages\shell-chrome檔案夾里面會有一個build檔案件，這就是我們打包好的檔案
6. 打開Chrome瀏覽器的擴展程式，點擊加載已解壓的擴展程式，然后找到剛才的shell-chrome檔案夾并選擇它就可以了，
三、總結
因為以前Vue2的時候使用的擴展迷,這是個很好用的插件網站，要關注微信公眾號才能下載，并且還有使用教程，這次我主要是想嘗試一下自己打包編譯一下devtools工具，本以為會很順利，但沒想到還是踩坑了，并且在rm -rf這個錯誤上卡了很久，這里非常感謝莫得感情學習機1號的博客：踩坑記6 vue3、生命周期鉤子、vue-devtools beta，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/471816.html
標籤：其他
上一篇：愛前端公開課學習筆記——JS02 字串型別，布爾型別
下一篇：前端周刊：2022-6 期