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

Chrome一共有8個功能子集。如下圖:

1、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，這個顯示了綁定到當前元素的事件監聽函數，而且會顯示事件冒泡或捕獲（即能夠響應此事件的所有元素）。

2、Resources

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

3、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等信息。

4、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。第一種狀態是出現異常時不暫停，第二種是在出現異常的地方暫停，第三種是在出現了沒有被捕捉的異常處暫停，這里的暫停也就是設置一個斷點。
第二個按鈕表示代碼的格式，是否格式化代碼，不格式化將以原本的方式顯示。最后一個鉛筆圖標的按鈕點擊之后就可以修改代碼了。某些邪惡的同學可能已經想到可以用這個來干一些壞事了。

5、Timeline

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

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

6、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，這個在前面有提過，就不說了。

7、Audits

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

8、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，我相信你會喜歡上它的。

原文地址：http://www.360doc.com/content/12/1107/20/7851074_246467307.shtml

轉載于:https://www.cnblogs.com/davidwang456/p/4030224.html

總結

以上是生活随笔為你收集整理的Chrome调试大全--转载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。