Chrome開發者工具詳解

做爲一名前端開發者，打交道最多的多是和瀏覽器。市面上各類瀏覽器多不勝數，主流的有Chrome，Firefox，Safari，IE，Opera，非主流的如360，遨遊，QQ瀏覽器，搜狗瀏覽器，聽說淘寶最近也要出瀏覽器了。不過我的最喜歡的仍是Chrome，由於它的簡潔和快速，還有功能的強大。FF什麼的我以爲它已經慢得跟不上時代了:-D，這是我的意見，喜歡FF的朋友儘管吐槽。雖然IE和Firebug的開發工具都用過，但始終以爲不如Chrome順手。下面就詳細介紹一下Chrome的開發人員工具。

Chrome一共有8個功能子集。以下圖：

 

一、Elements：

 

這個部分主要是顯示實時的DOM樹。在頁面中右鍵單擊「 審查元素 」，就會出現Elements的面板。

左邊就展現的是DOM樹，在一個DOM節點上點擊右鍵就會出現一個菜單，一共分爲4部分，第一部分是添加和編輯節點的屬性，例如class等。第二部分是編輯節點，點擊Edit as HTML，就能夠像在編輯器中同樣編寫代碼，Copy as HTML就是複製代碼了，Delete node是整個刪除節點。第三部分是添加DOM的斷點。若是咱們添勾選了任何一個，就會在右邊欄的第五部分DOM breakpoints出現，這裏對應的是JS的對DOM的操做，若是出現對應的事件（節點子樹改變、節點屬性改變、節點被移除），那麼JS就會在相應的事件監聽函數那裏掛起，這個在後面JS設置斷點再講解關於斷點的東西。最後一部分是文字換行，貌似用處不大。

底部顯示的是一個當前元素的全部祖先元素。例如，上圖中當前元素是body，它的祖先元素是html（也是父級元素），若是html有父級元素，仍然會顯示html的父級元素（這裏例子有點特殊）。

接下來看看右邊欄。一共有6部分，分別是：Computed Style、Styles、Metrics、Properties、DOM Breakpoints、Event Listeners。Computed Style顯示的是所選元素的最終樣式（對應JS中的getComputedStyle()方法），若是勾選了Show inherited，將會顯示此元素的全部style屬性，Computed Style中的屬性是隻讀的，不能實時修改，因此主要用來查看元素的最終屬性值。

而第二部分Styles估計是用得最多的。這裏會顯示做用在所選元素的全部css規則，包含css文件中的樣式規則，還有user stylesheet和user agent stylesheet的樣式。樣式按照權重的大小排列，最上面的是權重最高的，下面是權重低的。最上面的element.style是元素的內嵌樣式。user stylesheet是用戶樣式，不過通常不會有人自定義樣式。user agent stylsheet是瀏覽器的默認樣式，一般的css reset就是將這個reset掉。背景不是灰色的部分是能夠修改的樣式，咱們對樣式的修改會實時顯示在頁面中，這就省去了咱們爲了修改幾個像素去修改css文件而後保存刷新的過程，同時也能夠禁用和啓用某些樣式。在Styles的標題欄有一個鼠標箭頭的圖標，點擊以後就會出現僞類，由於通常狀況下不會出現僞類的css規則。

第三部分Metrics顯示了元素做爲盒模型的各個參數。第四部分Properties顯示了元素做爲DOM對象的各個屬性。例如上圖中所示，這裏從上到下是一個繼承的關係。最上面是一個HTMLDivElement的實例，第二個是HTMLDivElement的類。第三個，是HTMLElement類，HTMLDivElement類繼承自HTMLDivElement類。接着分別是Element類，Node類，和Object類。若是選擇不一樣的節點類型，就會出現不一樣的繼承關係。第四部分是DOM Breakpoints，這個後面再細講。最後一個是Event Listeners，這個顯示了綁定到當前元素的事件監聽函數，並且會顯示事件冒泡或捕獲（即可以響應此事件的全部元素）。

 

二、Resources

 

這個面板會顯示全部加載的資源，如上圖所示。底部的中間有個鉛筆圖標的按鈕，點擊以後就能夠實時編輯css或者js文件。其餘例如Local Storage、Session Storage、Cookies均可以查看。

 

三、Network

 

Network的功能是很是實用和強大的，咱們可以用它來查看不少信息。

上圖分爲8列，從左到右分別是Name、Method、Status、Type、Initiator、Size、Time和Timeline。Name表示加載的文件名，Method表示請求的方法，Status表示狀態碼（200爲請求成功，304表示從緩存讀取），Type表示文件的MIME Type的類型。Initiator表示發出這個文件請求的發出者，Size表示文件大小。Time表示每一個請求的總時長，Timeline以圖表的形式顯示了整個網頁的請求和加載狀況。咱們能夠看到哪些請求是同時發出的，哪些請求被阻塞了。Timeline中有一條藍線和一條紅線，藍線表示DOM Content Loaded事件觸發的時間，紅線表示 Window onload事件觸發的時間。底部的選項卡將請求的文件進行了分類，便於查看，如：Document、Stylesheets、Images、Scripts、XHR、Fonts、Websockets和Other。

Timeline中鼠標移到每一個時間條上的時候，會顯示整個請求的詳細信息，以下圖所示：DNS Lookup、Connecting、Sending、Waiting、Receiving。

若是某個請求被阻塞了，還會顯示Blocking。單擊右鍵會出現一個菜單，以下圖：在新的選項卡中打開鏈接、複製請求頭和響應頭、複製和保存HAR格式的文件，清除緩存和cookie。

當點擊一個具體的文件時，會出現更爲詳細的請求信息：

這裏能夠看到請求頭信息和響應頭信息，這對於Ajax的開發頗有幫助。右邊欄頂部的選項卡還有Preview、Response、Cookies、Timing等信息。

 

四、Scripts

 

接下來重點講一下JS的調試。若是沒有編程基礎，而且將JS做爲第一門編程語言進行學習的同窗可能對JS的調試不是特別清楚。通常來講調試須要設置斷點，當程序運行到這裏的時候就會被掛起，咱們就可以查看掛起狀時的各類狀態，例如變量值，函數的調用棧，或者自定義的表達式。咱們能夠看到右邊欄有8個部分，分別是Watch s、Call Stack、Scope Variables、Breakpoints、DOM Breakpoints、XHR Breakpoints、Event Breakpoints和Workers，前面三個部分表示的是運行時的狀態，後面5部分表示所設置的斷點。

Watch s中點擊右邊的加號能夠添加表達式，由於JS中只要是表達式就會有值，因此這裏能夠是變量，也能夠是函數表達式，也能夠是其餘表達式。若是函數運行到某一行代碼，想要查看這行代碼中的某個變量值爲多少，能夠將這個變量添加到Watch s裏面，點擊刷新按鈕，就會出現這個變量的值，例以下圖中就有變量i的值。

下面一個是函數的調用棧。若是在a函數中調用了b函數，那麼a函數的棧頂被推入函數b，執行流進入函數b，若是在函數b中又調用了函數c，那麼函數b的棧頂又被推入c，執行流進入c，c執行完畢以後，函數c就出棧，執行流再次進行函數b，函數b執行完畢以後，b出棧，最後a出棧。這樣調用的順序關係，就體如今了調用棧上。在某個函數中設置了斷點，程序執行到這個斷點的時候，檢查Call Stack，就能夠知道這個函數是被哪一個函數調用了，而它的調用者又是被哪一個函數所調用。點擊每一個函數棧，執行流還會退回到相應的函數。

第三部分是做用域中的變量，包括局部做用域和全局做用域，並且還有當前做用域中的閉包。經過Scope Variables，能夠查看各個做用域內的變量的值。有時須要跟蹤某個變量的變化狀況，能夠經過這個來觀察。還有一個方便的功能就是將鼠標移到左邊欄代碼的變量上，會彈出這個變量的值，而不用到Scope Variables中去找了。IE9和IE10都增長了這樣功能，不過Firebug沒有此功能，而且Firebug也沒有代碼高亮，這給調試帶來了必定的麻煩，因此不多使用Firebug來調試js。三個瀏覽器列出的信息側重點不一樣，算是各有所長吧。

後面的幾部分都是斷點的設置，只是方式不太同樣。前面說過斷點的做用就是將函數掛起，DOM Breakpoints的做用就是在DOM被修改時，在修改的代碼前掛起。XHR Breakpoints就是在出現了XHR請求的時候掛起，具體就是在xhr.send()這個方法處掛起。Event Breakpoints就是在觸發了相應的事件時，在事件函數處掛起。咱們能夠選擇不一樣的須要設置斷點的事件，如Keyboard、Mouse等事件。例如咱們設置了一個方法a.onclick = function(){…}，在點擊a的時候，程序就會在這個function處掛起。最後是Workers，能夠設置的只有Pause on start，就是在和Workers通訊開始的時候掛起。

設置好了斷點，下圖的這幾個按鈕就很是有用了，他們出如今右邊欄的頂部。第一個按鈕（像播放同樣的按鈕）是暫停和開始。當設置了斷點以後，js的執行就暫停了，若是咱們想要跳過當前的斷點繼續執行js，就能夠點擊這個按鈕，點擊以後js的執行會繼續，若是在接下來的執行過程當中再次遇到斷點，那麼就會在那個斷點處暫停。第二個按鈕（弧形的按鈕），是跳過按鈕。若是在執行的過程當中遇到了一個函數，點擊這個按鈕，調試程序就會跳過這個函數的具體執行過程，直接到達函數執行完畢的狀態，不過若是沒有遇到函數，調試也會一步一步地執行。向下的箭頭是進入按鈕， 若是遇到了一個函數，那麼就會進入這個函數，若是沒有遇到函數，調試就一步一步執行。向上的箭頭是返回按鈕，點擊以後會退出當前正在執行的函數，到達函數執行完畢的在狀態，若是是在全局做用域中，那麼句退出調試。最後一個按鈕是激活和反激活全部的斷點，若是當前的斷點是激活的，點擊以後全部的斷點將不起做用，再次點擊以後恢復做用。

最後在左下部有三個按鈕，以下圖：

第一個按鈕有三種狀態：Don’t pause on exceptions，Pause on all exceptions，Pause on uncaught exceptions。第一種狀態是出現異常時不暫停，第二種是在出現異常的地方暫停，第三種是在出現了沒有被捕捉的異常處暫停，這裏的暫停也就是設置一個斷點。 
第二個按鈕表示代碼的格式，是否格式化代碼，不格式化將以本來的方式顯示。最後一個鉛筆圖標的按鈕點擊以後就能夠修改代碼了。某些邪惡的同窗可能已經想到能夠用這個來幹一些壞事了。

 

五、Timeline

 

Timeline在分析網頁性能的時候很是有用。這個跟Network有相似的地方，他們都是按照頁面的加載時間來統計數據的，不過Timeline統計的數據側重點不同。Timeline主要統計了三個數據：Loading，Scripting，Rendering。另一個是內存隨時間的變化。

藍色的是加載的時間，黃色的是代碼執行的時間，紫色的是渲染的時間。當咱們點擊底部的那個黑色的圓形時，圓形變成紅色，而後就開始記錄頁面中出現的這三種狀況所消耗的時間。當點擊記錄按鈕以後刷新頁面，咱們就能獲得整個頁面加載，代碼執行，還有頁面渲染的時間細節。鼠標移到右邊欄的時間條上，還會出現相應的具體信息，也能夠點擊三角按鈕查看摺疊的信息。頂部的時間欄能夠拉動進行縮放，這樣就能關注具體某段時間內的信息了。

 

六、Profiles

 

Profile記錄的主要是CPU和內存佔用的信息。

點擊start profiling，開始記錄CPU的使用信息，這時刷新頁面，等頁面加載完畢以後仍點擊上一次的按鈕，中止記錄。CPU記錄的信息以兩種視圖呈現：Bottom Up和Top View。

 

Bottom Up和Top Down顯示的是一個全局的調用棧結構圖，只是顯示的方式略有不一樣。當咱們展開一列函數的時候，可能看到以下的情形。若是是Bottom Up視圖，從字面的意思來理解是從下往上，在下面的函數調用的是上面的函數，跟函數的調用棧相似。

 

一樣的Profile，若是是Top Down視圖，就會是下面的狀況，函數的調用自上而下的，並且只會顯示在全局做用域中調用的函數（不是全局做用域的函數都是被其餘函數所調用）。這裏能夠查看各個函數的調用棧還有它們的執行時間，例如圖中出現了多個p，那麼函數p就是遞歸調用。

另外幾個按鈕：Switch between absolute and percentage times、Focus selected function、Exclude selected function，從字面意思也能夠了解它的用途了。

上圖的左邊兩列是時間，第一列是self，第二列是total，self表示函數本身的運行時間，不包含調用其餘函數的時間，而total表示這個函數運行的總時間。由於這個性能分析會系統形成必定的影響，因此獲得的結果並非特別的精確，一般狀況咱們只比較一個相對的結果來獲得性能差的函數就好了。因此能夠將時間轉換爲百分比的關係。

剩下還有一個是Heap Snapshots，字面意思是堆快照。經過點擊右下方的眼睛圖標按鈕就能夠給當前的Heap截取一個快照，旁邊禁止圖標的按鈕是清除profiles，由於即便退出了開發人員工具，profiles還會繼續存在，直到關閉頁面或手動清除。下圖就是一個快照。

整體分爲左右兩欄，右邊欄又分爲上下兩部分，上面部分分爲4列：Constructor、#、Shallow Size、Retained Size。Constructor顯示的是構造函數，也能夠說是類，#表示的是相應類有多少實例。Shallow Size表示對象自身所佔用的內存。而Retained Size表示對象以及它所引用的對象所佔用的內存，也能夠理解爲對象被回收可以釋放的內存的總大小。對於GC（garbage collector）來講，若是一個對象沒有任何引用，那麼這個對象就是能夠回收的。若是a對象包含了b對象的引用，若是a對象沒有被回收，那麼b對象也不會被回收，若是a被回收，那麼b也被回收。這時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。若是選擇了一個對象，若是它沒有被回收（固然，出如今Snapshots中的都是沒有被回收的對象），那麼它對於GC來講是可讀的，GC能夠經過某一條路徑來達到這個對象，而下面一部分就是顯示的這個路徑。選擇對象以後，GC roots就開始尋找roots到這個對象的短路徑。這個有點複雜，須要對圖數據結構有必定了解。

Heap Snapshots能夠用四種方式來查看：Summary、Comparison、Containment、Dominators。Summary是默認的顯示方式，會顯示Constructor和實例。Comparison是對比的方式來顯示，能夠看到每一個實例後面都有一個@xxx的東西，以@開始的一串數字就是每一個實例特定的id，這個id是獨一無二的。若是咱們截取了兩個快照，以Comparison的方式顯示，就會出現兩個快照不一樣的地方，例如這樣的場景：用戶點擊一個按鈕以後利用XHR對象加載了一條信息。加載以前截取一個快照，加載以後再截取一個快照。對比兩個快照，若是出現了XHR對象，那麼說明此對象沒有被回收，若是每次加載都建立一個XHR對象，並且此對象不會被回收，那麼理論上就能夠能引發內存泄露。

Containment視圖顯示了頁面中對象結構的概覽。一共會有四種對象:DOMWindow、GC roots、Native Objects。若是頁面中有框架(frame)，那麼可能會出現過個DOMWindow對象。Native Object，原生對象，是指那些被嵌入Javascript的對象,例如DOM和CSS Rules。Dominators視圖顯示的是Dominators tree，這個在前面有提過，就不說了。

 

七、Audits

 

這個是對頁面的一個優化建議，跟YSlow比價類似，就不細說了。

 

八、Console

 

Chrome的Console也是比較強大的。它同時實現了Firebug的Command Line API，這個能夠去看看Command Line API的文檔，我就不贅述了。並且會出現智能提示，這個是很是強大的，IE和Firebug的Console都弱爆了。咱們在Console中能夠直接寫JS運行，不用爲了幾句簡單的js就動用html文件。

另外Console還支持一些方法，以下:

• console.log(object[, object, ...])，使用頻率最高的一條語句：向控制檯輸出一條消息。支持 C 語言 printf 式的格式化輸出。
• console.info(object[, object, ...]) ，向控制檯輸出一條信息，該信息包含一個表示「信息」的圖標，和指向該行代碼位置的超連接。
• console.error(object[, object, ...])在控制檯中輸出一條錯誤信息。
• console.warn(object[, object, ...])在控制檯中輸出一條警告信息。
• console.assert([, object, ...]) ，斷言，測試一條表達式是否爲真，不爲真時將拋出異常（斷言失敗）。
• console.dir(object) 輸出一個對象的所有屬性（輸出結果相似於 DOM 面板中的樣式）。
• console.dirxml(node) 輸出一個 HTML 或者 XML 元素的結構樹，點擊結構樹上面的節點進入到 HTML 面板。
• console.trace() 輸出 Javascript 執行時的堆棧追蹤。
• console.group(object[, object, ...]) 輸出消息的同時打開一個嵌套塊，用以縮進輸出的內容。調用 console.groupEnd() 用以結束這個塊的輸出。
• console.time(name) 計時器，當調用 console.timeEnd(name);並傳遞相同的 name 爲參數時，計時中止，並輸出執行兩條語句之間代碼所消耗的時間（毫秒）。
• console.profile([title]) 與 profileEnd() 結合使用，用來作性能測試，與 console 面板上 profile 按鈕的功能徹底相同。
• console.count([title]) 輸出該行代碼被執行的次數，參數 title 將在輸出時做爲輸出結果的前綴使用。
• console.clear() 清空控制檯。

關於Chrome的調試基本就這些了，若是使用了Chrome，我相信你會喜歡上它的。