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

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

1、Elements：

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

左邊就展示的是DOM樹，在一個DOM節(jié)點上點擊右鍵就會出現(xiàn)一個菜單，一共分為4部分，第一部分是添加和編輯節(jié)點的屬性，例如class等。第二部分是編輯節(jié)點，點擊Edit as HTML，就可以像在編輯器中一樣編寫代碼，Copy as HTML就是復(fù)制代碼了，Delete node是整個刪除節(jié)點。第三部分是添加DOM的斷點。如果我們添勾選了任何一個，就會在右邊欄的第五部分DOM breakpoints出現(xiàn)，這里對應(yīng)的是JS的對DOM的操作，如果出現(xiàn)對應(yīng)的事件（節(jié)點子樹改變、節(jié)點屬性改變、節(jié)點被移除），那么JS就會在相應(yīng)的事件監(jiān)聽函數(shù)那里掛起，這個在后面JS設(shè)置斷點再講解關(guān)于斷點的東西。最后一部分是文字換行，貌似用處不大。

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

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

而第二部分Styles估計是用得最多的。這里會顯示作用在所選元素的所有css規(guī)則，包含css文件中的樣式規(guī)則，還有user stylesheet和user agent stylesheet的樣式。樣式按照權(quán)重的大小排列，最上面的是權(quán)重最高的，下面是權(quán)重低的。最上面的element.style是元素的內(nèi)嵌樣式。user stylesheet是用戶樣式，不過一般不會有人自定義樣式。user agent stylsheet是瀏覽器的默認樣式，通常的css reset就是將這個reset掉。背景不是灰色的部分是可以修改的樣式，我們對樣式的修改會實時顯示在頁面中，這就省去了我們?yōu)榱诵薷膸讉€像素去修改css文件然后保存刷新的過程，同時也可以禁用和啟用某些樣式。在Styles的標題欄有一個鼠標箭頭的圖標，點擊之后就會出現(xiàn)偽類，因為一般情況下不會出現(xiàn)偽類的css規(guī)則。

第三部分Metrics顯示了元素作為盒模型的各個參數(shù)。第四部分Properties顯示了元素作為DOM對象的各個屬性。例如上圖中所示，這里從上到下是一個繼承的關(guān)系。最上面是一個HTMLDivElement的實例，第二個是HTMLDivElement的類。第三個，是HTMLElement類，HTMLDivElement類繼承自HTMLDivElement類。接著分別是Element類，Node類，和Object類。如果選擇不同的節(jié)點類型，就會出現(xiàn)不同的繼承關(guān)系。第四部分是DOM Breakpoints，這個后面再細講。最后一個是Event Listeners，這個顯示了綁定到當前元素的事件監(jiān)聽函數(shù)，而且會顯示事件冒泡或捕獲（即能夠響應(yīng)此事件的所有元素）。

2、Resources

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

3、Network

Network的功能是非常實用和強大的，我們能夠用它來查看很多信息。

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

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

如果某個請求被阻塞了，還會顯示Blocking。單擊右鍵會出現(xiàn)一個菜單，如下圖：在新的選項卡中打開連接、復(fù)制請求頭和響應(yīng)頭、復(fù)制和保存HAR格式的文件，清除緩存和cookie。

當點擊一個具體的文件時，會出現(xiàn)更為詳細的請求信息：

這里可以看到請求頭信息和響應(yīng)頭信息，這對于Ajax的開發(fā)很有幫助。右邊欄頂部的選項卡還有Preview、Response、Cookies、Timing等信息。

4、Scripts

接下來重點講一下JS的調(diào)試。如果沒有編程基礎(chǔ)，并且將JS作為第一門編程語言進行學(xué)習(xí)的同學(xué)可能對JS的調(diào)試不是特別清楚。一般來說調(diào)試需要設(shè)置斷點，當程序運行到這里的時候就會被掛起，我們就能夠查看掛起狀時的各種狀態(tài)，例如變量值，函數(shù)的調(diào)用棧，或者自定義的表達式。我們可以看到右邊欄有8個部分，分別是Watch s、Call Stack、Scope Variables、Breakpoints、DOM Breakpoints、XHR Breakpoints、Event Breakpoints和Workers，前面三個部分表示的是運行時的狀態(tài)，后面5部分表示所設(shè)置的斷點。

Watch s中點擊右邊的加號可以添加表達式，因為JS中只要是表達式就會有值，所以這里可以是變量，也可以是函數(shù)表達式，也可以是其他表達式。如果函數(shù)運行到某一行代碼，想要查看這行代碼中的某個變量值為多少，可以將這個變量添加到Watch s里面，點擊刷新按鈕，就會出現(xiàn)這個變量的值，例如下圖中就有變量i的值。

下面一個是函數(shù)的調(diào)用棧。如果在a函數(shù)中調(diào)用了b函數(shù)，那么a函數(shù)的棧頂被推入函數(shù)b，執(zhí)行流進入函數(shù)b，如果在函數(shù)b中又調(diào)用了函數(shù)c，那么函數(shù)b的棧頂又被推入c，執(zhí)行流進入c，c執(zhí)行完畢之后，函數(shù)c就出棧，執(zhí)行流再次進行函數(shù)b，函數(shù)b執(zhí)行完畢之后，b出棧，最后a出棧。這樣調(diào)用的順序關(guān)系，就體現(xiàn)在了調(diào)用棧上。在某個函數(shù)中設(shè)置了斷點，程序執(zhí)行到這個斷點的時候，檢查Call Stack，就可以知道這個函數(shù)是被哪個函數(shù)調(diào)用了，而它的調(diào)用者又是被哪個函數(shù)所調(diào)用。點擊每個函數(shù)棧，執(zhí)行流還會退回到相應(yīng)的函數(shù)。

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

后面的幾部分都是斷點的設(shè)置，只是方式不太一樣。前面說過斷點的作用就是將函數(shù)掛起，DOM Breakpoints的作用就是在DOM被修改時，在修改的代碼前掛起。XHR Breakpoints就是在出現(xiàn)了XHR請求的時候掛起，具體就是在xhr.send()這個方法處掛起。Event Breakpoints就是在觸發(fā)了相應(yīng)的事件時，在事件函數(shù)處掛起。我們可以選擇不同的需要設(shè)置斷點的事件，如Keyboard、Mouse等事件。例如我們設(shè)置了一個方法a.onclick = function(){…}，在點擊a的時候，程序就會在這個function處掛起。最后是Workers，可以設(shè)置的只有Pause on start，就是在和Workers通信開始的時候掛起。

設(shè)置好了斷點，下圖的這幾個按鈕就非常有用了，他們出現(xiàn)在右邊欄的頂部。第一個按鈕（像播放一樣的按鈕）是暫停和開始。當設(shè)置了斷點之后，js的執(zhí)行就暫停了，如果我們想要跳過當前的斷點繼續(xù)執(zhí)行js，就可以點擊這個按鈕，點擊之后js的執(zhí)行會繼續(xù)，如果在接下來的執(zhí)行過程中再次遇到斷點，那么就會在那個斷點處暫停。第二個按鈕（弧形的按鈕），是跳過按鈕。如果在執(zhí)行的過程中遇到了一個函數(shù)，點擊這個按鈕，調(diào)試程序就會跳過這個函數(shù)的具體執(zhí)行過程，直接到達函數(shù)執(zhí)行完畢的狀態(tài)，不過如果沒有遇到函數(shù)，調(diào)試也會一步一步地執(zhí)行。向下的箭頭是進入按鈕， 如果遇到了一個函數(shù)，那么就會進入這個函數(shù)，如果沒有遇到函數(shù)，調(diào)試就一步一步執(zhí)行。向上的箭頭是返回按鈕，點擊之后會退出當前正在執(zhí)行的函數(shù)，到達函數(shù)執(zhí)行完畢的在狀態(tài)，如果是在全局作用域中，那么句退出調(diào)試。最后一個按鈕是激活和反激活所有的斷點，如果當前的斷點是激活的，點擊之后所有的斷點將不起作用，再次點擊之后恢復(fù)作用。

最后在左下部有三個按鈕，如下圖：

第一個按鈕有三種狀態(tài)：Don’t pause on exceptions，Pause on all exceptions，Pause on uncaught exceptions。第一種狀態(tài)是出現(xiàn)異常時不暫停，第二種是在出現(xiàn)異常的地方暫停，第三種是在出現(xiàn)了沒有被捕捉的異常處暫停，這里的暫停也就是設(shè)置一個斷點。
第二個按鈕表示代碼的格式，是否格式化代碼，不格式化將以原本的方式顯示。最后一個鉛筆圖標的按鈕點擊之后就可以修改代碼了。某些邪惡的同學(xué)可能已經(jīng)想到可以用這個來干一些壞事了。

5、Timeline

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

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

6、Profiles

Profile記錄的主要是CPU和內(nèi)存占用的信息。

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

Bottom Up和Top Down顯示的是一個全局的調(diào)用棧結(jié)構(gòu)圖，只是顯示的方式略有不同。當我們展開一列函數(shù)的時候，可能看到如下的情形。如果是Bottom Up視圖，從字面的意思來理解是從下往上，在下面的函數(shù)調(diào)用的是上面的函數(shù)，跟函數(shù)的調(diào)用棧類似。

同樣的Profile，如果是Top Down視圖，就會是下面的情況，函數(shù)的調(diào)用自上而下的，而且只會顯示在全局作用域中調(diào)用的函數(shù)（不是全局作用域的函數(shù)都是被其他函數(shù)所調(diào)用）。這里可以查看各個函數(shù)的調(diào)用棧還有它們的執(zhí)行時間，例如圖中出現(xiàn)了多個p，那么函數(shù)p就是遞歸調(diào)用。

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

上圖的左邊兩列是時間，第一列是self，第二列是total，self表示函數(shù)自己的運行時間，不包含調(diào)用其他函數(shù)的時間，而total表示這個函數(shù)運行的總時間。因為這個性能分析會系統(tǒng)造成一定的影響，所以得到的結(jié)果并不是特別的精確，通常情況我們只比較一個相對的結(jié)果來得到性能差的函數(shù)就行了。所以可以將時間轉(zhuǎn)換為百分比的關(guān)系。

剩下還有一個是Heap Snapshots，字面意思是堆快照。通過點擊右下方的眼睛圖標按鈕就可以給當前的Heap截取一個快照，旁邊禁止圖標的按鈕是清除profiles，因為即使退出了開發(fā)人員工具，profiles還會繼續(xù)存在，直到關(guān)閉頁面或手動清除。下圖就是一個快照.

總體分為左右兩欄，右邊欄又分為上下兩部分，上面部分分為4列：Constructor、#、Shallow Size、Retained Size。Constructor顯示的是構(gòu)造函數(shù)，也可以說是類，#表示的是相應(yīng)類有多少實例。Shallow Size表示對象自身所占用的內(nèi)存。而Retained Size表示對象以及它所引用的對象所占用的內(nèi)存，也可以理解為對象被回收能夠釋放的內(nèi)存的總大小。對于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。如果選擇了一個對象，如果它沒有被回收（當然，出現(xiàn)在Snapshots中的都是沒有被回收的對象），那么它對于GC來說是可讀的，GC可以通過某一條路徑來達到這個對象，而下面一部分就是顯示的這個路徑。選擇對象之后，GC roots就開始尋找roots到這個對象的短路徑。這個有點復(fù)雜，需要對圖數(shù)據(jù)結(jié)構(gòu)有一定了解。

Heap Snapshots可以用四種方式來查看：Summary、Comparison、Containment、Dominators。Summary是默認的顯示方式，會顯示Constructor和實例。Comparison是對比的方式來顯示，可以看到每個實例后面都有一個@xxx的東西，以@開始的一串數(shù)字就是每個實例特定的id，這個id是獨一無二的。如果我們截取了兩個快照，以Comparison的方式顯示，就會出現(xiàn)兩個快照不同的地方，例如這樣的場景：用戶點擊一個按鈕之后利用XHR對象加載了一條信息。加載之前截取一個快照，加載之后再截取一個快照。對比兩個快照，如果出現(xiàn)了XHR對象，那么說明此對象沒有被回收，如果每次加載都創(chuàng)建一個XHR對象，而且此對象不會被回收，那么理論上就可以能引起內(nèi)存泄露。

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

7、Audits

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

8、Console

Chrome的Console也是比較強大的。它同時實現(xiàn)了Firebug的Command Line API，這個可以去看看Command Line API的文檔，我就不贅述了。而且會出現(xiàn)智能提示，這個是非常強大的，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) 輸出一個對象的全部屬性（輸出結(jié)果類似于 DOM 面板中的樣式）。
• console.dirxml(node)?輸出一個 HTML 或者 XML 元素的結(jié)構(gòu)樹，點擊結(jié)構(gòu)樹上面的節(jié)點進入到 HTML 面板。
• console.trace() 輸出 Javascript 執(zhí)行時的堆棧追蹤。
• console.group(object[, object, ...]) 輸出消息的同時打開一個嵌套塊，用以縮進輸出的內(nèi)容。調(diào)用 console.groupEnd() 用以結(jié)束這個塊的輸出。
• console.time(name) 計時器，當調(diào)用 console.timeEnd(name);并傳遞相同的 name 為參數(shù)時，計時停止，并輸出執(zhí)行兩條語句之間代碼所消耗的時間（毫秒）。
• console.profile([title]) 與 profileEnd() 結(jié)合使用，用來做性能測試，與 console 面板上 profile 按鈕的功能完全相同。
• console.count([title]) 輸出該行代碼被執(zhí)行的次數(shù)，參數(shù) title 將在輸出時作為輸出結(jié)果的前綴使用。
• console.clear() 清空控制臺。

關(guān)于Chrome的調(diào)試基本就這些了，如果使用了Chrome，我相信你會喜歡上它的。

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

轉(zhuǎn)載于:https://www.cnblogs.com/davidwang456/p/4030224.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。