自訂開發人員工具

Sofia Emelianova
Sofia Emelianova

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

設定

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

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

深色主題

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

深色主題。

  1. 開啟指令選單
  2. 開始輸入 dark,選取「切換為深色主題」指令,然後按下 按下 Enter 鍵執行指令。

    深色主題指令。

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

動態主題

開發人員工具可以自動配合 Chrome 的色彩主題。

如何設定主題:

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

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

導覽匣

Drawer 包含許多隱藏功能。

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

導覽匣。

按一下「more_vert」「More Tools」

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

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

根據預設,開發人員工具會固定在可視區域的右側。此外,您也可以將開發人員工具固定在底部或左側,或是將開發人員工具從另一個視窗復原。

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

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

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

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

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

  • 在 Linux 或 Windows 上:按下 Control + Shift + D
  • MacOS:Command + Shift + D

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

如要變更排序,請點選下列任一選項,然後向左或向右拖曳:

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

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

開發人員工具工作階段中的自訂分頁順序會保持不變。

面板版面配置

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

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

變更面板版面配置

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

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

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

同步處理設定

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

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

Chrome 設定檔同步功能。

您可以使用「設定」「設定」> 個別啟用或停用開發人員工具設定同步功能「同步處理」>「啟用設定同步處理功能」核取方塊。

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

除了「工作區」、「實驗」、「裝置」分頁和其他一般設定,DevTools 會同步處理大部分的設定。「啟用設定同步處理功能」核取方塊的狀態也會同步到所有裝置。

舉例來說,系統會同步處理下列「外觀」設定,因此你在所有裝置上享有一致的體驗,不必重新定義相同的設定。

外觀設定。

不過,Dock 設定不會同步處理,因為開發人員在不同網站進行偵錯時,會採用不同的座架偏好設定。

座架。

自訂鍵盤快速鍵

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

啟用實驗

請參閱「設定 >實驗