Chrome 擴展 Vue Devtools

Vue.js devtools是基於google chrome瀏覽器的一款調試vue.js應用的開發者瀏覽器擴展,能夠在瀏覽器開發者工具下調試代碼。vue

1)首先在github下載devtools源碼,地址:https://github.com/vuejs/vue-devtools。webpack

2)下載好後進入vue-devtools-master工程 執行cnpm install, 下載依賴,而後執行npm run build,編譯源程序。git

3)編譯完成後,目錄結構以下:
github

修改shells、chrome目錄下的mainifest.json 中的persistant爲true:web

4)打開谷歌瀏覽器的設置--->擴展程序,並勾選開發者模式chrome

而後將剛剛編譯後的工程中的shells目錄下,chrome的整個文件夾直接拖拽到當前瀏覽器中,並選擇啓用,便可將插件安裝到瀏覽器。shell

5)打開一個已有的vue項目,運行項目,而後在瀏覽器中--->設置--->更多工具--->開發者工具,進入調試模式:npm

發現vue.js is not detected  ,能夠調整一下webpack.config.js的代碼,json


最後,重啓一下你的vue項目應該就能夠使用了。瀏覽器

相關文章
相關標籤/搜索