chrome調(diào)試功能詳細(xì)分析

1、Chrome調(diào)試大全2012年3月25日 似水流年 12 瀏覽 發(fā)表評論 閱讀評論作為一名前端開發(fā)者，打交道最多的可能是和瀏覽器。市面上各種瀏覽器多不勝數(shù)，主流的有Chrome，F(xiàn)irefox，Safari，IE，Opera，非主流的如360，遨游，QQ瀏覽器，搜狗瀏覽器，據(jù)說淘寶最近也要出瀏覽器了。不過個(gè)人最喜歡的還是Chrome，因?yàn)樗暮啙嵑涂焖?，還有功能的強(qiáng)大。FF什么的我覺得它已經(jīng)慢得跟不上時(shí)代了:-D，這是個(gè)人意見，喜歡FF的朋友盡管吐槽。雖然IE和Firebug的開發(fā)工具都用過，但始終覺得不如Chrome順手。下面就詳細(xì)介紹一下Chrome的開發(fā)人員

2、工具。Chrome一共有8個(gè)功能子集。如下圖:1、Elements：這個(gè)部分主要是顯示實(shí)時(shí)的DOM樹。在頁面中右鍵單擊審查元素，就會出現(xiàn)Elements的面板。左邊就展示的是DOM樹，在一個(gè)DOM節(jié)點(diǎn)上點(diǎn)擊右鍵就會出現(xiàn)一個(gè)菜單，一共分為4部分，第一部分是添加和編輯節(jié)點(diǎn)的屬性，例如class等。第二部分是編輯節(jié)點(diǎn)，點(diǎn)擊Edit as HTML，就可以像在編輯器中一樣編寫代碼，Copy as HTML就是復(fù)制代碼了，Delete node是整個(gè)刪除節(jié)點(diǎn)。第三部分是添加DOM的斷點(diǎn)。如果我們添勾選了任何一個(gè)，就會在右邊欄的第五部分DOM breakpoints出現(xiàn)，這里對應(yīng)的是JS的對DOM的操作，

3、如果出現(xiàn)對應(yīng)的事件（節(jié)點(diǎn)子樹改變、節(jié)點(diǎn)屬性改變、節(jié)點(diǎn)被移除），那么JS就會在相應(yīng)的事件監(jiān)聽函數(shù)那里掛起，這個(gè)在后面JS設(shè)置斷點(diǎn)再講解關(guān)于斷點(diǎn)的東西。最后一部分是文字換行，貌似用處不大。底部顯示的是一個(gè)當(dāng)前元素的所有祖先元素。例如，上圖中當(dāng)前元素是body，它的祖先元素是html（也是父級元素），如果html有父級元素，仍然會顯示html的父級元素（這里例子有點(diǎn)特殊）。接下來看看右邊欄。一共有6部分，分別是：Computed Style、Styles、Metrics、Properties、DOM Breakpoints、Event Listeners。Computed Style顯示的是所選元素

4、的最終樣式（對應(yīng)JS中的getComputedStyle()方法），如果勾選了Show inherited，將會顯示此元素的所有style屬性，Computed Style中的屬性是只讀的，不能實(shí)時(shí)修改，所以主要用來查看元素的最終屬性值。而第二部分Styles估計(jì)是用得最多的。這里會顯示作用在所選元素的所有css規(guī)則，包含css文件中的樣式規(guī)則，還有user stylesheet和user agent stylesheet的樣式。樣式按照權(quán)重的大小排列，最上面的是權(quán)重最高的，下面是權(quán)重低的。最上面的element.style是元素的內(nèi)嵌樣式。user stylesheet是用戶樣式，不過一般不

5、會有人自定義樣式。user agent stylsheet是瀏覽器的默認(rèn)樣式，通常的css reset就是將這個(gè)reset掉。背景不是灰色的部分是可以修改的樣式，我們對樣式的修改會實(shí)時(shí)顯示在頁面中，這就省去了我們?yōu)榱诵薷膸讉€(gè)像素去修改css文件然后保存刷新的過程，同時(shí)也可以禁用和啟用某些樣式。在Styles的標(biāo)題欄有一個(gè)鼠標(biāo)箭頭的圖標(biāo)，點(diǎn)擊之后就會出現(xiàn)偽類，因?yàn)橐话闱闆r下不會出現(xiàn)偽類的css規(guī)則。第三部分Metrics顯示了元素作為盒模型的各個(gè)參數(shù)。第四部分Properties顯示了元素作為DOM對象的各個(gè)屬性。例如上圖中所示，這里從上到下是一個(gè)繼承的關(guān)系。最上面是一個(gè)HTMLDivEleme

6、nt的實(shí)例，第二個(gè)是HTMLDivElement的類。第三個(gè)，是HTMLElement類，HTMLDivElement類繼承自HTMLDivElement類。接著分別是Element類，Node類，和Object類。如果選擇不同的節(jié)點(diǎn)類型，就會出現(xiàn)不同的繼承關(guān)系。第四部分是DOM Breakpoints，這個(gè)后面再細(xì)講。最后一個(gè)是Event Listeners，這個(gè)顯示了綁定到當(dāng)前元素的事件監(jiān)聽函數(shù)，而且會顯示事件冒泡或捕獲（即能夠響應(yīng)此事件的所有元素）。2、Resources這個(gè)面板會顯示所有加載的資源，如上圖所示。底部的中間有個(gè)鉛筆圖標(biāo)的按鈕，點(diǎn)擊之后就可以實(shí)時(shí)編輯css或者js文件。其他

7、例如Local Storage、Session Storage、Cookies都可以查看。3、NetworkNetwork的功能是非常實(shí)用和強(qiáng)大的，我們能夠用它來查看很多信息。上圖分為8列，從左到右分別是Name、Method、Status、Type、Initiator、Size、Time和Timeline。Name表示加載的文件名，Method表示請求的方法，Status表示狀態(tài)碼（200為請求成功，304表示從緩存讀?。?，Type表示文件的MIME Type的類型。Initiator表示發(fā)出這個(gè)文件請求的發(fā)出者，Size表示文件大小。Time表示每個(gè)請求的總時(shí)長，Timeline以圖表的形

8、式顯示了整個(gè)網(wǎng)頁的請求和加載情況。我們可以看到哪些請求是同時(shí)發(fā)出的，哪些請求被阻塞了。Timeline中有一條藍(lán)線和一條紅線，藍(lán)線表示DOM Content Loaded事件觸發(fā)的時(shí)間，紅線表示 Window onload事件觸發(fā)的時(shí)間。底部的選項(xiàng)卡將請求的文件進(jìn)行了分類，便于查看，如：Document、Stylesheets、Images、Scripts、XHR、Fonts、Websockets和Other。Timeline中鼠標(biāo)移到每個(gè)時(shí)間條上的時(shí)候，會顯示整個(gè)請求的詳細(xì)信息，如下圖所示：DNS Lookup、Connecting、Sending、Waiting、Receiving。如果某

9、個(gè)請求被阻塞了，還會顯示Blocking。單擊右鍵會出現(xiàn)一個(gè)菜單，如下圖：在新的選項(xiàng)卡中打開連接、復(fù)制請求頭和響應(yīng)頭、復(fù)制和保存HAR格式的文件，清除緩存和cookie。當(dāng)點(diǎn)擊一個(gè)具體的文件時(shí)，會出現(xiàn)更為詳細(xì)的請求信息：這里可以看到請求頭信息和響應(yīng)頭信息，這對于Ajax的開發(fā)很有幫助。右邊欄頂部的選項(xiàng)卡還有Preview、Response、Cookies、Timing等信息。4、Scripts接下來重點(diǎn)講一下JS的調(diào)試。如果沒有編程基礎(chǔ)，并且將JS作為第一門編程語言進(jìn)行學(xué)習(xí)的同學(xué)可能對JS的調(diào)試不是特別清楚。一般來說調(diào)試需要設(shè)置斷點(diǎn)，當(dāng)程序運(yùn)行到這里的時(shí)候就會被掛起，我們就能夠查看掛起狀時(shí)的各

10、種狀態(tài)，例如變量值，函數(shù)的調(diào)用棧，或者自定義的表達(dá)式。我們可以看到右邊欄有8個(gè)部分，分別是Watch s、Call Stack、Scope Variables、Breakpoints、DOM Breakpoints、XHR Breakpoints、Event Breakpoints和Workers，前面三個(gè)部分表示的是運(yùn)行時(shí)的狀態(tài)，后面5部分表示所設(shè)置的斷點(diǎn)。Watch s中點(diǎn)擊右邊的加號可以添加表達(dá)式，因?yàn)镴S中只要是表達(dá)式就會有值，所以這里可以是變量，也可以是函數(shù)表達(dá)式，也可以是其他表達(dá)式。如果函數(shù)運(yùn)行到某一行代碼，想要查看這行代碼中的某個(gè)變量值為多少，可以將這個(gè)變量添加到Watch s里

11、面，點(diǎn)擊刷新按鈕，就會出現(xiàn)這個(gè)變量的值，例如下圖中就有變量i的值。下面一個(gè)是函數(shù)的調(diào)用棧。如果在a函數(shù)中調(diào)用了b函數(shù)，那么a函數(shù)的棧頂被推入函數(shù)b，執(zhí)行流進(jìn)入函數(shù)b，如果在函數(shù)b中又調(diào)用了函數(shù)c，那么函數(shù)b的棧頂又被推入c，執(zhí)行流進(jìn)入c，c執(zhí)行完畢之后，函數(shù)c就出棧，執(zhí)行流再次進(jìn)行函數(shù)b，函數(shù)b執(zhí)行完畢之后，b出棧，最后a出棧。這樣調(diào)用的順序關(guān)系，就體現(xiàn)在了調(diào)用棧上。在某個(gè)函數(shù)中設(shè)置了斷點(diǎn)，程序執(zhí)行到這個(gè)斷點(diǎn)的時(shí)候，檢查Call Stack，就可以知道這個(gè)函數(shù)是被哪個(gè)函數(shù)調(diào)用了，而它的調(diào)用者又是被哪個(gè)函數(shù)所調(diào)用。點(diǎn)擊每個(gè)函數(shù)棧，執(zhí)行流還會退回到相應(yīng)的函數(shù)。第三部分是作用域中的變量，包括局部作用

12、域和全局作用域，而且還有當(dāng)前作用域中的閉包。通過Scope Variables，可以查看各個(gè)作用域內(nèi)的變量的值。有時(shí)需要跟蹤某個(gè)變量的變化情況，可以通過這個(gè)來觀察。還有一個(gè)方便的功能就是將鼠標(biāo)移到左邊欄代碼的變量上，會彈出這個(gè)變量的值，而不用到Scope Variables中去找了。IE9和IE10都增加了這樣功能，不過Firebug沒有此功能，并且Firebug也沒有代碼高亮，這給調(diào)試帶來了一定的麻煩，所以很少使用Firebug來調(diào)試js。三個(gè)瀏覽器列出的信息側(cè)重點(diǎn)不同，算是各有所長吧。后面的幾部分都是斷點(diǎn)的設(shè)置，只是方式不太一樣。前面說過斷點(diǎn)的作用就是將函數(shù)掛起，DOM Breakpoin

13、ts的作用就是在DOM被修改時(shí)，在修改的代碼前掛起。XHR Breakpoints就是在出現(xiàn)了XHR請求的時(shí)候掛起，具體就是在xhr.send()這個(gè)方法處掛起。Event Breakpoints就是在觸發(fā)了相應(yīng)的事件時(shí)，在事件函數(shù)處掛起。我們可以選擇不同的需要設(shè)置斷點(diǎn)的事件，如Keyboard、Mouse等事件。例如我們設(shè)置了一個(gè)方法a.onclick = function()，在點(diǎn)擊a的時(shí)候，程序就會在這個(gè)function處掛起。最后是Workers，可以設(shè)置的只有Pause on start，就是在和Workers通信開始的時(shí)候掛起。設(shè)置好了斷點(diǎn)，下圖的這幾個(gè)按鈕就非常有用了，他們出現(xiàn)在

14、右邊欄的頂部。第一個(gè)按鈕（像播放一樣的按鈕）是暫停和開始。當(dāng)設(shè)置了斷點(diǎn)之后，js的執(zhí)行就暫停了，如果我們想要跳過當(dāng)前的斷點(diǎn)繼續(xù)執(zhí)行js，就可以點(diǎn)擊這個(gè)按鈕，點(diǎn)擊之后js的執(zhí)行會繼續(xù)，如果在接下來的執(zhí)行過程中再次遇到斷點(diǎn)，那么就會在那個(gè)斷點(diǎn)處暫停。第二個(gè)按鈕（弧形的按鈕），是跳過按鈕。如果在執(zhí)行的過程中遇到了一個(gè)函數(shù)，點(diǎn)擊這個(gè)按鈕，調(diào)試程序就會跳過這個(gè)函數(shù)的具體執(zhí)行過程，直接到達(dá)函數(shù)執(zhí)行完畢的狀態(tài)，不過如果沒有遇到函數(shù)，調(diào)試也會一步一步地執(zhí)行。向下的箭頭是進(jìn)入按鈕， 如果遇到了一個(gè)函數(shù)，那么就會進(jìn)入這個(gè)函數(shù)，如果沒有遇到函數(shù)，調(diào)試就一步一步執(zhí)行。向上的箭頭是返回按鈕，點(diǎn)擊之后會退出當(dāng)前正在執(zhí)行的

15、函數(shù)，到達(dá)函數(shù)執(zhí)行完畢的在狀態(tài)，如果是在全局作用域中，那么句退出調(diào)試。最后一個(gè)按鈕是激活和反激活所有的斷點(diǎn)，如果當(dāng)前的斷點(diǎn)是激活的，點(diǎn)擊之后所有的斷點(diǎn)將不起作用，再次點(diǎn)擊之后恢復(fù)作用。最后在左下部有三個(gè)按鈕，如下圖：第一個(gè)按鈕有三種狀態(tài)：Dont pause on exceptions，Pause on all exceptions，Pause on uncaught exceptions。第一種狀態(tài)是出現(xiàn)異常時(shí)不暫停，第二種是在出現(xiàn)異常的地方暫停，第三種是在出現(xiàn)了沒有被捕捉的異常處暫停，這里的暫停也就是設(shè)置一個(gè)斷點(diǎn)。第二個(gè)按鈕表示代碼的格式，是否格式化代碼，不格式化將以原本的方式顯示。最后一

16、個(gè)鉛筆圖標(biāo)的按鈕點(diǎn)擊之后就可以修改代碼了。某些邪惡的同學(xué)可能已經(jīng)想到可以用這個(gè)來干一些壞事了。5、TimelineTimeline在分析網(wǎng)頁性能的時(shí)候非常有用。這個(gè)跟Network有類似的地方，他們都是按照頁面的加載時(shí)間來統(tǒng)計(jì)數(shù)據(jù)的，不過Timeline統(tǒng)計(jì)的數(shù)據(jù)側(cè)重點(diǎn)不一樣。Timeline主要統(tǒng)計(jì)了三個(gè)數(shù)據(jù)：Loading，Scripting，Rendering。另外一個(gè)是內(nèi)存隨時(shí)間的變化。藍(lán)色的是加載的時(shí)間，黃色的是代碼執(zhí)行的時(shí)間，紫色的是渲染的時(shí)間。當(dāng)我們點(diǎn)擊底部的那個(gè)黑色的圓形時(shí)，圓形變成紅色，然后就開始記錄頁面中出現(xiàn)的這三種情況所消耗的時(shí)間。當(dāng)點(diǎn)擊記錄按鈕之后刷新頁面，我們就能得到

17、整個(gè)頁面加載，代碼執(zhí)行，還有頁面渲染的時(shí)間細(xì)節(jié)。鼠標(biāo)移到右邊欄的時(shí)間條上，還會出現(xiàn)相應(yīng)的具體信息，也可以點(diǎn)擊三角按鈕查看折疊的信息。頂部的時(shí)間欄可以拉動進(jìn)行縮放，這樣就能關(guān)注具體某段時(shí)間內(nèi)的信息了。6、ProfilesProfile記錄的主要是CPU和內(nèi)存占用的信息。點(diǎn)擊start profiling，開始記錄CPU的使用信息，這時(shí)刷新頁面，等頁面加載完畢之后仍點(diǎn)擊上一次的按鈕，停止記錄。CPU記錄的信息以兩種視圖呈現(xiàn)：Bottom Up和Top View。Bottom Up和Top Down顯示的是一個(gè)全局的調(diào)用棧結(jié)構(gòu)圖，只是顯示的方式略有不同。當(dāng)我們展開一列函數(shù)的時(shí)候，可能看到如下的情形。

18、如果是Bottom Up視圖，從字面的意思來理解是從下往上，在下面的函數(shù)調(diào)用的是上面的函數(shù)，跟函數(shù)的調(diào)用棧類似。同樣的Profile，如果是Top Down視圖，就會是下面的情況，函數(shù)的調(diào)用自上而下的，而且只會顯示在全局作用域中調(diào)用的函數(shù)（不是全局作用域的函數(shù)都是被其他函數(shù)所調(diào)用）。這里可以查看各個(gè)函數(shù)的調(diào)用棧還有它們的執(zhí)行時(shí)間，例如圖中出現(xiàn)了多個(gè)p，那么函數(shù)p就是遞歸調(diào)用。另外幾個(gè)按鈕：Switch between absolute and percentage times、Focus selected function、Exclude selected function，從字面意思也可以了

19、解它的用途了。上圖的左邊兩列是時(shí)間，第一列是self，第二列是total，self表示函數(shù)自己的運(yùn)行時(shí)間，不包含調(diào)用其他函數(shù)的時(shí)間，而total表示這個(gè)函數(shù)運(yùn)行的總時(shí)間。因?yàn)檫@個(gè)性能分析會系統(tǒng)造成一定的影響，所以得到的結(jié)果并不是特別的精確，通常情況我們只比較一個(gè)相對的結(jié)果來得到性能差的函數(shù)就行了。所以可以將時(shí)間轉(zhuǎn)換為百分比的關(guān)系。剩下還有一個(gè)是Heap Snapshots，字面意思是堆快照。通過點(diǎn)擊右下方的眼睛圖標(biāo)按鈕就可以給當(dāng)前的Heap截取一個(gè)快照，旁邊禁止圖標(biāo)的按鈕是清除profiles，因?yàn)榧词雇顺隽碎_發(fā)人員工具，profiles還會繼續(xù)存在，直到關(guān)閉頁面或手動清除。下圖就是一個(gè)快照.

20、總體分為左右兩欄，右邊欄又分為上下兩部分，上面部分分為4列：Constructor、#、Shallow Size、Retained Size。Constructor顯示的是構(gòu)造函數(shù)，也可以說是類，#表示的是相應(yīng)類有多少實(shí)例。Shallow Size表示對象自身所占用的內(nèi)存。而Retained Size表示對象以及它所引用的對象所占用的內(nèi)存，也可以理解為對象被回收能夠釋放的內(nèi)存的總大小。對于GC（garbage collector）來說，如果一個(gè)對象沒有任何引用，那么這個(gè)對象就是可以回收的。如果a對象包含了b對象的引用，如果a對象沒有被回收，那么b對象也不會被回收，如果a被回收，那么b也被回收。

21、這時(shí)a自身的大小稱為Shallow Size，a+b的大小稱為a的Retained Size。注意a被回收，b也被回收，那么a就是b的Dominator。下部分顯示的是Paths from the selected object to GC roots/to window objects，也叫Retaining path。如果選擇了一個(gè)對象，如果它沒有被回收（當(dāng)然，出現(xiàn)在Snapshots中的都是沒有被回收的對象），那么它對于GC來說是可讀的，GC可以通過某一條路徑來達(dá)到這個(gè)對象，而下面一部分就是顯示的這個(gè)路徑。選擇對象之后，GC roots就開始尋找roots到這個(gè)對象的短路徑。這個(gè)有點(diǎn)復(fù)雜

22、，需要對圖數(shù)據(jù)結(jié)構(gòu)有一定了解。Heap Snapshots可以用四種方式來查看：Summary、Comparison、Containment、Dominators。Summary是默認(rèn)的顯示方式，會顯示Constructor和實(shí)例。Comparison是對比的方式來顯示，可以看到每個(gè)實(shí)例后面都有一個(gè)xxx的東西，以開始的一串?dāng)?shù)字就是每個(gè)實(shí)例特定的id，這個(gè)id是獨(dú)一無二的。如果我們截取了兩個(gè)快照，以Comparison的方式顯示，就會出現(xiàn)兩個(gè)快照不同的地方，例如這樣的場景：用戶點(diǎn)擊一個(gè)按鈕之后利用XHR對象加載了一條信息。加載之前截取一個(gè)快照，加載之后再截取一個(gè)快照。對比兩個(gè)快照，如果出現(xiàn)了X

23、HR對象，那么說明此對象沒有被回收，如果每次加載都創(chuàng)建一個(gè)XHR對象，而且此對象不會被回收，那么理論上就可以能引起內(nèi)存泄露。Containment視圖顯示了頁面中對象結(jié)構(gòu)的概覽。一共會有四種對象:DOMWindow、GC roots、Native Objects。如果頁面中有框架(frame)，那么可能會出現(xiàn)過個(gè)DOMWindow對象。Native Object，原生對象，是指那些被嵌入Javascript的對象,例如DOM和CSS Rules。Dominators視圖顯示的是Dominators tree，這個(gè)在前面有提過，就不說了。7、Audits這個(gè)是對頁面的一個(gè)優(yōu)化建議，跟YSlow比

24、價(jià)相似，就不細(xì)說了。8、ConsoleChrome的Console也是比較強(qiáng)大的。它同時(shí)實(shí)現(xiàn)了Firebug的Command Line API，這個(gè)可以去看看Command Line API的文檔，我就不贅述了。而且會出現(xiàn)智能提示，這個(gè)是非常強(qiáng)大的，IE和Firebug的Console都弱爆了。我們在Console中可以直接寫JS運(yùn)行，不用為了幾句簡單的js就動用html文件。另外Console還支持一些方法，如下:· console.log(object, object, .)，使用頻率最高的一條語句：向控制臺輸出一條消息。支持 C 語言 printf 式的格式化輸出。· (object, object, .) ，向控制臺輸出一條信息，該信息包含一個(gè)表示“信息”的