相信絕大部分的前端是使用Chrome進(jìn)行開(kāi)發(fā)的，一方面Chrome瀏覽器確實(shí)做得好，更重要的一方面是因?yàn)镃hrome有一個(gè)無(wú)法匹敵的調(diào)試工具。用好這個(gè)調(diào)試工具可以提高編程效率，幫助快速地定位問(wèn)題。

　　01打印

　?。?）console.table

　　最常用的打印是console.log，console.log有時(shí)候打印一些復(fù)雜的數(shù)據(jù)結(jié)構(gòu)顯得有點(diǎn)吃力，如打印一個(gè)元素是object的數(shù)組：

　　為了查看每個(gè)數(shù)組的元素，必須得一個(gè)個(gè)展開(kāi)，就顯得有點(diǎn)麻煩了，其實(shí)可以用console.table：

　　瞬間就變得非常清爽，同時(shí)console.table還支持打印對(duì)象屬性，如下的Student對(duì)象，有name和score兩個(gè)屬性：

　?。?）console.dir

　　console.log是側(cè)重于字符串化的打印，而console.dir能遞歸打印對(duì)象的所有屬性，如下打印一個(gè)dom結(jié)點(diǎn)：

　　console.log把它的html打印出來(lái)了，而console.dir把它的所有屬性打印出來(lái)，方便進(jìn)行檢查。

　?。?）打印帶樣式

　　經(jīng)常會(huì)看到有些網(wǎng)站會(huì)在控制臺(tái)打印一些提示語(yǔ)，并且這些提示語(yǔ)還帶樣式，這個(gè)是用%c加上的樣式：

　　02檢查沒(méi)有用的CSS/JS

　　Chrome 49新增了一個(gè)功能，能夠檢查頁(yè)面上的CSS/JS沒(méi)有用到的比例，如下打開(kāi)devtools的Coverage標(biāo)簽欄，然后點(diǎn)記錄按鈕，刷新頁(yè)面，頁(yè)面加載完之后，點(diǎn)擊停止。就會(huì)顯示頁(yè)面用到和沒(méi)用的CSS/JS占比。沒(méi)有用到的用紅色表示，用到的用綠色表示：

　　可以看到第二個(gè)CSS文件有大部份是沒(méi)用到的，JS也有很大的比例沒(méi)有用到。在上面中間的窗口會(huì)把具體沒(méi)使用到的代碼標(biāo)紅，就能知道具體哪些代碼沒(méi)有被用到?？梢钥吹?，CSS有一半沒(méi)有用到，因?yàn)橛幸恍┦切∑恋捻憫?yīng)式CSS，大屏沒(méi)用到。另一些是common-chunk提出來(lái)的，所以可以考慮把大小屏的CSS分開(kāi)（但是不適合于內(nèi)聯(lián)Style），如下用媒體查詢(xún)?nèi)ゼ虞d不同的CSS：

　　link rel=”stylesheet”href=”large.css”media=”screen and (min-width:500px)”

　　JS也是因?yàn)閞equire了比較大的公有模塊導(dǎo)致的，這些模塊比較大，但是只使用了其中小一部分功能，可考慮把大模塊拆細(xì)，但是?；?xì)可能會(huì)增加復(fù)雜度，所以要權(quán)衡一下。

　　這些功能可以用Chrome Canary嘗鮮版的使用。

　　03截全屏的功能

　　除了Corverage之外，Chrome 49還新增了截全屏的功能：

　　就不用去裝一個(gè)第三方的插件。

　　04debugger

　　可以在代碼里面寫(xiě)一句debugger，一旦運(yùn)行到dubugger就會(huì)自動(dòng)卡在那里進(jìn)入調(diào)試模式，使用這個(gè)有兩個(gè)好處，一個(gè)是不用手動(dòng)去展開(kāi)文件找到對(duì)應(yīng)的位置，因?yàn)楝F(xiàn)在很多人都用第三方的打包，導(dǎo)致跑的代碼和本地的代碼行數(shù)不能保持一致，所以需要去搜索相應(yīng)地代碼，比較麻煩。另外一個(gè)好處是：當(dāng)代碼是一個(gè)很大的循環(huán)的時(shí)候，并且在特定的情況下代碼會(huì)掛，由于要循環(huán)好多次，所以有時(shí)候不可能在循環(huán)里面打個(gè)斷點(diǎn)，然后不斷地跳到下一個(gè)斷點(diǎn)直到出現(xiàn)問(wèn)題。所以這時(shí)候怎么辦呢？可以用條件結(jié)合debugger。如下代碼：

　　var scores = [90,70,58,60, …];var newScores = [88, 55, 60, …];for(var i = 0; iscores.length; i++){ for(var j = 0; jnewScores.length; j++){ if(scores[i] !== newScores[j]){ scores.push(newScores[j]); } }}

　　發(fā)生了死循環(huán)，怎么定位在哪里出了問(wèn)題呢？方法一在循環(huán)里面打個(gè)斷點(diǎn)，一次次執(zhí)行分析，直到發(fā)現(xiàn)問(wèn)題，方法一有時(shí)候挺好用的，可能很快就可以發(fā)現(xiàn)問(wèn)題了。方法二，發(fā)生死循環(huán)了肯定是i不斷得在變大，但是為什么i不會(huì)停止變大，可以加個(gè)條件，當(dāng)達(dá)到那個(gè)條件的時(shí)候進(jìn)入斷點(diǎn)：

　　if(i1000000){debugger}

　　如上面第7行，當(dāng)i大于1000000時(shí)進(jìn)入斷點(diǎn)，這個(gè)時(shí)候檢查一下，發(fā)現(xiàn)scores已經(jīng)變成了一個(gè)很大的array了：

　　所以可以進(jìn)一步發(fā)現(xiàn)問(wèn)題。這樣就解決了大循環(huán)里面打斷點(diǎn)調(diào)試的問(wèn)題。

　　使用debugger還有一個(gè)小技巧——可以解決一個(gè)檢查頁(yè)面元素的問(wèn)題。如下圖所示，當(dāng)hover到那個(gè)綠色的標(biāo)簽時(shí)，會(huì)出來(lái)個(gè)詳情框：

　　現(xiàn)在我要檢查這個(gè)詳情框，但是我一檢查，鼠標(biāo)離開(kāi)了，那個(gè)框也消失了，導(dǎo)致檢查不了了，因?yàn)橛|發(fā)了mouseout事件，那怎么辦呢？假設(shè)這個(gè)框是css的hover控制的，那么可以用控制臺(tái)的偽類(lèi)窗口，在:hover那里打個(gè)勾，就有hover的效果：

　　但是這個(gè)不是用css的hover實(shí)現(xiàn)的，所以沒(méi)辦法用這個(gè)。這里有一個(gè)小技巧，就是用debugger讓頁(yè)面卡住了，mouseout事件的響應(yīng)函數(shù)就不會(huì)執(zhí)行了。如下，先在左邊的控制臺(tái)點(diǎn)一下進(jìn)入編輯模式，然后把鼠標(biāo)挪到左邊的頁(yè)面的標(biāo)簽，讓那個(gè)框出來(lái)，然后再在控制臺(tái)輸入debugger回車(chē)，這個(gè)時(shí)候頁(yè)面就卡住了，接著就可以愉快地進(jìn)行檢查了，如下圖所示：

　　05IOS真機(jī)模擬

　　這個(gè)雖然和Chrome沒(méi)關(guān)系，但是也可以提一下，Mac的XCode可以開(kāi)一個(gè)ios系統(tǒng)，操作如下圖所示，然后可以用Mac的Safari接連這個(gè)ios里面的Safari進(jìn)行檢查：

　　如下例子調(diào)試iPhone的Safari：

　　上面右圖彈了一個(gè)原生的下拉，因?yàn)樗钦娴膇os系統(tǒng)，這個(gè)的好處就在于不用老是連真機(jī)調(diào)試，適合于有Mac但是沒(méi)有iPhone的同學(xué)，缺點(diǎn)是沒(méi)辦法和真機(jī)100%一樣，例如它不彈鍵盤(pán)，它的輸入是用電腦鍵盤(pán)的輸入。不過(guò)它是100%的ios系統(tǒng)，另外需要裝一個(gè)很大的XCode。

　　06用console.trace追蹤函數(shù)調(diào)用

　　現(xiàn)在遇到了一個(gè)問(wèn)題，就是點(diǎn)擊X按鈕的時(shí)候重復(fù)發(fā)了兩個(gè)請(qǐng)求，如下下圖的紅框：

　　當(dāng)上一次請(qǐng)求還沒(méi)完成又要發(fā)一個(gè)新的請(qǐng)求的時(shí)候，代碼里面會(huì)把上一次請(qǐng)求abort掉，所以會(huì)看到上一個(gè)變紅了：

　　但是這樣還是會(huì)有問(wèn)題，所以要看一下究竟是在哪里觸發(fā)了兩次請(qǐng)求。由于請(qǐng)求會(huì)走一個(gè)通用的發(fā)請(qǐng)求的接口，所以可以在那里追蹤一下：

　　ajax: function(curPage){ console.trace(“search.js ajax”); //other code}

　　然后控制臺(tái)就打印了兩次trace：

　　分別點(diǎn)開(kāi)這兩次的代碼，就會(huì)發(fā)現(xiàn)，兩次觸發(fā)分別是：一次是X的click事件調(diào)的搜索，另外一次是map的zoom_changed觸發(fā)的搜索，知道了調(diào)用的地方就好辦了，就可以做進(jìn)一步分析，然后去掉其中一個(gè)。

　　另外一個(gè)看函數(shù)調(diào)用棧的地方是在右邊的窗口：

　　調(diào)用棧最多只打印5個(gè)，有時(shí)候可能會(huì)不太夠。

　　07查看某個(gè)函數(shù)綁的事件

　　控制臺(tái)Elements的下面有個(gè)Event Listeners，點(diǎn)最后面那個(gè)可以看到和它最相關(guān)的事件

　　其次，用好快捷鍵可以事半功倍，常用的快捷鍵：

　　F10 下一步

　　F8 跳到下一個(gè)斷點(diǎn)

　　command/ctrl + ; step into進(jìn)入函數(shù)執(zhí)行

　　shift + command/ctrl + ; step out跳出當(dāng)前函數(shù)

　　一個(gè)實(shí)例——研究一下鼠標(biāo)hover的時(shí)候它的邊界是怎么畫(huà)出來(lái)的：

　　首先定位到mouseover事件，因?yàn)樗囟ㄊ莔ouseover觸發(fā)的：

　　一打開(kāi)發(fā)現(xiàn)代碼是壓縮的：

　　壓縮的代碼可以點(diǎn)左下角的大括號(hào)，進(jìn)行美化：

　　然后再用快捷鍵一步步的step over/step into，如果你不用快捷鍵老是一個(gè)個(gè)去點(diǎn)那個(gè)調(diào)試的按鈕還是挺麻煩的。如果不小心過(guò)了，就重新來(lái)一遍。最后會(huì)找到在這個(gè)函數(shù)里面畫(huà)的邊界：

　　08Open in Sources Pannel

　　在sources pannel面板如果要查看某個(gè)源文件的時(shí)候，需要一步步展開(kāi)文件夾，這樣比較麻煩，而在network面板里面可以用各種篩選，但是在network里面是不能打斷點(diǎn)的，這個(gè)時(shí)候可以用右鍵，然后點(diǎn)擊Open in Sources Pannel的功能：

　　就會(huì)在sources面板打印相應(yīng)的文件，然后可以在sources里面進(jìn)行調(diào)試了。

　　09模擬斷網(wǎng)做一些出錯(cuò)處理

　　devtools還支持模擬網(wǎng)絡(luò)情況，例如可以模擬斷網(wǎng)的情況，突然掛掉了會(huì)怎么樣，然后相應(yīng)的做一些出錯(cuò)處理：

　　如上圖出錯(cuò)的時(shí)候給一個(gè)提示文案，同時(shí)恢復(fù)upload按鈕，就可以讓用戶(hù)再重新上傳。

　　10研究重繪

　　devtools有一個(gè)Renders可以用來(lái)研究重繪，如下圖右下角，把面板里面的勾都打上：

　　然后點(diǎn)擊左邊的頁(yè)面的菜單按鈕研究重排的情況。右上角黑色的框會(huì)顯示當(dāng)前的幀率。左邊變藍(lán)的區(qū)域表示需要進(jìn)行重繪，由于要彈一個(gè)蒙層，所以頁(yè)面可視區(qū)域進(jìn)行重繪了。同時(shí)可以看到當(dāng)前幀率是59，而且整一個(gè)過(guò)程幀率基本保持在55以上，因?yàn)檫@個(gè)是用transform做的動(dòng)畫(huà)，所以幀率比較高。再來(lái)看一個(gè)用postion做的動(dòng)畫(huà)：

　　可以看到幀率跌到了45，并且有相當(dāng)一小段時(shí)間幀率是在50以下，所以用postion做的動(dòng)畫(huà)流暢度沒(méi)有transform的好。

　　11用timeline看執(zhí)行時(shí)間

　　如下圖所示，可以查看很多有用的信息：

　　這個(gè)我在《Effective前端6：避免頁(yè)面卡頓》有詳細(xì)的介紹。

　　12檢查內(nèi)存泄漏

　　基本上只要存在一個(gè)引用就不會(huì)進(jìn)行GC回收，有些DOM節(jié)點(diǎn)沒(méi)有append到DOM，但是存在引用指向它，它就是一個(gè)分離的DOM結(jié)點(diǎn)，這個(gè)時(shí)候發(fā)生了DOM內(nèi)存泄漏，如下面的代碼：

　　var detached = null;button.on(“click”, function(){ detached = document.(“div”);})

　　由于閉包里面有一個(gè)變量指向一個(gè)分離的DOM結(jié)點(diǎn)，所以創(chuàng)建的那個(gè)變量指向的內(nèi)存空間不會(huì)被釋放掉。這個(gè)時(shí)候可以拍一張內(nèi)存堆的快照，Chrome會(huì)幫你把這些分離DOM結(jié)點(diǎn)用黃色標(biāo)出來(lái)。

　　先切到Profile標(biāo)簽，選中Take Heap Snapshot選項(xiàng)，然后點(diǎn)擊Take Snapshot按鈕：

　　然后就會(huì)把當(dāng)前內(nèi)存的使用情況顯示出來(lái)：

　　在搜索框里搜一下detached，出來(lái)的結(jié)果里面紅色的表示已經(jīng)分離且沒(méi)有引用，而黃色表示已經(jīng)分離且有引用，所以重點(diǎn)是看這些黃色的。展開(kāi)其中一個(gè)分析一下，可以看到這個(gè)HTMLDivElement有一個(gè)ImageShower里的$imgContainers指向它，所以導(dǎo)致它的內(nèi)存空間不能被釋放。具體看下代碼可以看到這是DOM已經(jīng)刪了，但是圖片懶惰加載里面沒(méi)有清掉引用。所以解決辦法是當(dāng)刪掉DOM節(jié)點(diǎn)時(shí)，把那個(gè)ImageShower里面的變量置為null，或者把整個(gè)實(shí)例對(duì)象置為null。

　　13查看內(nèi)存消耗

　　為了查看某個(gè)操作的內(nèi)存消耗情況，可以用Record Allocation的功能記錄某個(gè)操作內(nèi)存的分配情況。

　　點(diǎn)了start按鈕之后，進(jìn)行一個(gè)操作，例如彈一個(gè)框，然后點(diǎn)擊停止記錄的圖標(biāo)，就會(huì)出來(lái)使用情況的分析，如下圖所示：

　　點(diǎn)開(kāi)最上面的Object，可以看到這個(gè)Object數(shù)組開(kāi)銷(xiāo)了553K的內(nèi)存（下圖倒數(shù)第二列第一行）：

　　展開(kāi)其中一個(gè)Object，可以看到它是一個(gè)jQuery對(duì)象，每一個(gè)消耗了88Kb：

　　而總的內(nèi)存可以用Chrome的任務(wù)管理器查看：

　　可以看到當(dāng)前頁(yè)面消耗了193Mb的內(nèi)存。所以如果當(dāng)你覺(jué)得頁(yè)面的內(nèi)存比較大的時(shí)候，或者重復(fù)某個(gè)操作之后頁(yè)面的內(nèi)存不斷增大，就可以用這種方法分析一下。

　　14垃圾回收

　　垃圾回收可以在timeline里面查看，如下圖所示：

　　藍(lán)線(xiàn)那里JS Heap驟降，說(shuō)明進(jìn)行了一次垃圾回收，如果發(fā)生得比較頻繁的話(huà)，可能會(huì)有問(wèn)題。

　　15查看連接時(shí)間

　　如下圖所示：DNS解析花了254ms，建立tcp連接花了1.98s，建立https連接花了1.69s，從建立完連接到接收到第一個(gè)字節(jié)的數(shù)據(jù)(TTFB，Time To First Byte)等了4.3s，下載時(shí)間花了306ms（基于某次實(shí)驗(yàn)）。

　　另外圖片的優(yōu)先級(jí)會(huì)低于CSS/JS資源，并且同一個(gè)域最多只能同時(shí)加載6個(gè)資源，所以會(huì)有排隊(duì)和等待時(shí)間，如下圖所示：

　　本文分析了一些devtools的一些比較好用的功能，結(jié)合自己的項(xiàng)目經(jīng)驗(yàn)做了些實(shí)際的例子說(shuō)明，希望對(duì)大家有幫助。

　　原文：www.renfed.com/2017/05/02/effectiv-chrome-devtools/

　　精選文章

↓↓↓