在google chrome瀏覽器上安裝 Vue Devtools工具

【轉】https://www.cnblogs.com/tanyongli/p/7554045.html

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項目應該就可使用了。