大家好，又見面了，我是你們的朋友風君子。如果您正在找激活碼,請點擊查看最新教程,關注關注公眾號 “全棧程序員社區” 獲取激活教程,可能之前舊版本教程已經失效.最新Idea2022.1教程親測有效,一鍵激活。

Jetbrains全家桶1年46，售后保障穩定

第一步：下載源碼

在github下載devtools源碼，地址：
https://github.com/vuejs/vue-devtools

第二步：執行命令

??下載好后進入vue-devtools-master工程 執行cnpm install, 下載依賴，然后執行npm run build，編譯源程序。


cmd回車后進入到vue devtools的安裝目錄下。

?先查看一下registry:
npm congfig get registry
?結果為 ：

??注意：這樣子使用npm install很慢，所以設置一下鏡像,用set命令換成阿里的鏡像就可以了
先執行命令：npm config set registry https://registry.npm.taobao.org
然后再執行命令：npm install

或者直接執行命令npm install --registry=https://registry.npm.taobao.org也可。
正在安裝中：

??如果出現：Unexpected end of JSON input while parsing near錯誤
執行 npm cache clean --force即可解決

接著進行npm install, 下載依賴，然后執行npm run build，編譯源程序。

第三步：查看編譯后的目錄

（1）編譯完成后，目錄結構如下：

（2）修改shells/chrome目錄下的mainifest.json 中的persistant為true：

第四步：打開Google，添加擴展

打開谷歌瀏覽器的設置—>擴展程序，并勾選開發者模式：

??然后將剛剛編譯后的工程中的shells目錄下的chrome這整個文件夾直接拖拽到當前瀏覽器中，即可將插件安裝到瀏覽器。

重啟進入到擴展頁面就如圖所示了：

第五步：測試vue devtools

打開一個已有的vue項目，運行項目，然后按F12，就可以看到多出一個Vue選項了 。

到此為止，Vue調試工具安裝就已經成功并且可以使用了。

---

楠哥——-一心想為IT行業添磚加瓦，卻總是面向cv編程的程序員。

??謝謝閱讀，無誤點贊，有誤還望評論區指正。

---

總結

以上是生活随笔為你收集整理的Vue调试工具安装（vue devtools）(什么是vue)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。