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

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

Vue.js devtools插件安裝教程

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

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

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

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

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

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

Vue.js devtools插件使用方法

1、下載好后進(jìn)入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è)置--->擴(kuò)展程序，并勾選開發(fā)者模式

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

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

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

功能介紹

1、上手簡單

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

2、功能多樣

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

3、演示優(yōu)化

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

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