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

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

使用方法：

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

5、Vue.js devtool插件安裝后無法使用，出現(xiàn)提示“vue.js not detected”，這時(shí)我們可以使用下面的方法：

第一，我們需要找到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文件（這是關(guān)鍵）。

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

一般情況下，修改完如上的位置的代碼。打開vue項(xiàng)目后，在控制臺(tái)選擇vue，就應(yīng)該可以正常使用了。

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

最后，重啟一下你的vue項(xiàng)目應(yīng)該就可以使用了。

功能介紹

- 上手簡單

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

- 功能多樣

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

- 演示優(yōu)化

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

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

使用注意事項(xiàng)：

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