背景

? ? ? ? 在項目上用到vue技術，在bilibili上學習vue，期間老師推薦使用vue dev-tools調試神器，所以過來安轉和使用了，用了感覺不錯，希望給大家帶來效率的提升。

定義

????????Vue DevTools?是一款旨在增強 Vue 開發者體驗的工具，它是一款功能強大且用途廣泛的工具，可以在使用 Vue 應用程序時顯著提高您的生產力和調試能力。它的實時編輯、時間旅行調試和全面檢查功能使其成為任何Vue.js開發人員的必備工具。

作用

????????Vue DevTools 提供了幾個優勢，可以顯著增強您的開發過程和Vue.js應用程序的調試體驗：

????????實時編輯屬性：Vue DevTools 允許你直接實時編輯屬性并立即看到反映的更改。此功能對于快速測試更改特別有用，而無需重新啟動應用程序或手動更新代碼。

????????時間旅行調試：最強大的功能之一是它能夠執行時間旅行調試。這意味著您可以在任何時間點檢查商店的狀態，從而跟蹤錯誤并了解應用程序的狀態如何隨時間變化。

????????Vue Router 集成：查看路由列表及其詳細信息。

????????Pinia 集成：該工具將所有發出的事件收集到一個位置，允許您監控和跟蹤應用程序的自定義事件，包括每個事件的源組件、名稱、大小和有效負載。此功能可用于識別性能瓶頸和優化應用程序。

安裝

? ? ? ? github：在github上下載devtools源碼，地址：https://github.com/vuejs/vue-devtools

? ? ? ? 百度云盤：https://pan.baidu.com/s/1ZXldJTWhsEOCcHXRtwdqyg?pwd=vkz8

? ? ? ? 如果時效7天，如果時間過了，請留言，我第一時間會回復最新地址。

使用

????????打開瀏覽器右上角的設置–>更多工具–>擴展程序，打開開發者模式

? ? ? ? 將vue-devtools.zip拖入瀏覽器拓展程序。

? ? ? ? 拓展成功效果圖

? ? ? ? 按F12后在控制臺最右側有vue標識