牛X的vue調(diào)試神器Vue Devtools
關(guān)注? 入坑互聯(lián)網(wǎng)? ，回復(fù)“ 加群 ”
加入我們一起學(xué)習(xí)，天天進(jìn)步
前言
vue-devtools是一款基于chrome瀏覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率。接下來我們就介紹一下vue-devtools的安裝。
chrome商店直接安裝 vue-devtools可以從chrome商店直接下載安裝，非常簡單，這里就不過多介紹了。不過要注意的一點就是，需要翻墻才能下載。
工欲善其事, 必先利其器, 快快一起來用vue-devtools來調(diào)試開發(fā)你的vue項目吧
手動安裝
第一步：找到vue-devtools的github項目，并將其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools
第二步：安裝項目所需要的npm包
npm install //如果太慢的話，可以安裝一個cnpm, 然后命令換成 cnpm install
第三步：編譯項目文件
npm run build
第四步：擴展Chrome插件
Chrome瀏覽器 > ?更多程序 > 拓展程序
點擊加載已解壓程序按鈕, 選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖
vue-devtools如何使用
當(dāng)我們添加完vue-devtools擴展程序之后，我們在調(diào)試vue應(yīng)用的時候，chrome開發(fā)者工具中會看一個vue的一欄，點擊之后就可以看見當(dāng)前頁面vue對象的一些信息。vue-devtools使用起來還是比較簡單的，上手非常的容易，這里就細(xì)講其使用說明了。
路由
Routing選項卡是devtools套件的全新選項。這里有兩個不同的視圖，“歷史記錄”和“路徑”，可以通過單擊“路由”選項卡標(biāo)題進(jìn)行交換。如果您在應(yīng)用程序中使用vue-router，這些都會提供有用的信息。
歷史視圖有兩個面板。左側(cè)面板顯示已經(jīng)前往的路線的歷史記錄。單擊其中一個歷史記錄條目將在右側(cè)面板中顯示該路徑更改的詳細(xì)信息。這些詳細(xì)信息顯示用戶導(dǎo)航和導(dǎo)航的路線，以及任何伴隨的路線參數(shù)。
路由視圖還有兩個面板，左側(cè)面板顯示應(yīng)用程序中所有路徑的映射。單擊其中一條路線將在右側(cè)面板中顯示其詳細(xì)信息。此處的詳細(xì)信息與上一個視圖略有不同，而是顯示路徑，任何子項（嵌套）路由和任何路由參數(shù)。
Vuex
可以從devtools更新應(yīng)用程序狀態(tài)！
這個功能一直期待已久。在更新之前，改變狀態(tài)的過程要繁瑣得多。您必須重新給一個真確的的Mutation以獲得您想要的狀態(tài)，或者您必須手動更新Vuex模塊文件中的默認(rèn)值。現(xiàn)在，您只需單擊任何狀態(tài)值，然后從那里更新或刪除。此外，您甚至可以在現(xiàn)有對象上添加新屬性！
性能
與路由選項卡一樣，性能選項卡也是一個新增功能。此選項卡由兩部分組成，“每秒幀數(shù)”和“組件渲染”。第一個選項卡“每秒幀數(shù)”顯示一個實時源圖表，其中包含應(yīng)用程序的當(dāng)前fps。這可用于查找減慢應(yīng)用程序速度的某些操作或組件。、
在下圖中，您可以看到圖表中的第一個紅色凹陷在其頂部有“M”，“E”和“R”圖標(biāo)。“M”表示發(fā)生Mutation，“E”表示事件被觸發(fā)，“R”表示路徑發(fā)生變化。我們可以預(yù)判應(yīng)用程序的fps會暫時降低路徑變化，但如果這是意外下降，那我們更加容易查出哪些組件消耗了比較多的資源。
“Component Render”選項卡的第二張圖片顯示了組件生命周期方法的詳細(xì)運行時間統(tǒng)計信息。左窗格顯示組件的總渲染時間，而右窗格按生命周期方法提供細(xì)分。任何極慢的組件都會在這個左側(cè)標(biāo)簽中脫穎而出，這再次為調(diào)查性能問題提供了一個良好的起點。
溫情提示:
1.vue必須引入開發(fā)版, 使用min壓縮版是不能使用devtools進(jìn)行調(diào)試的
2.安裝后, 需要關(guān)閉瀏覽器, 再重新打開, 才能使用
?? 看完三件事
如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個小忙：
- 點贊，讓更多的人也能看到這篇內(nèi)容（收藏不點贊，都是耍流氓）。
- 關(guān)注公眾號「入坑互聯(lián)網(wǎng)」，不定期分享原創(chuàng)知識。
- 也看看其它文章
- END -
結(jié)伴同行前端路
