開啟 Chrome 開發人員工具的方式有很多種，從這份完整參考資料中選擇最喜歡的方式。
你可以透過 Chrome 使用者介面或鍵盤存取開發人員工具：
- 從 Chrome 的下拉式選單。
- 提供專屬快速鍵，可開啟「元素」、「控制台」或上次使用的面板。
此外，您也可以瞭解如何為每個新分頁自動開啟開發人員工具。
從 Chrome 選單開啟開發人員工具
如果您偏好使用使用者介面，可以透過 Chrome 的下拉式選單存取開發人員工具。
開啟「元素」面板，檢查 DOM 或 CSS
如要檢查，請在網頁的元素上按一下滑鼠右鍵，然後選取「檢查」。
開發人員工具會開啟「元素」面板，並在 DOM 樹狀結構中選取該元素。在「樣式」分頁中，您可以查看套用至所選元素的 CSS 規則。
透過 Chrome 的主選單開啟上次使用的面板
如要開啟上一個開發人員工具面板，請按一下網址列右側的 按鈕，然後依序選取「更多工具」 >「開發人員工具」。
你也可以使用快速鍵開啟上一個面板。詳情請參閱下一節。
使用快速鍵開啟面板：「元素」、「控制台」或上次開啟的面板
如果你偏好使用鍵盤，請根據作業系統按下 Chrome 快速鍵：
| 作業系統 | 元素 | 控制台 | 最後一個面板 |
|---|---|---|---|
| Windows 或 Linux | Ctrl + Shift + C | Ctrl + Shift + J | F12 Ctrl + Shift + I |
| Mac | Cmd + Option + C | Cmd + Option + J | Fn + F12 Cmd + Option + I |
以下是輕鬆記住快速鍵的方法：
- C 代表 CSS。
- JavaScript 的 J。
- I 代表您選擇的選項。
C 快速鍵會以 檢查器模式開啟「元素」面板。在這個模式下，只要將滑鼠游標懸停在頁面上的元素上，系統就會顯示實用的工具提示。您也可以點選任何元素，在「元素」 >「樣式」分頁中查看其 CSS。
如需開發人員工具快速鍵的完整清單，請參閱「鍵盤快速鍵」。
開啟開發人員工具，然後重新載入網頁 (可選擇是否使用快取)
開啟開發人員工具後，你可以透過三種方式重新載入頁面。在 Chrome 視窗的主要動作列中，長按「重新整理」重新載入按鈕，然後選擇下列任一選項：
正常重新載入。使用快取加快重新載入速度。
快速鍵：Cmd+R (macOS) 或 Ctrl+R (Windows/Linux)。
強制重新載入。略過快取，但不會清空快取。
快速鍵：Cmd+Shift+R 鍵 (macOS) 或 Ctrl+Shift+R 鍵 (Windows/Linux)。
清除快取並強制重新載入。先清空所有網站的快取，再重新載入。
在每個新分頁中自動開啟開發人員工具
從指令列執行 Chrome，並傳遞 --auto-open-devtools-for-tabs 旗標：
結束任何正在執行的 Chrome 執行個體。
執行您慣用的終端機或指令列應用程式。
根據您的作業系統，執行下列指令：
macOS：
open -a "Google Chrome" --args --auto-open-devtools-for-tabsWindows：
start chrome --auto-open-devtools-for-tabsLinux：
google-chrome --auto-open-devtools-for-tabs
關閉 Chrome 前，每開啟一個新分頁，開發人員工具就會自動開啟。
後續步驟
接著觀看下列影片，瞭解一些實用的快速鍵和設定，以便更快瀏覽開發人員工具。
如要累積實際操作經驗，請參閱如何自訂開發人員工具。