自訂開發人員工具

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

本頁面列出可用於自訂 Chrome 開發人員工具的方式。

設定

>「偏好設定」包含許多自訂開發人員工具選項。

請參閱「開啟設定」和「偏好設定」相關說明。

深色主題

你可以在「設定」或指令選單中啟用深色主題。

深色主題。

  1. 開啟指令選單。

  2. 開始輸入 dark，選取「Switch to dark theme」指令，然後按下 Enter 鍵執行指令。

    深色主題指令。

  3. 或者，您也可以依序前往「設定」「設定」 >「偏好設定」 >「外觀」 >「主題」，設定主題。

動態主題

開發人員工具可自動與 Chrome 的色彩主題相符。

如要設定主題，請按照下列步驟操作：

  1. 開啟新分頁，然後按一下右下角的「編輯」「自訂 Chrome」。
  2. 在「外觀」中，透過「桌布」「變更主題」選取主題，或選取調色盤。

開發人員工具會與「外觀」中選取的色彩主題相符。

如要關閉動態主題設定，請依序點選「設定」 >「偏好設定」>「外觀」>「check_box_outline_blank」「套用 Chrome 色彩配置」> 重新載入 DevTools。

導覽匣

導覽匣包含許多隱藏功能。

按下 Esc 鍵，即可開啟或關閉導覽匣。

導覽匣。

按一下「more_vert」「More Tools」

可開啟其他導覽匣分頁的「更多工具」按鈕。

變更開發人員工具的顯示位置

根據預設，開發人員工具會固定在可視區域右側。您也可以將 DevTools 停駐在底部或左側，或是將其卸除至個別視窗。

您可以透過下列兩種方式變更開發人員工具的位置：

  • 主選單：開啟 自訂及控制開發人員工具，然後按一下：
    • 卸除至個別視窗
    • 固定在左側
    • 固定到底部
    • Dock to right

  • 指令選單：

    1. 開啟指令選單。
    2. 開始輸入 dock，然後選取建議選項：將螢幕固定在底部、左側、右側、取消固定或還原上次固定位置。

指令選單中的建議的固定選項。

如要使用鍵盤快速鍵切換「還原上一個固定位置」，請按下：

  • Linux 或 Windows：Control + Shift + D 鍵
  • MacOS：Command + Shift + D

重新排序面板、分頁和窗格

如要變更排序順序，請按住下列任一項目並向左或向右拖曳：

  • 位於開發人員工具頂端的面板。
  • 「Elements」面板中的窗格，例如「Styles」、「Computed」、「Layout」等。
  • 「來源」面板中的窗格，例如「頁面」、「工作區」、「覆寫」等。
  • 開發人員工具底部的「Drawer」分頁。

此外，您也可以上下移動面板和分頁，在導覽匣中來回切換。做法是在面板或分頁標籤上按一下滑鼠右鍵，然後從下拉式選單中選取「移至頂端」或「移至底部」。

自訂分頁順序會在各個開發人員工具工作階段中保留。

面板版面配置

根據預設，開發人員工具會根據視窗大小自動重新排列面板版面配置。您可以停用自動重新排列功能。依序前往「設定」「設定」>「偏好設定」 >「外觀」，然後根據偏好設定更新面板版面配置。

舉例來說，當螢幕尺寸較小時，「Elements」面板中的「Styles」窗格會從側邊移至底部。如要讓樣式窗格一律保持在側邊，請將面板版面配置變更為直式。

變更面板版面配置

變更開發人員工具使用者介面語言

請參閱「」設定 >「偏好設定」 >「外觀」 >「語言」。

如要變更語言，請依序前往「設定」和「偏好設定」

同步處理設定

您可以在多部裝置上同步開發人員工具設定。

如要啟用同步功能，請先開啟 Chrome 同步功能。啟用後，系統會預設同步處理開發人員工具設定。

Chrome 設定檔同步功能。

如要單獨啟用或停用開發人員工具設定同步功能，請分別使用「設定」>「同步」>「啟用設定同步功能」核取方塊。

開發人員工具同步處理設定

除了「Workspace」、「實驗」和「裝置」分頁的設定與一些其他一般設定外，開發人員工具會同步處理大部分的設定。「啟用設定同步功能」核取方塊的狀態也會在裝置之間同步。

舉例來說，系統會同步以下「外觀」設定，讓您在各裝置上享有一致的體驗，且不必重新定義相同的設定。

外觀設定。

不過，Dock 設定不會同步，因為開發人員在不同網站上偵錯時，Dock 偏好設定會有所不同。

座架。

自訂鍵盤快速鍵

請參閱「設定 > 捷徑」一節。

啟用實驗

請參閱「設定 > 實驗」一文。