vue.js應用調(diào)試插件Vue.js devtools

Vue.js devtools是一款chrome瀏覽器上的開發(fā)者調(diào)試插件，你可以通過這款插件在瀏覽器開發(fā)者工具下調(diào)試代碼。由于vue是數(shù)據(jù)驅(qū)動的，所以這就存在在開發(fā)調(diào)試中查看DOM結構并不能解析出什么。但是借助vue-devtools插件，我們就可以很容易的對數(shù)據(jù)結構進行解析和調(diào)試。

使用方法：

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插件安裝后無法使用，出現(xiàn)提示“vue.js not detected”，這時我們可以使用下面的方法：

第一，我們需要找到Vue.js devtool插件的安裝目錄。（如果真找不到插件的安裝位置，可以在本地電腦搜索插件的ID：nhdogjmejiglipccpnnnanhbledajbpd。）不同操作系統(tǒng)中chrome插件安裝位置不同，比如win8系統(tǒng)中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，就應該可以正常使用了。

第三，如果通過上面的方法調(diào)整過后，還是不能夠使用，那么可以調(diào)整一下webpack.config.js的代碼，如下圖所示：

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

功能介紹

- 上手簡單

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

- 功能多樣

漸進式的生態(tài)系統(tǒng)，在圖書館和功能全面的框架之間進行擴展。

- 演示優(yōu)化

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

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

使用注意事項：

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