簡介
Google Chrome 是一款功能強大的網路瀏覽器，可讓您在網路上盡情使用各種應用程式。Google 致力於為使用者提供快速、穩定且功能豐富的瀏覽體驗。Google 也確保開發人員能享有良好的 Chrome 使用體驗。開發人員工具已整合至 Chrome 和 Safari，可協助網頁開發人員和程式設計師進一步使用瀏覽器的內部功能，並可充分利用網頁應用程式。
開發人員工具是開放原始碼 Webkit 專案的一部分。本文討論的大部分內容都適用於 Google Chrome 和 Safari。不過，這些螢幕截圖是使用 Google Chrome 6 擷取，因此在您的瀏覽器中可能會有些許差異。
本文將概略介紹開發人員工具，並指出其最受歡迎且實用的功能。我們的目標對象是網頁程式開發人員，他們不瞭解或尚未調查開發人員工具。不過，即使您是經驗豐富的網頁程式開發人員，也一定能從中學到一些訣竅。
如果您的開發人員工具例項與本文中的螢幕截圖不太相符，建議您升級至 5 版，以便按照本文所述操作，並存取本文所述的所有功能。
總覽
總體而言，開發人員工具有八大主要工具群組，且每個版本都會擴充功能。Chrome 5 現提供元素、資源、指令碼、時間軸、設定檔、儲存空間、稽核和控制台。
元素
元素工具可讓您以瀏覽器的角度查看網頁。也就是說，您可以使用「元素」工具查看原始 HTML、原始 CSS 樣式和文件物件模型，並即時操作這兩者。
資源
使用「資源」工具，瞭解網頁或應用程式向網路伺服器要求哪些元件、這些要求需要多久時間，以及所需頻寬。您也可以查看各個資源的 HTTP 要求和回應標頭。「資源」工具可協助你加快網頁載入速度。
指令碼
如要查看網頁的 JavaScript 內容，請使用「指令碼」工具。您可以在這裡查看網頁所需的指令碼清單，以及完整功能的指令碼偵錯工具。您甚至可以即時變更 JavaScript！
時間軸
如要進行進階的時間和速度分析，時間軸工具可讓您深入瞭解 Chrome 的各種幕後活動。您可以瞭解瀏覽器處理 DOM 事件、算繪網頁版面配置和繪製視窗所需的時間。
設定檔
設定檔工具可協助您擷取及分析 JavaScript 指令碼的效能。舉例來說，您可以瞭解哪些函式執行時間最長，並精準鎖定需要最佳化的部分。
儲存空間
現代網路應用程式需要比 Cookie 更持久的儲存空間，而儲存空間工具可協助您追蹤、查詢及偵錯本機瀏覽器儲存空間。這項工具可顯示及查詢儲存在本機資料庫、本機儲存空間、工作階段儲存空間和 Cookie 中的資料。
稽核
稽核工具就像是專屬的網站最佳化顧問，隨時提供建議。這項工具可在網頁載入時進行分析，並針對縮短網頁載入時間及增加感知 (和實際) 回應提供建議及進行最佳化。
控制台
最後，開發人員工具提供完整的控制台功能。您可以透過控制台輸入任意 JavaScript，並以程式輔助方式與網頁互動。
啟動
在 Chrome 中啟動開發人員工具非常簡單。
無論使用哪個作業系統，只要在網頁中的任何元素上按一下滑鼠右鍵，然後從內容選單中選取「檢查元素」選項，系統會開啟開發人員工具，並直接鑽研至您按一下的元素。
如要查看實際運作情形，請在 Chrome 瀏覽器中造訪 http://www.google.com。在 Google 標誌上按一下滑鼠右鍵，即可看到下列選項：
選取「檢查元素」後，畫面上會顯示開發人員工具，如下所示：
請注意，開發人員工具會在「元素」分頁中開啟，並自動鑽研至 Google 標誌的 <img> 標記，並加以醒目顯示。如果你想知道哪個 HTML 產生特定網頁元素，這項功能就非常實用。
您也可以使用簡單的鍵盤快速鍵開啟開發人員工具。視作業系統而定，請嘗試下列操作：
- 在 Windows 和 Linux 上，選取
Control-Shift-J鍵。 - 在 Mac 上選取
Command-Option-J鍵。
最後，您可以選擇從主要瀏覽器選單開啟工具。
在 Mac 上，請依序選取主應用程式選單列中的「View」、「Developer」、「Developer Tools」。
在 Windows 電腦上，請使用右上方的「網頁」選單，然後依序選取「開發人員」和「開發人員工具」。
開發人員工具已準備就緒，現在就讓我們開始探索 Google 首頁上的元素。
元素
開發人員工具的第一個分頁是「元素」。這是您用來查看網頁結構的視窗，並以瀏覽器的角度呈現。
DOM 瀏覽
當您需要找出網頁某些部分的 HTML 程式碼片段時，通常會使用「Elements」分頁。舉例來說，您可能想知道圖片是否有 HTML ID 屬性，以及該屬性的值為何。
有時使用「元素」分頁會是「查看來源」的較佳方式。在「Elements」分頁中，網頁的 DOM 會以適當格式呈現，方便您查看 HTML 元素、祖系和後代。您造訪的網頁經常會使用經過精簡或不美觀的 HTML，導致您難以瞭解網頁的結構。您可以透過「元素」分頁查看網頁的實際基礎結構。
舉例來說，以下是 Google 首頁的「查看原始碼」輸出內容。
上述原始碼經過最佳化和簡化，因此不易閱讀。這類格式適合用於用戶端和伺服器，但對開發人員來說較為困難！
相反地，如果您想讀取網頁的來源，請使用「元素」分頁，查看經過美化、標示語法的元素階層。
您也可以透過「元素」分頁瀏覽、互動，甚至變更網頁上任何元素的樣式、指標、屬性和事件監聽器。
瀏覽樣式
由於 CSS 具有階層式特性，因此元素分頁中的樣式瀏覽器非常實用。有時樣式會彼此重疊，並顯示非預期的視覺效果。瞭解瀏覽器將哪些樣式規則套用至元素，有助於您偵錯這類問題。
點選「Elements」分頁中的任何元素，即可顯示該元素附加的所有樣式。
您會在上述螢幕截圖中看到，我們可以指出套用的所有樣式屬性。舉例來說，邊框間距直接來自 <img> 元素的樣式屬性。不過，寬度和高度來自各自的原生屬性。有趣的是，您可以發現還有其他樣式是從 <center> 標記、<body> 標記等沿用而來。
雖然查看個別樣式及其來源很有幫助，但查看計算後套用至元素的最終樣式集合也非常實用。您可以選取「Computed Style」選單，查看最終產品，如下圖所示。
接下來，我們將簡要介紹「元素」分頁提供的其他功能。我們會在日後的文章中進一步說明以下內容。
Box 模型
選取「Metrics」選單，即可查看已套用至所選元素的方塊模型：
元素屬性
您可以選取「Properties」(屬性) 選單，查看元素的所有屬性，就像 JavaScript 和 DOM 會看到的一樣：
事件監聽器
最後，您還可以透過「Event Listeners」選單，查看已附加至元素或透過元素傳遞的事件監聽器：
摘要
您可以透過「元素」分頁使用許多功能，日後的文章將深入探討個別選單。
如要查看網頁在瀏覽器中的外觀，請使用「元素」分頁。您可以透過「元素」分頁，快速輕鬆回答常見問題，例如「這個樣式如何計算？」或「哪些 HTML 標記產生這個元件？」
您可以將「元素」分頁視為超級「檢視原始碼」，以便深入瞭解網頁。
在調查網頁後，您可能會想知道 HTML、CSS 和圖片是如何出現在網頁上的。接下來會說明「資源」分頁，說明用戶端瀏覽器和網頁伺服器如何通訊，以便傳送這些資源。
資源
應用程式運作無誤後，下一步應是最佳化網路和頻寬效能。您應盡可能以快速且有效率的方式，將應用程式從伺服器轉移至用戶端。使用者會感謝你提供快速的網頁載入速度，你也能省下頻寬和伺服器資源的費用，並在 Google 搜尋結果排名中獲得更高的分數 (現在的排名會考量網站速度)。
開發人員工具中的「資源」分頁可讓您查看網路伺服器和用戶端瀏覽器之間的通訊。您可以查看瀏覽器要求的所有資源 (這通常會讓您大吃一驚！)、從伺服器接收這些資源所需的時間，以及傳輸期間使用的頻寬。
有趣的是，執行「資源」分頁會影響網頁載入效能，因此預設為停用。首次使用這項功能時，請為目前查看的網頁啟用這項功能。
建議您保留預設的「僅針對這個工作階段啟用」選項，以免不必要地造成效能小幅降低。點選「啟用資源追蹤」後，頁面會重新載入，開發人員工具會監控並顯示伺服器傳送的資源。
下圖顯示 Google 首頁所需的資源，以及為該頁面載入的資源。
這個畫面上有很多資訊，我們一項一項來看。
預設行為是顯示要求及載入網頁所有資源所需的時間。向下捲動「資源」清單時，您可能會發現有許多個別要求，大量用戶端要求可能會嚴重影響效能。瞭解確切要求是進行最佳化及最終減少資源的第一步。
如果您只想查看圖片或樣式表單，可以直接使用主分頁視窗下方的選單篩選資源類型。
您也會瞭解資源的要求順序。透過時間軸顯示功能，您可以進一步瞭解網頁上某些元素為何比其他元素晚顯示。
掌握所有要求的資源，以及這些資源如何組成整個要求時間表後，您可以進一步細查個別資源。
如果您發現每次存取網頁時都會要求某些資源，表示快取標頭未正確設定。只要按一下左側清單中的資源，即可查看該資源的所有標頭。
使用「標頭」顯示畫面，確保已設定預期的 HTTP 回應代碼，並提供適當的標頭。舉例來說，如果資源很少或從未變更，您的伺服器應設定 Expires 標頭，以便在很久之後過期。這會告訴瀏覽器，在該日期之前不應再次要求資源。這樣一來，網頁所需的 HTTP 連線數量就會減少，網站速度也會因此加快。
摘要
「資源」分頁還有更多功能，我們會在日後的文章中介紹。
您可以使用「資源」分頁，瞭解用戶端瀏覽器如何與網路伺服器進行通訊。您可以利用這類資訊 (包括要求時間、要求大小和要求順序) 進行智慧最佳化，以減少伺服器負載和成本，並提高速度和使用者體驗。
速度對網站、使用者和搜尋引擎都非常重要。資源數量和大小減少後，且發生適當的 HTTP 對話，下一步就是調查並最佳化網頁中執行的程式碼。幸運的是，下文將介紹的「指令碼」分頁正好可以解決這個問題。
其他資源
如要進一步瞭解開發人員工具，建議您參閱以下資源：
當然，請鎖定 html5rocks.com，瞭解本文的第二部分，以及其他許多精彩的 HTML5 和 Chrome 內容。