開啟 Chrome 開發人員工具

Sofia Emelianova
Sofia Emelianova

開啟 Chrome 開發人員工具的方法有很多種。從這份詳盡的參考資料中,選擇喜歡的方式。

您可以透過 Chrome 使用者介面或鍵盤存取開發人員工具,步驟如下:

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

透過 Chrome 選單開啟開發人員工具

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

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

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

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

開發人員工具會開啟「Elements」面板,然後選取 DOM 樹狀結構中的元素。在「樣式」分頁中,您可以查看所選元素套用的 CSS 規則。

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

開啟你透過 Chrome 主選單使用的最後一個面板

如要開啟最後一個開發人員工具面板,請按一下網址列右側的 按鈕,然後選取「More Tools」>開發人員工具

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

或者,您也可以使用快速鍵開啟最後一個面板。詳情請參閱下一節的說明。

使用捷徑開啟面板:元素、控制台或最近面板

如果您偏好使用鍵盤,請根據作業系統按下 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。
  • J 代表 JavaScript。
  • I 代表你的選擇。

按下 C 快速鍵後,即可在 檢查器模式中開啟「Elements」面板。只要將遊標懸停在頁面中的元素上,系統就會提供實用的工具提示。您也可以在「元素」>「樣式」分頁中,按一下任何元素來查看其 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 為止。

後續步驟

接下來,請觀看以下影片,瞭解一些實用快速鍵和設定,以便加快開發人員工具導覽速度。

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