Vue.js 在瀏覽器開發者工具中內建了一個很棒的面板，讓你可以檢視和與應用程序進行交互，以便於調試和理解。
當你第一次嘗試 Vue.js 時，如果你打開瀏覽器開發者工具，你會看到這樣的消息：“下載 Vue Devtools 擴展程序以獲得更好的開發體驗：https://github.com/vuejs/vue-devtools”。
這是一個友好的提醒，讓你安裝 Vue Devtools 擴展程序。這是什麼？任何流行的框架都有自己的 devtools 擴展程序，通常會在瀏覽器的開發者工具中添加一個專門的面板，比瀏覽器內建的那些面板更專業。在這種情況下，這個面板可以讓我們檢視和與 Vue 應用程序進行交互。
這個工具在構建 Vue 應用程序時將會非常有幫助。開發者工具只能在 Vue 應用程序處於開發模式下才能檢查。這樣可以確保沒有人能夠使用它們與你的生產應用進行交互（並且這樣使用 Vue 將更高效，因為它不需要關心 devtools）。
讓我們安裝它！
有三種方式來安裝 Vue Devtools：
- 在 Chrome 上
- 在 Firefox 上
- 作為一個獨立應用
不支援使用自定義擴展程序的 Safari、Edge 和其它瀏覽器，但你可以使用獨立應用來調試在任何瀏覽器中運行的 Vue.js 應用。
在 Chrome 上安裝
前往 Google Chrome 商店的這個頁面：https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpd，點擊 添加到 Chrome。
繼續按照安裝流程操作：
Vue.js devtools 圖標就會出現在工具欄上。如果該頁面沒有 Vue.js 實例運行，圖標將會變成灰色。
如果 Vue.js 被檢測到，圖標將會有 Vue 標誌的顏色。
該圖標僅僅用於顯示有 Vue.js 實例存在。要使用 devtools，我們需要打開開發者工具面板，使用“視圖 -> 開發人員 -> 開發者工具”或 Cmd-Alt-I。
在 Firefox 上安裝
你可以在 Mozilla 的附加組件商店中找到 Firefox 的 devtools 擴展程序：https://addons.mozilla.org/zh-TW/firefox/addon/vue-js-devtools/
點擊 “添加到 Firefox” 就可以安裝該擴展程序。和 Chrome 一樣，該圖標將會變成灰色。
當你訪問一個有 Vue 實例運行的網頁時，該圖標會變成綠色，當我們打開開發者工具時，我們將看到一個 “Vue” 面板：
安裝獨立應用
你也可以使用獨立的 DevTools 應用。
使用以下命令進行安裝：
npm install -g @vue/devtools
// 或者
yarn global add @vue/devtools
並通過以下命令運行：
vue-devtools
這將打開這個獨立的基於 Electron 的應用程式。
現在，將它顯示的 script 標籤粘貼到項目的 index.html 文件中，等待應用程式重新加載，它將自動連接到應用程式：
如何使用開發工具
如上所述，Vue Devtools 可以通過在瀏覽器中打開開發工具並切換到 Vue 面板來啟用。
另外一個選擇是右鍵點擊頁面上的任何元素，選擇 “檢查 Vue 組件”：
當 Vue Devtools 面板打開時，我們可以瀏覽組件樹。從左側的列表中選擇一個組件時，右側的面板會顯示它持有的 props 和數據：
頂部有 4 個按鈕：
-
Components（當前面板）：列出了在當前頁面中運行的所有組件實例。Vue 可以同時運行多個實例，例如它可能管理你的購物車小部件和幻燈片，這是獨立的輕量應用程序。
-
Vuex：你可以在這裡檢查通過 Vuex 管理的狀態。
-
Events：顯示所有發出的事件。
-
Refresh：重新加載 devtools 面板。
注意組件旁邊的小 = $vm0 文字？這是一種方便的方式，可以使用控制台檢查組件。按下 “esc” 鍵在 devtools 底部顯示控制台，你可以輸入 $vm0 來訪問 Vue 組件：
這很酷，可以在不必在代碼中將組件分配給全局變量的情況下檢查和與組件交互。
過濾組件
輸入組件名稱的開頭字母，組件樹將過濾掉不匹配的組件。
在頁面中選擇組件
點擊
按鈕，你可以使用滑鼠在頁面中懸停在任何組件上，點擊它，它將會在 devtools 中打開。
格式化組件名稱
你可以選擇以駝峰式命名或使用短橫線顯示組件。
過濾檢查的數據
在右側面板中，你可以輸入任何關鍵字來過濾不匹配的屬性。
檢查 DOM
點擊檢查 DOM 按鈕，你將進入 DevTools 的元素檢查器，顯示由組件生成的 DOM 元素：
在編輯器中打開
任何用戶自定義的組件（非框架級別的組件）都有一個按鈕，可以在你的默認編輯器中打開它。非常方便。