在瀏覽器上安裝 Vue Devtools工具

Vue.js devtools是基於google chrome瀏覽器的一款除錯vue.js應用的開發者瀏覽器擴充套件，可以在瀏覽器開發者工具下除錯程式碼。

1）首先在github下載devtools原始碼，地址：https://github.com/vuejs/vue-devtools

2）下載好後進入vue-devtools-master工程 執行cnpm install, 下載依賴，然後執行npm run build，編譯源程式。

3）編譯完成後，目錄結構如下：

修改shells、chrome目錄下的mainifest.json 中的persistant為true：

4）開啟谷歌瀏覽器的設定--->擴充套件程式，並勾選開發者模式

然後將剛剛編譯後的工程中的shells目錄下，chrome的整個資料夾直接拖拽到當前瀏覽器中，並選擇啟用，即可將外掛安裝到瀏覽器。

5）開啟一個已有的vue專案，執行專案，然後在瀏覽器中--->設定--->更多工具--->開發者工具，進入除錯模式：

發現vue.js is not detected ，可以調整一下webpack.config.js的程式碼，

---

最後，重啟一下你的vue專案應該就可以使用了。

原文地址：# 在瀏覽器上安裝 Vue Devtools工具