簡介
Google Chrome 是功能豐富且強大的網路瀏覽器，率先實現了網路應用程式的可能。Google 致力為使用者提供快速、穩定且功能豐富的瀏覽體驗。Google 也確保其他開發人員都能享有優質的 Chrome 使用體驗。「開發人員工具」是 Chrome 和 Safari 中隨附的開發人員工具，可讓網頁開發人員和程式設計師深入查看瀏覽器內部設定，以及網頁應用程式。
開發人員工具屬於開放原始碼 Webkit 專案的一部分。本文中的討論大部分適用於 Google Chrome 和 Safari。但是，這些螢幕截圖是使用 Google Chrome 6 版拍攝，因此可能會有些許差異。
本文將簡單介紹開發人員工具，並指出最受歡迎又實用的功能。我們的目標對像是還不知道或尚未調查「開發人員工具」的網頁開發人員。不過，即使您是經驗豐富的網頁程式開發人員，也一定會提出一些訣竅。
如果您的開發人員工具例項與本文所述的螢幕截圖不符，建議您升級至 5 版，以便按照程序使用，並使用這裡所述的所有功能。
總覽
整體而言，可用的工具共有 8 組工具，而且隨著每個版本推出，這些工具的功能會變得更加完善。Chrome 5 現在提供 Elements、資源、指令碼、時間軸、設定檔、儲存空間、稽核和控制台。
元素
元素工具可讓您以瀏覽器的角度檢視網頁。也就是說，您可以使用元素工具查看原始 HTML、原始 CSS 樣式、Document 物件模型，並即時操控這些元素。
資源
使用資源工具，瞭解您的網頁或應用程式向網路伺服器要求哪些元件、要求所需的時間，以及所需的頻寬。您也可以檢視每項資源的 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 屬性，以及該屬性的值。
「元素」分頁有時更適合用來「查看網頁的原始碼」。在「元素」分頁中，網頁的 DOM 格式最佳，可讓您輕鬆顯示 HTML 元素、該元素祖系及其子系。你造訪的網頁經常會壓縮或含有錯誤 HTML，因此難以判斷網頁的架構。「Elements」分頁是您查看網頁實際基礎結構的解決方案。
舉例來說，以下是 Google 首頁「檢視原始碼」的輸出內容。
難以閱讀上述來源的資料，因為內容已經過最佳化及壓縮。這種格式適合用戶端和伺服器，但開發人員很難！
如果您想讀取網頁來源，請改用「元素」分頁，查看經過美化處理的語法醒目顯示的元素階層。
「元素」分頁也可讓您瀏覽和互動，有時還可以變更網頁上任何元素的樣式、指標、屬性和事件監聽器。
樣式瀏覽
CSS 的階層式特性，使得 Elements 分頁中的樣式瀏覽器非常實用。有時候，樣式會收合成自己，因此會顯示使用者未預期的視覺內容。知道瀏覽器套用至元素的樣式規則，可協助您對這類問題進行偵錯。
按一下「元素」分頁中的任何元素，即可顯示附加至該元素的所有樣式。
如上方的螢幕截圖所示，我們可以看到所有套用的樣式屬性。舉例來說，邊框間距直接來自 <img> 元素的樣式屬性。不過，寬度和高度則來自各自的原生屬性。有趣的是，您可以得知有哪些樣式也沿用自 <center> 標記、<body> 標記等等。
雖然查看個別樣式及其來源是很不錯的做法，但在計算並套用至元素後，查看最終的樣式組合，也會很有幫助。選取「運算樣式」選單即可查看最終成品，如下方螢幕截圖所示。
接下來，我們會簡單介紹「元素」分頁提供的其他功能。我們會在日後的文章中詳細說明。
箱型型號
如要查看已套用至所選元素的方塊模型，請選取「指標」選單：
元素屬性
選取 [屬性] 選單，即可查看元素的所有屬性 (如 JavaScript 和 DOM 可看見)：
事件監聽器
最後，您還可透過「事件監聽器」選單，查看附加至該元素的事件監聽器，或是該事件泡泡：
摘要
「元素」分頁提供許多功能，日後的文章將進一步探索個別選單。
如要查看頁面在瀏覽器中的外觀，請使用「元素」分頁。您可以透過「元素」分頁輕鬆快速地回答像是「這個樣式的計算方式為何？」或「這個元件產生的 HTML 標記為何？」等常見問題。
「元素」分頁就像是通用的「檢視來源」，可大幅提升網頁的能見度。
瀏覽完網頁後，您可能會好奇，一開始的 HTML、CSS 和圖片會如何呈現在那裡。「資源」分頁將說明如何用戶端瀏覽器和網路伺服器透過這些資源傳送資源。
資源
應用程式開始運作後，下一步應為最佳化網路和頻寬效能。您應設法讓應用程式從伺服器到用戶端以最快速度和最有效率的方式移轉。使用者非常感謝網頁載入速度飛快，您不但可節省頻寬和伺服器資源的費用，而且 Google 搜尋結果排名也會提高，因為結果也會影響網站速度。
開發人員工具中的「資源」分頁可讓您進入網路伺服器和用戶端瀏覽器之間的通訊視窗。您可以查看瀏覽器要求的所有資源 (這往往令人感到驚訝！)、從伺服器接收資源所需的時間，以及傳輸期間的頻寬用量。
一般情況下，執行「資源」分頁會影響網頁載入效能，因此這項功能預設為停用。首次使用功能時，您必須在目前檢視的頁面中啟用這項功能。
建議您保留預設的「僅在這個工作階段啟用」，避免對效能造成輕微影響。按一下「啟用資源追蹤」後，網頁會重新載入，「開發人員工具」就會監控並顯示從伺服器傳送的資源。
以下螢幕截圖顯示 Google 首頁需要並載入的資源。
這個畫面有許多資訊，我們要逐項介紹。
預設行為是顯示要求並載入網頁上所有資源所花費的時間。向下捲動「資源」清單時，您可能會感到驚訝，因為您不知道用戶端提出的個別要求數量。客戶提出的大量要求可能會嚴重影響效能。要實現最佳化並最終減少資源，首要步驟便是掌握所要求的確切資訊。
如果您有興趣使用圖片或樣式表，可以直接使用主分頁視窗下方的選單篩選資源類型。
您也會知道要求資源的順序。透過時間軸顯示，您可以更加瞭解為何頁面上某些元素較晚出現。
概略瞭解要求的所有資源，以及這些資源構成整個要求時間軸後，您可以細查個別資源。
如果您發現每次存取網頁時都會要求某些資源，這就表示快取標頭設定有誤。如要查看資源的所有標頭，請點選左側清單中的資源。
使用「標頭」顯示內容，確認已設定預期的 HTTP 回應代碼，且提供適當的標頭。舉例來說，如果資源很少或從未變更，則您的伺服器應該設定不久前的 Expiration 標頭。這會告訴瀏覽器在該日期前都不應再次要求資源。這樣可以減少網頁所需的 HTTP 連線數量，進而加快網站速度。
摘要
「資源」分頁還有許多其他功能，我們會在後續文章中說明。
使用「Resources」分頁，瞭解用戶端瀏覽器與網路伺服器的通訊方式。您可以運用這些資訊 (包括要求時間、要求大小和要求順序) 來做出明智的最佳化調整，以減少伺服器負載、成本並增加速度及提升使用者體驗。
速度對網站、使用者和搜尋引擎而言都十分重要。在減少資源數量和大小，並確實發生適當的 HTTP 對話後，下一步就是調查網頁中執行的指令碼，並進行最佳化調整。幸好，接下來要討論的「指令碼」分頁能做到這點。
其他資源
如要進一步瞭解開發人員工具，建議您採取下列做法：
當然，請持續關注 html5rocks.com 本文第 2 部分，以及其他許多實用的 HTML5 和 Chrome 內容。