vue.js devtolls插件(vue調(diào)試工具)

Vue.js devtools插件是一款用于調(diào)試Vue.js應(yīng)用程序的Chrome和Firefox DevTools擴展工具，一般也被叫做vue調(diào)試工具。插件可以在瀏覽器開發(fā)者工具下調(diào)試代碼，邊側(cè)邊欄窗格頁面，邊檢查代碼，可以通過此工具對數(shù)據(jù)結(jié)構(gòu)進行解析和調(diào)試。Vue.js devtools插件可以邊側(cè)邊欄窗格中的頁面，邊檢查代碼，由于vue是數(shù)據(jù)驅(qū)動的，所以這就存在在開發(fā)調(diào)試中查看DOM結(jié)構(gòu)并不能解析出什么，但是借助vue-devtools插件，我們就可以很容易的對數(shù)據(jù)結(jié)構(gòu)進行解析和調(diào)試；通過vue調(diào)試工具數(shù)據(jù)結(jié)構(gòu)調(diào)試工具可以在瀏覽器開發(fā)者工具下調(diào)試代碼，邊側(cè)邊欄窗格頁面，邊檢查代碼，通過一些特殊的語法，將DOM和數(shù)據(jù)綁定起來，無需手動操作DOM，一旦創(chuàng)建了綁定，DOM將和數(shù)據(jù)保持同步，每當(dāng)變更了數(shù)據(jù)，DOM也會相應(yīng)地更新，有興趣的小伙伴快來下載體驗吧！

Vue.js devtools插件安裝教程

1、首先用戶點擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇工具選項，然后點擊擴展程序來啟動Chrome瀏覽器的擴展管理器頁面

2、進入擴展程序頁面后將開發(fā)者模式打勾

3、找到自己已經(jīng)下載好的Chrome離線安裝文件“l(fā)jjemllljcmogpfapbkkighbhhppjdbg.crx”，然后將其從資源管理器中拖動到Chrome的擴展管理界面中

4、松開鼠標(biāo)就可以把當(dāng)前正在拖動的插件安裝到谷歌瀏覽器中去，但是谷歌考慮用戶的安全隱私，在用戶松開鼠標(biāo)后還會給予用戶一個確認(rèn)安裝的提示

5、這時候用戶會發(fā)現(xiàn)在擴展管理器的中央部分中會多出一個拖動以安裝的插件按鈕，點擊添加擴展程序

6、用戶這時候只需要點擊添加按鈕就可以把該離線Chrome插件安裝到谷歌瀏覽器中去，安裝成功

Vue.js devtools插件使用方法

1、下載好后進入vue-devtools-master工程 執(zhí)行cnpm install，下載依賴，然后執(zhí)行npm run build，編譯源程序

2、編譯完成后，目錄結(jié)構(gòu)如下

3、修改shells目錄下的mainifest.json 中的persistant為true

位置：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\ljjemllljcmogpfapbkkighbhhppjdbg\6.0.0.2_0

4、打開谷歌瀏覽器的設(shè)置--->擴展程序，并勾選開發(fā)者模式

5、然后將剛剛編譯后的工程中的shells目錄下，chrome的整個文件夾直接拖拽到當(dāng)前瀏覽器中，并選擇啟用，即可將插件安裝到瀏覽器

6、打開一個已有的vue項目，我們以todolist項目為例，運行項目，然后在瀏覽器中--->設(shè)置--->更多工具--->開發(fā)者工具，進入調(diào)試模式

7、安裝完插件后，將會看到多了vue一欄，選擇vue，就可以在調(diào)試vue項目的過程中查看相應(yīng)的組件等

功能介紹

1、上手簡單

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

2、功能多樣

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

3、演示優(yōu)化

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

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