vue.js應用調試插件Vue.js devtoolsv5.3.3 官方版

vue.js devtools插件是調試vue.js的開發者插件，下載安裝一下，下次打開瀏覽器在需要它的時候就能自動運行！有了它在調試vue.js的時候檢查代碼就要方便許多！軟件包體不大，兼容性強、運行穩定！可以來試試！

【功能介紹】

- 上手簡單

在用戶已經了解HTML，CSS和JavaScript的情況下，閱讀指南後即可立即開始構建。

- 功能多樣

漸進式的生態係統，在圖書館和功能全麵的框架之間進行擴展。

- 演示優化

20KB min + gzip運行，快速虛擬DOM，最少的優化工作。

你還可以看到它們最後的更新時間，如果它們有自己的主頁，還可以對它們進行分類和其他更多的功能。

【使用方法】

1、你可以從chrome應用商店裏找到Vue.js devtools插件，如果你的chrome應用商店無法打開，你可以在本站的下方找到Vue.js devtools下載地址。
2、離線安裝chrome插件的方法均可參照：怎麼在穀歌瀏覽器中安裝.crx擴展。如果你是最新版chrome瀏覽器，可以參考chrome 67版本後無法拖拽離線安裝CRX格式插件的解決方法。
3、下載Vue.js devtools的crx文件後，打開Chrome的擴展頁麵（chrome：// extensions /或按Chrome菜單圖標>更多工具>擴展程序查找），然後拖放 crx文件到擴展頁麵安裝它；
4、點擊“添加拓展程序”完成安裝。

5、Vue.js devtool插件安裝後無法使用，出現提示“vue.js not detected”，這時我們可以使用下麵的方法：

第一，我們需要找到Vue.js devtool插件的安裝目錄。（如果真找不到插件的安裝位置，可以在本地電腦搜索插件的ID：nhdogjmejiglipccpnnnanhbledajbpd。）不同操作係統中chrome插件安裝位置不同，比如win8係統中chrome插件的安裝位置：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd
第二，在找到了Vue.js devtool插件的安裝目錄後，打開mainifest.json文件（這是關鍵）。

將mainfest.json中代碼persistent：false，修改成persistent：true。如下圖所示：

一般情況下，修改完如上的位置的代碼。打開vue項目後，在控製台選擇vue，就應該可以正常使用了。

第三，如果通過上麵的方法調整過後，還是不能夠使用，那麼可以調整一下webpack.config.js的代碼，如下圖所示：

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

【注意事項】

如果頁麵使用的是Vue.js的生產/精簡版本，則默認情況下禁用devtools檢查，因此不會顯示Vue窗格。
要使其適用於通過file：//協議打開的頁麵，您需要在Chrome的擴展程序管理麵板中選中此擴展程序的“允許訪問文件URL”。
僅當您希望自己從源代碼構建擴展以獲取尚未發布的功能時，才需要這樣做。

【官方介紹】

Vue.js devtools是前端開發IT工程師的好幫手，通過Vue.js devtools數據結構調試工具可以在瀏覽器開發者工具下調試代碼，邊側邊欄窗格頁麵，邊檢查代碼。遊玩vue是數據驅動，所以存在一些在開發調試中查看DOM結構不能分析出什麼的問題，此時我們下載使用vue-devtools插件，就可以通過此工具對數據結構進行解析和調試。