Google Chrome 瀏覽器開發人員工具，讓網頁開發變得更輕松
無論是 IE 6/7 的 Internet Explorer Developer Toolbar 或者是 IE 8 自帶的 Developer Tools，還是 Firefox 的 Firebug ，以及 Safari 的 Web Inspector 和 Opera 的 Dragonfly，他們的宗旨只有一個——幫助程序員方便、更高效地進行網頁開發。
作為瀏覽器中生力軍，Google Chrome 瀏覽器 (4.0及以上版本) 也自帶了豐富的開發人員工具，讓您可以隨時隨地對任何網頁的 CSS、 HTML 和 JavaScript 進行實時編輯、調試以及監控。
Google Chrome 瀏覽器開發人員工具不僅僅能幫助您診斷、修復在網頁加載、腳本執行以及頁面呈現中出現的問題，還可以幫助您最大限度地了解您的網頁或網絡應用程序對CPU以及內存的使用情況。
本篇教程將從以下幾部分系統地講解如何使用 Google Chrome 瀏覽器開發人員工具來幫助您的開發：
· 准備工作
· 如何使用元素 (Elements) 面板
· 如何使用資源 (Resources) 面板
· 如何使用腳本 (Scripts) 面板
· 如何使用時間軸 (Timeline) 面板
· 如何使用剖析 (Profiles) 面板
· 如何使用存儲 (Storage) 面板
· 如何使用審計 (Audits) 面板
· 如何使用 JavaScript 控制台 (Console)
准備工作
要開始使用開發人員工具，請先下載 Google Chrome 瀏覽器。（如果您想試用最新版本的的開發人員工具，可以下載開發版或測試版（英文網頁）Google Chrome 瀏覽器。）
在 Google Chrome 瀏覽器安裝完成后，您可以打開自己感興趣的網頁或網絡應用程序，然后通過下面任何一種方式進入開發人員工具：
· 點擊位於瀏覽器用戶界面右上角的“頁面”下拉菜單 
，然后選擇“開發人員”→“開發人員工具”。
· 右鍵點擊網頁上的任一元素，在彈出菜單中選擇“審查元素”。
· 在 Windows 或 Linux 操作系統上，使用 Ctrl+Shift+I 快捷鍵打開開發人員工具（或使用 Ctrl+Shift+J 直接進入 JavaScript 控制台）。
· 在 Mac 上，使用 Command+Option+I 快捷鍵打開開發人員工具（或使用 Command+Option+J 直接進入 JavaScript 控制台）。
現在您應該已經看到開發人員工具的窗口了吧？在窗口的最上方的工具欄里排列着 8 個圖標，分別對應不同的功能，每一個圖標點擊后都會打開相應的調試面板，幫助您獲取各種不同的信息，如 DOM 樹、資源占用情況、頁面相關的腳本等。通過 Ctrl+[ 和 Ctrl+] 鍵，可以在這些項之間進行切換。工具欄最右方還提供了一個搜索框，方便在當前面板中進行搜索。
工具窗口下部的按鈕可以讓調試窗口停靠到主窗口內，切換 JavaScript 控制台狀態，以及其它一些功能。當然您也可以使用 Esc 鍵來更快地切換 JavaScript 控制台狀態。直接點擊控制台圖標會使控制台調試界面會占據了整個開發工具窗口。窗口右下角顯示的是錯誤和警告計數，點擊它們也會打開控制台。
接下來的單元，讓我們一起來一一分解這些圖標所對應面板具有的強大功能吧！
元素（Elements）面板
在元素（Elements）面板中，可以看到整個頁面的 DOM 樹結構和每個元素的所有屬性，同時也可以實時地修改這些元素及其屬性，並可以實時看到修改后的效果。
我們這里以 Google 簡體中文首頁為例，鼠標右鍵單擊“ Google 搜索” 按鈕，選擇“審查元素”，您會看到如下的窗口界面（注：此處使用的內嵌工具窗口模式，如您的工具窗口為獨立窗口模式，可通過點擊窗口左下方的“停靠” 圖標 
將其變為內嵌模式）：
在工具窗口右側，顯示的是被選元素的樣式信息，如有興趣，可以嘗試通過雙擊現有屬性來修改該元素的 style 屬性或應用的某個選擇器中的屬性值，也可以通過取消勾選的方式去掉一些屬性，同時觀察頁面的實時變化。那怎樣給現有的元素或者選擇器增加一個屬性值呢？不用着急，鼠標雙擊您所想修改的元素的 element.style 部分或者它應用的選擇器的空白部分（如下圖所示），即可添加屬性。需要注意的是，添加任何屬性都必須以分號結束。
拖動工具窗口最右側的滾動條，在展開的 Styles 模塊下方還有 Metrics、Properties、Event Listeners 幾大模塊。Metrics 模塊以圖形方式展示出左側面板中選中元素的盒模型並標出了各部分的詳細數值，在調試頁面布局問題時，這樣的展示方式往往更直觀、更清晰。
向上拖動工具窗口中部的滾動條，找到“圖片”元素，點擊后，可看到在頁面上相應的元素被選中，這時我們將工具窗口右側的滾動條拖到最下方，展開 Event Listeners 中個各項，可看到這個鏈接（元素）的相關事件監聽函數。通過 Event Listeners 項右側的“齒輪”圖標，您可以選擇是只顯示選中節點上的注冊的事件，還是顯示整個事件流中所有注冊的事件。
點擊工具窗口左下角的放大鏡圖標 
可進入“審查模式”，選中后，放大鏡變為藍色，這時隨鼠標在主窗口的頁面中的移動，你會看到相應的元素被高亮標識出來，點擊后，工具窗口會顯示選中元素的 DOM 節點信息。
另外值得注意的一點是，在 Google Chrome 瀏覽器開發人員工具里，所有腳本和樣式表是按語法着色的，調試起來更加清晰。
資源（Resources）面板
在資源面板中，你可以看到從網絡上下載的所有資源。打開資源面板的時候，您通常會看到如下的界面：
由於資源跟蹤會對性能產生一定影響，可以選擇只對本次會話進行追蹤還是對所有會話都進行資源跟蹤。
選擇好后點擊啟用資源追蹤（“Enable resource tracking”）按鈕，你會看到如下的狀態：
這是加載此網頁使用網絡資源的時間表。每個水平的棒狀圖示代表一個資源占用網絡的時間，而在每個棒狀圖示的左側顏色較淺的部分代表延遲時間（Latency），即從向服務器發出請求到服務器第一次響應之間的時長。鼠標移至棒狀圖示上，可看到每個部分所花銷的精確時間。
圖中藍色和紅色的兩條垂直線分別代表 DOMContent 加載完成和 Load 事件被觸發的時間點。在了解了網頁各部分加載所花費的的時間后，您可以進行有效改進從而提高網站的效率。
位於時間表上方的軸，列出了可供選擇的不同類型的資源，您可以選擇查看所有資源，或僅查看某一類的資源。
通過時間表下方的下拉菜單，你可以指定排序方式。同時您還可以通過下拉菜單左側的“列表”選擇使用寬行或窄行的方式來查看所有資源的信息。
點擊左側工具欄的 Size 圖標，可以看到下載的各項資源的大小。
點擊左側各項資源，則可以看到它的詳細信息，例如點擊 logo_cn.png 這項，我們將會看到：
打開“ Headers ”標簽頁可以查看完整的頭信息。您甚至可以直接將資源圖標拖入瀏覽器窗口，在瀏覽器中直接直接訪問該項資源。
腳本（Scripts）面板
在腳本面板里，您可以方便的調試 JavaScript 代碼。下面的圖中標注了在腳本面板里的幾個主要功能：
圖中的①—③的3個圖標分別代表：
① 單步調試，不進入函數體內部
② 單步調試，進入函數體內部
③ 跳出當前函數
設置斷點后按 F5 刷新，頁面會在執行到斷點語句處停下，如圖：
您可以在右側添加所需觀察的變量，來進行跟蹤變量值的變化，也可查看堆棧調用情況及全局變量和函數的信息，也可以將鼠標移到感興趣的變量名上直接查看此變量當前的值。
在腳本面板中，您可能會用到以下快捷鍵幫助調試：
Windows/Linux
|
Mac
|
功能
|
Ctrl+/
|
F8 或 Command+/
|
繼續運行
|
Ctrl+’
|
F10 或 Command+’
|
單步調試，不進入函數體內部
|
Ctrl+;
|
F11 或 Command+;
|
單步調試，進入函數體內部
|
Shift+Ctrl+;
|
Shift+F11 或 Shift+Command+;
|
跳出當前函數
|
Ctrl+.
|
Ctrl+.
|
進入上一層調用棧
|
Ctrl+,
|
Ctrl+,
|
進入下一層調用棧
|
時間軸（Timeline）面板
時間軸面板為您的網頁及網絡應用程序做了一個詳細的性能分析，告訴您載入頁面的時間究竟花在哪些地方。從加載資源到解析 JavaScript 腳本、計算樣式表及頁面渲染的所有步驟，您都可以在這里看到它們消耗的時間和內存。
打開時間軸面板，您會看到這樣的界面：
這次我們以 Google 的更多產品頁舉例，看一下這個面板的功能：
1. 首先，在 Google Chrome 瀏覽器標簽頁中打開：http://www.google.com.hk/intl/zh-CN/options/
2. 如果您尚未打開開發人員工具，請按照准備工作這一章節的介紹打開開發人員工具，並切換到時間軸（Timeline）面板
3. 點擊“開始記錄”圖標，您會看到圓點變為紅色
4. F5 刷新頁面，待頁面載入完成后，再次點擊“開始記錄”圖標，紅色圓點變為灰色，您會看到時間軸面板里記錄下來的時間消耗情況：
鼠標移到棒狀圖示上，會看到相應的事件在載入、腳本解析及渲染三步驟所花費的詳細時間：
您還可以拖動上半部分區域的時間軸上的灰色豎條，設定下方詳細數據區的時間范圍，如下圖所示：
切換到 Memory 行，並重新記錄，可以觀察頁面載入的過程中每個時刻使用堆的大小。
剖析（Profiles）面板
剖析面板由 CPU 分析器和堆分析器組成，它能夠幫助您了解網頁和網絡應用程序的執行時間和內存使用情況。
· CPU 分析器顯示的是 JavaScript 腳本里的每個函數分別占用了多少執行時間
· 堆分析器顯示每個 JavaScript 對象所使用的內存大小
通過了解資源使用分布，您就可以有效地對代碼進行優化，從而提高網站的效率。
我們以 V8 引擎基准測試頁面為例，探討剖析面板的使用。
首先在 Google Chrome 瀏覽器中打開 V8 引擎基准測試頁面，並打開開發人員工具的剖析面板，您會看到如下界面：
點擊開始按鈕，並刷新測試頁面，開始信息收集。頁面重新載入完成后，瀏覽器在基准測試中的得分會顯示出來，這時點擊按鈕停止 CPU 使用信息收集，您會看到“ CPU PROFILES ”項目下多出一個記錄，這是您此信息收集區間 CPU 消耗的一個詳細分解記錄，您從中可以看出每個函數占CPU時間的百分比。 如果您僅僅對 JavaScript 代碼中的幾個函數感興趣，您也可以選中它們，然后點擊 
按鈕，面板中將只顯示被選中函數的信息，而 
按鈕作用恰恰相反，將只顯示除選中函數以外其它函數的信息。
在頁面載入的過程中，您可以在任意時刻點擊內存信息采集按鈕，獲取那一時刻內存使用狀況信息。內存使用信息記錄會顯示在“ HEAP SNAPSHOTS ”項下面。
剖析面板的搜索框不僅僅可進行函數名/對象名搜索，同時也支持數值（支持單位后綴，如 ms/s/B/KB/MB 及 % ）查找和帶比較運算符（ <、<=、=、>=、> ）的數值查找。例如在搜索框里輸入“ >30KB ”，您會看到所有大於30KB的記錄條被標為淺橙色，同時左側的內存使用記錄旁也會有數字表明在這個記錄中有多少條滿足搜索條件的結果。
存儲（Storage）面板
通過存儲面板，您可以與 HTML 5 的數據庫存儲和 cookie 進行交互。您可以檢查當前頁面打開的所有數據庫的內容，也可以在這些數據庫中進行 SQL 查詢。
我們以 Webkit 演示頁來簡單介紹一下此面板的使用方法：
1. 在 Google Chrome 瀏覽器中打開 Webkit 演示頁，並打開開發人員工具的存儲面板
2. 在“黃色便條”中鍵入“第一條記錄”，再新建兩個便條，分別鍵入“第二條記錄”和“第三條記錄”
在存儲面板中，您可以點擊數據庫圖標，會發現此頁面建立了一個名為“ WebkitStickyNotes ”的表，點擊此表，可查看里面所有的記錄。
您也可以點擊數據庫圖標，然后直接在右側的命令行窗口鍵入 SQL 語句進行查詢。開發人員工具在您鍵入 SQL 語句時，具有自動補齊功能，使用起來非常方便。
在 COOKIES 項下，您可以查看到該頁保存的所有 Cookies ，也可以通過右鍵菜單刪除它們。
審計（Audits）面板
審計面板是在 Google Chrome 瀏覽器 5.0 中新引入的模塊。它可以幫助您檢查網頁性能和網絡利用率。打開審計面板，您將看到這樣的界面：
您可選擇所需檢測的項目或選擇“檢查全部”（“ Select All ”），然后點擊“運行”（“ Run ”）按鈕，開發人員工具將為您的網頁生成一份詳細的審計報告並給出關於網絡利用及性能優化方面的建議，如下圖所示，為 Google Chrome 瀏覽器開發人員工具為更多 Google 產品頁所生成的審計報告：
JavaScript 控制台（Console）
JavaScript 控制台可與其它面板聯合使用，您可以借助它來審查 DOM 元素、調試 JavaScript 代碼、查看 HTML 解析錯誤等。
我們再次以 Google 簡體中文首頁為例說明 JavaScript 控制台的用法：
進入 Google Chrome 瀏覽器開發人員工具的元素面板，點擊工具窗口左下角的第二個圖標打開 JavaScript 控制台，您可以通過 $(‘element_id’) 來查看一個 DOM 元素，也可以通過“ $N ”（n=0,1,2,...）查看最近選中的元素。
$0 為最近選中的元素，$1 為前一個選中的元素，以此類推：
您也可以通過 inspect() 語句獲得當前窗口或頁面中的對象，例如：使用 inspect(window.navigator.userAgent) 可獲得當前瀏覽器信息，而 inspect(profileEnd) 則會顯示 profileEnd 這個函數：
因為控制台會幫您自動補齊命令、對象名以及屬性名稱等等，所以完全不必擔心需要鍵入太多字符或者敲錯。
使用 dir() 語句可獲得一個元素或對象的詳細屬性，如輸入 dir(ghead) ，您將會看到：
dirxml() 語句的參數如果是函數名，如 dirxml(profileEnd) ，會顯示出這個函數，類似於 inspect(profileEnd) 語句；如果參數是元素的 id，例如 dirxml(ghead) 則以 DOM 樹形式顯示出這個元素，相當於 $(‘ghead’)。
本文對 Google Chrome 瀏覽器開發人員工具的主要功能做了一個總結，希望能幫助廣大的網頁工作人員更好的利用這套工具解決在網頁開發、調試階段遇到的一些問題。