vue調試工具vue-devtools
1.作用：可以查看vue組件里面的data里面的變量，methods里面的函數，和一些全局對象 比如說:$refs,$route，可以查看vuex里面的變量及變化。對數據結構進行解析和調試。牛的地方就是可以直接修改 能看到的差不多都能改
鏈接：解決vue-devtools在Chrome中無效問題終極方案
2.使用：直接在Chrome安裝拓展程序 網上有的是
3.
注意 使用時 把項目 npm install npm build 一下
簡介：
- Components 組件面板: 檢查組件、按組件過濾、顯示原始的組件名、可編輯組件的data；
- Vuex 狀態面板: mutations記錄、過濾mutations、state\getters\mutations\actions\props 檢查器可折疊
- Events 事件面板: 事件歷史、按組件搜索事件；
- Routing 路由面板: 查看路由歷史記錄、路徑變更詳情；
- Performance 性能面板: 每秒幀數幀率、組件渲染的性能圖表、組件各生命周期函數的耗時統計和分析；
- Settings 設置面板: 調整工具界面的主題、正規化組件名、調整工具的界面布局。
拓展：檢測vuex的時間穿梭狀態變化
所有的狀態變更只能通過 mutation 狀態，並且每次狀態的改變都會生產一個全新的 state 對象。把每次變更的 state 對象事件都記錄下來，展現出一個 mutation 列表，當你想展現什么時間段的狀態，只需要切換到那個時間段的 state 對象。進行查看
步驟：
- 觸發time travel
vuex 面板左側的 mutation 列表，每一行，鼠標放到該行的時候，會顯示三個小圖標，它們的功能是：commit 這次的 mutation 、重置 mutation 、對這次的狀態時光旅行。
點擊時鍾小圖標，觸發 vue-devtools-master 2/src/devtools/views/vuex/VuexHistory.vue 下的 timeTravelTo 函數，該操作是一個 action 行為。 - 觸發 action
timeTravelTo 調用的時候，執行 travelTo 方法，該方法主要做了兩件事：一是告訴 vue-devtools，更改了vuex面板的時光旅行，選中的樣式和狀態你更改下；二是觸發 commit 操作，去觸發 mutation。 - 觸發 mutation
INSPECT 和 TIME_TRAVEL 會直接更改 inspectedIndex 和 activeIndex，當它們變更的時候會觸發getter的 inspectedState 重新計算。確定進行這次的時光旅行，更改狀態。
禁用
很多項目不想讓你獲取到這vue實例 所以就用禁用這個插件
生產模式下禁用https://juejin.im/post/6844903905504002062
上線項目進行調試 https://juejin.im/post/6844904036152377351
相互制約嗎 進行參考可以 暫時沒有用到