Chrome 開發人員工具是直接內建在 Google Chrome 瀏覽器中的一組網頁開發人員工具。開發人員工具可協助您即時編輯頁面並快速診斷問題，助您更快打造出更優質的網站。
觀看影片，瞭解核心開發人員工具工作流程的即時示範，包括對 CSS 偵錯、設計 CSS 原型、對 JavaScript 偵錯，以及分析載入效能。
開啟開發人員工具
開啟開發人員工具的方法有很多種，因為不同的使用者想快速存取開發人員工具 UI 的不同部分。
- 如要使用 DOM 或 CSS，請在頁面上的元素上按一下滑鼠右鍵，然後選取「檢查」，進入「元素」面板。或按下 Command + Option + C 鍵 (Mac) 或 Control + Shift + C 鍵 (Windows、Linux、ChromeOS)。
- 如要查看記錄訊息或執行 JavaScript，請按下 Command + Option + J 鍵 (Mac) 或 Control + Shift + J 鍵 (Windows、Linux、ChromeOS) 直接進入「Console」(控制台) 面板。
如需更多詳細資訊和工作流程，請參閱「開啟 Chrome 開發人員工具」。
開始使用
如果您是經驗豐富的網頁程式開發人員，請參考下列建議起點，瞭解 DevTools 如何提升效率：
探索開發人員工具
開發人員工具 UI 可能會讓人感到不堪負荷... 這裡有許多分頁！不過，如果您花時間熟悉每個分頁能夠提供哪些功能，或許就會發現開發人員工具可大幅提升您的工作效率。
裝置模式
模擬行動裝置。
元素面板
查看並變更 DOM 和 CSS。
- 開始檢視及變更 DOM
- 開始查看及變更 CSS
- 編輯 CSS
- 編輯 DOM
- 尋找無效、覆寫、停用和其他 CSS
- 找出 CSS 改進空間
- 模擬淺色/深色主題、對比和其他 CSS 媒體功能
- 找出未使用的 CSS
- 檢查動畫
控制檯面板
透過控制台查看訊息並執行 JavaScript。
來源面板
對 JavaScript 進行偵錯、在重新載入頁面時保留對開發人員工具所做的變更、儲存並執行 JavaScript 程式碼片段，以及將您在開發人員工具中所做的變更儲存至本機來源。
- 開始對 JavaScript 偵錯
- 透過中斷點暫停程式碼
- 在工作區中編輯及儲存檔案
- 執行 JavaScript 程式碼片段
- JavaScript 偵錯參考資料
- 在本機覆寫網路內容和 HTTP 回應標頭
網路面板
查看及偵錯網路活動。
錄音工具面板
記錄、重播及評估使用者流程。
效能面板
找出改善負載和執行階段效能的方法。
「記憶體」面板
找出並修正影響網頁效能的記憶體問題，例如記憶體流失。
應用程式面板
檢查所有載入的資源，包括 IndexedDB 或 Web SQL 資料庫、本機與工作階段儲存空間、Cookie、應用程式快取、圖片、字型和樣式表。
安全性面板
針對複合型內容問題、憑證問題等項目進行偵錯。
社群
您可以在 Crbug (工程團隊的錯誤追蹤工具) 中提交錯誤報告和功能要求。
如果您要提醒我們錯誤或功能要求，但沒多久時間，則歡迎將 Tweet 傳送至 @ChromeDevTools。我們會定期透過帳戶回覆和發送公告。
如需開發人員工具使用方面的協助，Stack Overflow 是最佳管道。
如要在開發人員工具文件中回報錯誤或提出功能要求，請開啟 GitHub 問題。
開發人員工具也擁有 Slack 頻道，但團隊不會持續監控 Slack。