Vue.js Devtools擴展安裝與踩坑

一、前言

因為最近練習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。