開啟 Chrome 開發人員工具

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome 開發人員工具有多種開啟方式。從這份完善的參考資料中選擇您喜歡的方式。

您可以透過 Chrome UI 或鍵盤存取開發人員工具：

此外，請參閱這篇文章，瞭解如何自動開啟每個新分頁的開發人員工具。

從 Chrome 選單開啟開發人員工具

如果您偏好使用使用者介面，可以透過 Chrome 的下拉式選單存取開發人員工具。

開啟「元素」面板並檢查 DOM 或 CSS

如要進行檢查，請在網頁上的元素上按一下滑鼠右鍵，然後選取「檢查」。

Chrome 下拉式選單中的「檢查」選項。

開發人員工具會開啟「Elements」面板，然後在 DOM 樹狀結構中選取元素。在「Styles」窗格中，您會看到已套用至所選元素的 CSS 規則。

在「元素」面板中選取的元素。

從 Chrome 主選單開啟你上次使用的面板

如要開啟上一個開發人員工具，請按一下網址列右側的 三點圖示選單。 按鈕，然後依序選取「更多工具」 >「開發人員工具」。

從三點圖示選單中選取「開發人員工具」選項。

或者，你也可以使用捷徑開啟最後一個面板。詳情請參閱下一節的說明。

使用以下快速鍵開啟的面板：元素、控制台或最後一個面板

如果您偏好使用鍵盤，請根據您的作業系統在 Chrome 中按下快速鍵：

OS 元素 控制台 上一個面板
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」C捷徑會在 檢查。 檢查器模式中開啟「Elements」C面板。當你將遊標懸停在頁面的元素上時，這個模式會顯示實用的工具提示。您也可以按一下任何元素，在「Elements」(元素) >「Styles」(樣式) 窗格中查看 CSS。

檢查器模式中的「元素」面板，和工具提示。

如需開發人員工具快速鍵的完整清單，請參閱「鍵盤快速鍵」。

在每個新分頁自動開啟開發人員工具

透過指令列執行 Chrome 並傳遞 --auto-open-devtools-for-tabs 旗標：

  1. 結束任何執行中的 Chrome 執行個體。

  2. 執行您最愛的終端機或指令列應用程式。

  3. 根據您的作業系統執行下列指令：

  • MacOS：

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs

  • Windows：

    start chrome --auto-open-devtools-for-tabs

  • Linux：

    google-chrome --auto-open-devtools-for-tabs

開發人員工具會自動開啟所有新分頁，直到關閉 Chrome 為止。

後續步驟

接下來，請觀看以下影片，瞭解可提升開發人員工具的實用快速鍵和設定。

如需更多實作學習體驗，請參閱如何自訂開發人員工具。