作爲一名前端開發者，打交道最多的可能是和瀏覽器。市面上各種瀏覽器多不勝數，主流的有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，我相信你會喜歡上它的。
另外一個小技巧：
在當前 “開發者工具面板”，按下退出鍵 “Esc” ，可以打開 “底部Console面板”，方便對照當前 HTML元素 調試代碼，效果圖如下：
Chrome開發者工具 英文翻譯：
Elements：元素（查看 HTML 結構）
Resources：資源（一些 Cookie 等資源可以在這裏查看到）
Network：網絡（一些 Http請求 都在這）
Sources：來源（相當於以前的“Scripts/腳本”,也相當於 Firebug 當中的“腳本”，用來 調試腳本 用的）
Timeline：時間線
Profile：性能分析
Audits：審查/檢查（會提供一些“優化建議”，比如說 哪些CSS沒有用到）
Console：控制檯
----------------------------------------------------------------------------------------
Computed Style：計算後的樣式
Show inherited：顯示繼承的樣式
Metrices：測量
Properties：屬性
DOM Breakpoints：Dom斷點
Event Listeners：事件監聽器
----------------------------------------------------------------------------------------
preserve log upon navigation：保存日誌在導航
-- 說明：面板上，通常情況下，只能保持 當前頁面的http請求，也就是說，如果頁面發生跳轉，先前的那個頁面的日誌信息就不見了，而這個功能能保存多個頁面的日誌分析，
尤其是在分析ajax請求時，該功能尤爲重要！
----------------------------------------------------------------------------------------
在Console面板，可以按住 Shift + Enter 組合鍵 實現代碼換行。