引言
Google Chrome 是一款功能多元且強大的網路瀏覽器，率先開創網路應用程式的可能性。Google 致力於為使用者提供速度飛快、穩定且功能豐富的瀏覽體驗。Google 也確保像您這樣的開發人員在使用 Chrome 時可以獲得良好體驗。「開發人員工具」位於 Chrome 和 Safari 中，可協助網頁開發人員和程式設計師進一步使用瀏覽器的內部功能及其網頁應用程式。
開發人員工具屬於開放原始碼 Webkit 專案的一部分。本文討論的大部分內容都適用於 Google Chrome 和 Safari。不過，螢幕截圖是透過 Google Chrome 6 所擷取，因此瀏覽器可能會稍有不同。
本文將概略介紹開發人員工具，並說明最熱門且實用的功能。我們的目標對像是不知道「開發人員工具」或尚未調查的網頁程式開發人員。不過，即使您是經驗豐富的網頁開發人員，我們還是很確定您一定能收到一到兩個訣竅。
如果您的開發人員工具和本文中的螢幕截圖不同，建議您升級至第 5 版，以便遵循本文所述的所有功能。
總覽
整體而言，我們有八大類工具可供查看開發人員工具，且每個版本都支援更多功能。Chrome 5 現已提供元素、資源、指令碼、時間軸、設定檔、儲存空間、稽核和控制台。
元素
使用 Elements 工具，就能在瀏覽器看到網頁的同時檢視網頁。也就是說，使用 Elements 工具，您可以查看原始 HTML、原始 CSS 樣式、Document Object Model，並即時進行操控。
資源
使用「資源」工具，即可查看網頁或應用程式向網路伺服器要求哪些元件、這些要求花費的時間，以及需要多少頻寬。您也可以查看每個資源的 HTTP 要求和回應標頭。資源工具非常適合用來縮短網頁載入時間。
指令碼
如要對網頁的 JavaScript 建立對等互連，請使用「指令碼」工具。這裡會列出網頁所需的指令碼，以及完整的精選指令碼偵錯工具。您甚至可以即時變更 JavaScript！
時間表
如果需要進階的時間與速度分析，時間軸工具可讓你深入瞭解各種 Chrome 幕後活動。您可以瞭解瀏覽器處理 DOM 事件、轉譯頁面版面配置及繪製視窗所需的時間。
設定檔
設定檔工具可協助您擷取和分析 JavaScript 指令碼的效能。舉例來說，您可以瞭解哪些函式執行時間最長，而完全瞭解哪些函式最需要最佳化。
儲存
新型網頁應用程式比 Cookie 更能持續運作，而儲存空間工具則可協助您追蹤、查詢本機瀏覽器儲存空間並進行除錯。這項工具可以顯示及查詢本機資料庫、本機儲存空間、工作階段儲存空間和 Cookie 中儲存的資料。
稽核
稽核工具就像是指派您身邊的網路最佳化顧問。這項工具可在網頁載入時進行分析，並針對縮短網頁載入時間及增加感知 (和實際) 回應速度提供建議及進行最佳化。
控制台
最後最重要的是，開發人員工具可提供功能完善的主控台。您可以從控制台輸入任意 JavaScript，並透過程式輔助方式與網頁互動。
啟動中
在 Chrome 中輕鬆啟動開發人員工具。
使用任何作業系統時，只要在網頁上的任何元素上按一下滑鼠右鍵，然後從內容選單中選取 [檢查元素] 即可。這樣就會開啟開發人員工具，並向右細查所點選的元素。
如要查看實際運作情形，請透過 Chrome 瀏覽器前往 http://www.google.com。在 Google 標誌上按一下滑鼠右鍵，就會看到下列選項：
選取「檢查元素」後，「開發人員工具」就會顯示，如下所示：
請留意開發人員工具在「Elements」分頁中開啟的方式，並自動下鑽細查及醒目顯示 Google 標誌的 <img> 標記。如果您想瞭解哪個 HTML 產生了特定網頁元素，這項功能就非常實用。
你也可以使用簡單的鍵盤快速鍵開啟開發人員工具。視作業系統而定，請嘗試下列方法：
- 如果使用的是 Windows 與 Linux，請選取
Control-Shift-J鍵。 - 如果使用的是 Mac，請選取
Command-Option-J鍵。
最後，您可以選擇從瀏覽器的主選單開啟工具。
在 Mac 上，在主應用程式選單列中，依序選取「檢視」、「開發人員工具」和「開發人員工具」。
在 Windows 電腦上，您應使用右上方的「頁面」選單，然後選取「開發人員工具」。
現在您已開啟開發人員工具並準備就緒，讓我們先探索 Google 首頁上的元素。
元素
開發人員工具的第一個分頁是「Elements」，這個視窗會融入網頁結構中，在瀏覽器查看時一樣。
DOM 瀏覽
如果需要找出網頁上某部分的 HTML 片段，經常會造訪「元素」分頁。舉例來說，您可能會好奇某圖片包含 HTML ID 屬性，以及該屬性的值為何。
有時候，「元素」分頁可以更有效地「查看網頁的原始碼」。在「Elements」分頁中，網頁的 DOM 將妥善格式化，輕鬆顯示 HTML 元素、祖系及其子系。您造訪的網頁經常會壓縮或簡略 HTML，導致使用者難以查看網頁的結構。「元素」分頁是用來查看網頁實際基礎結構的解決方案。
舉例來說，以下是 Google 首頁「檢視來源」的輸出內容。
以上來源經過最佳化和壓縮，因此難以閱讀。這個格式適合用戶端和伺服器，但開發人員很難！
如果您希望讀取網頁原始碼，請改用「元素」分頁查看經過裁剪、語法醒目顯示的元素階層。
此外，透過「Elements」分頁，您也可以瀏覽、互動，甚至變更網頁上任何元素的樣式、指標、屬性和事件監聽器。
樣式瀏覽
CSS 的串聯性質使「Elements」分頁中的「Styles」瀏覽器更加實用。有時候，樣式會收合，而出現非預期的影像。瞭解瀏覽器套用至元素的樣式規則，有助於您針對這類問題進行偵錯。
按一下「Elements」分頁中的任何元素，即可顯示該元素附加的所有樣式。
如上方的螢幕截圖所示，我們可以判斷所有套用的樣式屬性。舉例來說，邊框間距直接來自 <img> 元素的樣式屬性。不過，寬度和高度來自各自的原生屬性。有趣的是，您可以發現樣式也沿用自 <center> 標記、<body> 標記和其他項目。
查看個別樣式及其來源，雖然很有幫助，但在計算並套用至元素之後，查看最後一組樣式也很有幫助。選取「運算樣式」選單即可查看最終產品，如以下螢幕截圖所示。
接下來，我們會簡單介紹「元素」分頁提供的其他功能。我們會在後續的文章中進一步說明以下內容。
包裝盒型號
如要查看對所選元素套用的方塊模型，請選取「指標」選單：
元素屬性
您可以選取「屬性」選單，以 JavaScript 和 DOM 來查看元素的所有屬性：
事件監聽器
最後，您還可以透過「事件監聽器」選單，查看附加於元素或泡泡的事件監聽器：
摘要
「Elements」分頁有很多功能，日後的文章將深入探討個別選單。
如要查看網頁在瀏覽器中的呈現效果，建議您使用「元素」分頁。透過元素分頁，您可以輕鬆快速地回答「這個樣式是如何計算樣式？」或「哪些 HTML 標記產生了這個元件？」等常見問題。
請將「Elements」分頁想像成一種是「查看原始碼」的一種，提高網頁的能見度。
在檢查該網頁後，您可能會好奇 HTML、CSS 和圖片是如何實現的。我們將在下方說明的「資源」分頁，說明用戶端瀏覽器和網路伺服器如何相互通訊，再傳送這些資源。
資源
應用程式開始運作後，下一步應是最佳化網路和頻寬效能。建議您設法將應用程式從伺服器移轉至用戶端，快速又有效率。使用者非常感謝網頁的載入速度，因此可以節省頻寬和伺服器資源的費用，而在 Google 的搜尋結果排名中也可獲得較佳的分數 (現在會將網站速度納入考量)。
開發人員工具的「資源」分頁可讓你開啟網路伺服器和用戶端瀏覽器之間的通訊。您可看到瀏覽器要求的所有資源 (這個問題總是非常驚訝！)、從伺服器接收這些資源所花費的時間，以及傳輸期間的頻寬用量。
不過，執行「資源」分頁會影響網頁載入效能，因此預設為停用。首次存取這項功能時，您必須在目前檢視的頁面上啟用這項功能。
為了避免受到小規模效能的負面影響，建議您保留預設的「僅限這個工作階段啟用」選項。按一下「啟用資源追蹤」後，頁面就會重新載入，而且開發人員工具會監控並顯示伺服器傳送的資源。
下列螢幕截圖顯示 Google 首頁需要並載入的資源。
這個畫面有很多資訊，所以我們來點一下。
預設行為是顯示要求和載入該網頁所有資源所花費的時間。向下捲動「資源」清單可能會令您感到驚訝，因為您或許不知道用戶端要提出多少個要求。來自用戶端的大量要求可能會嚴重影響效能。最佳化及最終減少資源時，首先要掌握要求的正確資料。
如果只想瞭解圖片或樣式表，可以直接使用主分頁視窗下方的選單篩選資源類型。
您也也會瞭解要求資源的順序。使用時間軸顯示功能，您就可以更清楚掌握為何網頁上的某些元素比其他元素更完整顯示。
在大致掌握所有要求的資源後，以及這些資源如何組成整個要求時間軸後，建議您細查個別資源。
如果您發現每次存取網頁時都會要求某些資源，這表示快取標頭設定有誤。在左側清單中按一下資源，即可查看資源的所有標頭。
使用標頭顯示功能，確認已設定預期的 HTTP 回應代碼，且已提供適當的標頭。舉例來說，如果某項資源很少或從未變更，您的伺服器應該設定未來的 Expiration 標頭。這樣瀏覽器就會知道在該日期前，都不應再次要求資源。這樣可減少網頁所需的 HTTP 連線數量，進而加快網站載入速度。
摘要
「資源」分頁還有許多內容，我們會在之後的文章中加以說明。
使用「資源」分頁即可看到用戶端瀏覽器與網路伺服器通訊的情形。透過這些資訊 (包括要求時間、要求大小和要求順序)，您可以做出明智的最佳化調整，以降低伺服器負載、成本、加快速度，並改善使用者體驗。
速度對網站、使用者和搜尋引擎來說都相當重要。當您減少資源數量和大小，以及適當的 HTTP 對話發生時，下一步就是調查及最佳化網頁中執行的指令碼。但接下來我們會討論「Scripts」分頁，幫助你輕鬆完成這項工作。
其他資源
如要進一步瞭解開發人員工具，建議您採取下列做法：
當然，請密切留意 html5rocks.com 閱讀本文的第 2 部分，以及其他許多出色的 HTML5 和 Chrome 內容。