Vue.js devtools是一款用于調(diào)試Vue.js應(yīng)用程序的Chrome和Firefox DevTools擴(kuò)展，在瀏覽器中，可以邊側(cè)邊欄窗格頁面，邊檢查代碼，方便實用。

基本簡介

　　Vue.js devtools是前端開發(fā)IT工程師的好幫手，通過Vue.js devtools數(shù)據(jù)結(jié)構(gòu)調(diào)試工具可以在瀏覽器開發(fā)者工具下調(diào)試代碼，邊側(cè)邊欄窗格頁面，邊檢查代碼。游玩vue是數(shù)據(jù)驅(qū)動，所以存在一些在開發(fā)調(diào)試中查看DOM結(jié)構(gòu)不能分析出什么的問題，此時我們下載使用vue-devtools插件，就可以通過此工具對數(shù)據(jù)結(jié)構(gòu)進(jìn)行解析和調(diào)試。

功能介紹

　　- 上手簡單

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

　　- 功能多樣

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

　　- 演示優(yōu)化

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

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

使用方法

　　1.下載安裝文件

　　下載插件，并在瀏覽器安全提示時選擇【保留】，在下載文件夾中找到下載好的文件，后綴是.crx 。

　　說明：若出現(xiàn)安全提示，請選擇保留。這是瀏覽器的默認(rèn)設(shè)置，我們的插件不會危害你的計算機(jī)。

　　2. 打開擴(kuò)展程序安裝頁面

　　復(fù)制chrome://extensions并粘貼到地址欄，按回車鍵進(jìn)入擴(kuò)展程序安裝頁面，打開右上角的【開發(fā)者模式】。

　　3. 安裝插件

　　將下載好的.crx文件拖拽到到擴(kuò)展安裝頁面內(nèi)，等待數(shù)秒，在安裝彈窗內(nèi)點擊添加即可。