http://segmentfault.com/a/1190000000683599
這里我假設你用的是Chrome瀏覽器，如果恰好你做web開發，或者是比較好奇網頁中的一些渲染效果並且喜歡折騰，那么你一定知道Chrome的開發者工具了。其實其他瀏覽器也有類似工具，比如Firefox下的firebug。本文將會詳細講述如何使用Chrome開發者工具，希望里面有些讓你感到驚艷的東西！即使你不用Chrome，那么文中的某些內容也會相當有用。
首先啰嗦一下如何打開開發者工具吧。可以直接在頁面上點擊右鍵，然后選擇審查元素；或者是打開Tools--Developer Tools；或者是用快捷鍵 Command Option + I 打開。打開后我們看到的界面大概如下：
Google Chrome一共提供了8大組工具：
- Elements: 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的HTML、CSS和DOM(Document Object Model)對象。此外，還可以編輯這些內容更改頁面顯示效果；
- Network: 可以看到頁面向服務器請求了哪些資源、資源的大小以及加載資源花費的時間，當然也能看到哪些資源不能成功加載。此外，還可以查看HTTP的請求頭，返回內容等；
- Sources: 主要用來調試js；
- Timeline: 提供了加載頁面時花費時間的完整分析，所有事件，從下載資源到處理Javascript，計算CSS樣式等花費的時間都展示在Timeline中；
- Profiles: 分析web應用或者頁面的執行時間以及內存使用情況；
- Resources: 對本地緩存（IndexedDB、Web SQL、Cookie、應用程序緩存、Web Storage）中的數據進行確認及編輯；
- Audits: 分析頁面加載的過程，進而提供減少頁面加載時間、提升響應速度的方案；
- Console: 顯示各種警告與錯誤信息，並且提供了shell用來和文檔、開發者工具交互。
強大的Chrome開發者工具提供了很棒的提示功能，當我們把鼠標懸停在某些項時，會顯示一些很有用的提示信息，有時候我們可以得到意想不到的收獲。此外，開發者工具還提供了Emulation功能，做移動開發時特別有用。下面先詳細研究一下8大工具的使用方法。
Elements
Elements工具像一把手術刀一樣“解剖”了當前頁面，我們看到的Elements頁面一般像這樣子：
圖中標記為1的紅色區塊為頁面HTML文件，HTML中的每個元素比如<body>、<p>都是一個DOM節點，所有的DOM節點組成了DOM樹。我們完全可以把紅色區塊1當做是DOM樹，把HTML元素標簽看做DOM節點。
當我們在這里選中某一DOM對象時，網頁中相應元素也會被陰影覆蓋。我們可以對DOM對象進行修改，修改后結果會在頁面實時顯示出來。此外，還可以用 Command + f 搜索DOM樹中指定的內容，或者是以HTML形式更改頁面元素，如下圖：
選中DOM對象之后右鍵即可以看到一些輔助的功能，如圖中標記為2的區塊所示：
- Add Attribute: 在標簽中增加新的屬性；
- Force Element State: 有時候我們為頁面元素添加一些動態的樣式，比如當鼠標懸停在元素上時的樣式，這種動態樣式很難調試。我們可以使用，是的。真的是很好用。要多多使用才有意義。
Force Element State強制元素狀態，便於調試，如下圖：
- Edit as HTML: 以HTML形式更改頁面元素；
- Copy XPath: 復制XPath；
- Delete Node: 刪除DOM節點；
- Break On: 設置DOM 斷點。
圖中被標記為3的藍色區塊顯示當前標簽的路徑：從html開始一直到當前位置，我們單擊路徑中任何一個標簽，即可以跳轉到相應標簽內容中去。
圖中標記為4的藍色區塊實時顯示當前選中標簽的CSS樣式、屬性等，一共有以下5小部分：
- Styles: 顯示用戶定義的樣式，比如請求的default.css中的樣式，和通過Javasript生成的樣式，還有開發者工具添加的樣式；
- Computed: 顯示開發者工具計算好的元素樣式；
- Event Listeners: 顯示當前HTML DOM節點和其祖先節點的所有JavaScript事件監聽器，這里的監聽腳本可以來自Chrome的插件。可以點擊右邊小漏斗形狀(filter)選擇只顯示當前節點的事件監聽器。
- DOM Breakpoints: 列出所有的DOM 斷點；
- Properties: 超級全面地列出當前選中內容的屬性，不過基本很少用到。
實際應用中我們經常會用到Styles，如下圖：
圖中標記為1的+號為New style rule，可以為當前標簽添加新的選擇器，新建立的樣式為inspector-stylesheet。此外，也可以直接在原有的樣式上增加、修改、禁用樣式屬性，如圖中標記2顯示。
在New style rule右邊為Toggle Element State，選擇后會出現標記3顯示的選擇框，如果選中:hover后，即可以看到鼠標懸停在頁面元素上時的CSS樣式了，作用類似於前面的Force Element Satte，更多內容可以看:hover state in Chrome Developer Tools 。
更強大的是，開發者工具以直觀的圖形展示了盒子模型的margin、border、padding部分，如標記5所示。下面動態圖給出了盒子模型的一個示例：
Network
有時候我們的網頁加載的很慢，而相同網速下，其他網頁加載速度並不慢。這時候就得考慮優化網頁，優化前我們必須知道加載速度的瓶頸在哪里，這個時候可以考慮使用Network工具。下圖為我的博客首頁加載時的Network情況：
請求的每個資源在Network表格中顯示為一行，每個資源都有許多列的內容(如紅色區塊1)，不過默認情況下不是所有列都顯示出來。
- Name/Path: 資源名稱以及URL路徑；
- Method: HTTP請求方法；
- Status/Text: HTTP狀態碼/文字解釋；
- Type: 請求資源的MIME類型；
-
Initiator解釋請求是怎么發起的，有四種可能的值：
- Parser：請求是由頁面的HTML解析時發送的；
- Redirect：請求是由頁面重定向發送的；
- Script：請求是由script腳本處理發送的；
- Other：請求是由其他過程發送的，比如頁面里的link鏈接點擊，在地址欄輸入URL地址。
- Size/Content: Size是響應頭部和響應體結合起來的大小，Content是請求內容解碼后的大小。進一步了解可以看這里Chrome Dev Tools - “Size” vs “Content”；
- Time/Latency: Time是從請求開始到接收到最后一個字節的總時長，Latency是從請求開始到接收到第一個字節的時間；
- Timeline: 顯示網絡請求的
可視化瀑布流，鼠標懸停在某一個時間線上，可以顯示整個請求各部分花費的時間。
以上是默認顯示的列，不過我們可以在瀑布流的頂部右鍵，這樣就可以選擇顯示或者隱藏更多的列，比如Cache-Control, Connection, Cookies, Domain等。
我們可以按照上面任意一項來給資源請求排序，只需要單擊相應的名字即可。Timeline排序比較復雜，單擊Timeline后，需要選擇根據Start Time、Response Time、End Time、Duration、Latency中的一項來排序。
紅色區塊2中，一共有6個小功能：
- Record Network Log: 紅色表示此時正在記錄資源請求信息；
- Clear: 清空所有的資源請求信息；
- Filter: 過濾資源請求信息；
- Use small resource raws: 每一行顯示更少的內容；
- Perserve Log: 再次記錄請求的信息時不擦出之前的資源信息；
- Disable cache: 不允許緩存的話，所有資源均重新加載。
選擇Filter后，就會出現如紅色區塊3所顯示的過濾條件，當我們點擊某一內容類型(可以是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)后，只顯示該特定類型的資源。在XHR請求中，可以在一個請求上右鍵選擇“Replay XHR”來重新運行一個XHR請求。
有時候我們需要把Network里面內容傳給別人，這時候可以在資源請求行的空白處右鍵然后選擇Save as HAR with Content保存為一個HAR文件。然后可以在一些第三方工具網站，比如這里重現網絡請求信息。
選定某一資源后，我們還可以Copy as cURL，也就是復制網絡請求作為curl命令的參數，詳細內容看 Copying requests as cURL commands
此外，我們還可以查看網絡請求的請求頭，響應頭，已經返回的內容等信息，如下圖：
資源的詳細內容有以下幾個：
- HTTP request and response headers
- Resource preview: 可行時進行資源預覽；
- HTTP response: 未處理過的資源內容；
- Cookie names and values: HTTP請求以及返回中傳輸的所有Cookies；
- WebSocket messages: 通過WebSocket發送和接收到的信息；
- Resource network timing: 圖形化顯示資源加載過程中各階段花費的時間。
補充解釋
XPath 是一門在 XML 文檔中查找信息的語言。XPath 用於在 XML 文檔中通過元素和屬性進行導航。比如在圖2中，
<a href="https://github.com/NUKnightLab/TimelineJS">這里</a> 這里a標簽的Xpath為：/html/body/div[2]/p[1]/a，解讀為：html里面body標簽的第二個div標簽的第一個p標簽下的a標簽。
HTML DOM允許我們在某一事件發生時執行特定的JavaScript腳本，這里的事件可以是：
- 鼠標移到某元素之上；
- 窗口或框架被重新調整大小；
- 文本被選中；
- 用戶在HTML元素上單擊；
- 某個鍵盤按鍵被按下...
這里事件發生時執行的javascript腳本就是事件監聽器。
DOM 斷點（DOM Breakpoints）可以監聽某個 DOM 被修改情況，在Elements中某個元素上右鍵可以設置三種不同情況的斷點：
- 子節點修改
- 自身屬性修改
- 自身節點被刪除
設置后 DOM Breakpoints 列表中就會出現該 DOM 斷點。
一旦監聽的DOM被修改時，斷點就會定位到執行修改操作的代碼，這對於綁定了多個事件的 DOM 調試有很大的幫助。
XMLHttpRequest是一個瀏覽器接口，使得Javascript可以進行HTTP(S)通信。XMLHttpRequest 對象用於在后台與服務器交換數據，這樣就可以
- 在不重新加載頁面的情況下更新網頁
- 在頁面已加載后從服務器請求數據
- 在頁面已加載后從服務器接收數據
- 在后台向服務器發送數據
更多關於XHR的內容可以看阮一峰老師的XMLHttpRequest Level 2 使用指南。
WebSocket規范定義了一種 API，可在網絡瀏覽器和服務器之間建立“套接字”連接。簡單地說：客戶端和服務器之間存在持久的連接，而且雙方都可以隨時開始發送數據。這樣就解決了長期以來只能由客戶端發起請求才能從服務器獲取信息這一問題。
更多關於WebSocket的內容可以看WebSockets 簡介：將套接字引入網絡
[本文環境]
- 操作系統：OS X 10.9.4
- Chrome版本：Version 37.0.2062.120
參考：
Chrome DevTools Overview
Introduction to Chrome Developer Tools
Chrome Dev Tools: Networking and the Console