偏好設定

Sofia Emelianova
Sofia Emelianova
GitHub

使用 。「設定」 >「偏好設定」，設定開發人員工具及其面板的外觀和行為。這個分頁會列出一般自訂選項和面板專屬選項。

如要設定偏好設定，請開啟 。「設定」 >「偏好設定」，然後捲動至下方所述的任一部分。

「偏好設定」分頁中的「外觀」部分。

如要瞭解各項設定的作用，請在本頁搜尋設定名稱，然後點選展開說明。

本參考資料會使用下列圖示表示不同的設定：

  • 核取方塊。 核取方塊
  • 下拉式清單 下拉式選單。
  • 已淘汰。 已淘汰

如要還原預設偏好設定，請捲動至「Preferences」分頁的結尾，然後按一下「Restore defaults and reload」。

外觀

本節列出可自訂開發人員工具外觀的選項。

主題： 將 DevTools 主題從系統偏好設定變更為深色至淺色。
  • 系統偏好設定
  • 淺色
  • 深色

會影響「Elements」 >「Styles」和相關分頁，以及「Sources」 >「Debugger」窗格。auto 選項會讓版面配置取決於開發人員工具的寬度。

面板版面配置： 將元素的面板版面配置從水平變更為垂直。
  • 橫向
  • 直向
  • 自動

如要套用這項設定，請重新載入開發人員工具。

語言： 設定面板的繁體中文版。
  • 瀏覽器 UI 語言
  • 其中一個語言代碼選項，在本例中為中文

這部影片說明如何使用對應的鍵盤快速鍵切換分頁。

來源

本節列出自訂「來源」面板的選項。

這部影片說明啟用這個選項後，當您切換分頁時，「來源」面板會如何在導覽樹狀結構中選取檔案。
「來源」面板會在狀態列中顯示經過壓縮的檔案連結。

需要重新載入開發人員工具。

這部影片首先會示範如何使用 Tab 鍵插入 Tab 字元。接著，當您啟用這個選項並重新載入開發人員工具時，Tab 鍵就會移動焦點。

需要重新載入開發人員工具。

這部影片首先會顯示預設的八個空格縮排。然後，當您啟用這個選項時，它會覆寫來源檔案的預設縮排。

這部影片一開始不會顯示任何建議。啟用這個選項後，編輯器會顯示指令完成建議。

這部影片會示範在啟用自動加上右括號功能前後，輸入左括號的情況。

需要重新載入開發人員工具。

這部影片說明如何在啟用這項選項時折疊程式碼區塊。

需要重新載入開發人員工具。選項會執行下列操作：

  • 全部會將所有空白字元標示為點 (...)。此外，編輯器會將 Tab 字元標示為線條 (—)。
  • Trailing 會以淺紅色標示行尾的空白字元。
顯示空白字元： 選取的選項：全部和尾隨。
  • 無
  • 全部 (...)
  • Trailing

這部影片首先會顯示在暫停在中斷點時，未聚焦的「Sources」面板。啟用這個選項後，開發人員工具會在「來源」面板中開啟「編輯器」，並顯示含有中斷點的程式碼行。

美化時，編輯器可能會在多行中顯示單一長程式碼行，並在前面加上 -，表示這是一行接續。

「來源」面板中的美化程式碼。
「來源」面板會在導覽樹狀結構的「已編輯」部分中顯示 .scss 檔案。「Elements」面板中的「Styles」窗格會在 CSS 規則旁顯示 .scss 來源的連結。

這部影片說明如何在啟用這個選項時，捲動至檔案結尾。

如果停用這項功能，開發人員工具會記錄類似以下的控制台訊息：

主控台中的訊息指出，系統基於安全性考量，禁止從遠端檔案路徑載入。
預設縮排： 停用覆寫選項，並將預設縮排從兩個空格改為八個，然後改為 Tab 鍵。
  • 2 個空格
  • 4 個空格
  • 8 個空格
  • 定位字元

本範例說明如何將預設的縮排設定為八個空格，然後再設定為 Tab 字元。

元素

本節列出自訂「Elements」面板的選項。

這部影片首先會說明 DOM 節點未在 DOM 樹狀結構中選取。啟用這個選項後，元素面板會在游標懸停時選取節點。

網路

本節列出自訂「Network」面板的選項。大部分選項與面板設定相同。

相同。在各網頁載入時儲存要求。

這部影片首先會顯示重新載入網頁時重新整理的要求記錄，然後在您啟用這個選項時保留記錄。

相同。開始或停止在網路記錄中記錄要求。

「網路」面板中的「記錄網路記錄」按鈕。

這部影片一開始會顯示要求並未遭到封鎖。啟用這個選項後，網路要求封鎖側欄中的模式就會封鎖這些要求。

相同。這個選項會將由內嵌框架啟動的請求分組。

網路要求記錄，其中要求已依內嵌頁框分組。

成效

本節列出可自訂「成效」面板的選項。

火焰圖的滑鼠滾輪動作： 將滑鼠滾輪動作從捲動變更為火焰圖的縮放動作。
  • 捲動
  • 縮放

這個範例會在「Performance」面板的火焰圖上，顯示捲動和縮放滑鼠滾輪的動作。

控制台

本節列出可自訂 控制台的選項。大部分選項與 控制台設定相同。

主控台和「設定」中的類似選項。

這部影片說明如何在 。「設定」和「控制台設定」中，使用這個選項隱藏網路訊息。

這部影片說明如何在 。 的「設定」和「控制台」>「設定」中啟用這個選項，並在「控制台」中選取內容。

這部影片說明如何在 。 設定和 控制台 > 設定中啟用這個選項，並將 XHR finished loading 訊息記錄到控制台。

您也可以在控制台中依序點選「控制台」>「設定」來找到相同的選項。

自動完成下拉式選單，其中包含控制台記錄中的指令選項。

您也可以在控制台中依序點選「控制台」>「設定」來找到相同的選項。

主控台中類似的訊息會分組顯示。

CORS 錯誤。

您也可以在控制台中依序點選「控制台」>「設定」來找到相同的選項。

主控台顯示 CORS 錯誤。

您也可以在控制台中依序點選「控制台」>「設定」來找到相同的選項。

這部影片會顯示各種輸出預覽畫面。

換句話說，評估時會將 navigator.userActivation.isActive 設為 true。您也可以在控制台中依序點選「控制台」>「設定」來找到相同的選項。

這部影片顯示啟用此選項前後 navigator.userActivation.isActive 的評估結果。

擴充功能

本節列出可自訂 Chrome 開發人員工具擴充功能連結處理方式的選項。

連結處理： 選擇要用來開啟連結的選項。
  • 自動。預設會在「來源」面板中開啟檔案。
  • 可由 DevTools 擴充功能新增的任意選項。

持續性

本節列出可控管開發人員工具如何儲存所做的變更的選項。

Debugger

本節列出用於控管 Debugger 行為的選項。

停用 JavaScript時的顯示方式和行為。

重新載入頁面，看看頁面在載入時是否會依賴 JavaScript，以及依賴的方式。

停用 JavaScript 後，Chrome 會在網址列中顯示對應的 停用 JavaScript。 圖示，而開發人員工具會在「來源」旁顯示警告 警告。 圖示。

網址列中的圖示，以及開發人員工具中「來源」旁的警告圖示。

根據預設，如果您使用的架構支援這類追蹤功能，偵錯工具會嘗試追蹤非同步作業。

呼叫堆疊中的非同步作業。

詳情請參閱「查看非同步堆疊追蹤記錄」。

全球

本節列出在開發人員工具中具有全域效果的選項。

這部影片首先會示範如何點選連結，並在不使用「DevTools」的情況下開啟新分頁。啟用這個選項後，系統就會在開啟新分頁時一併開啟開發人員工具。

搜尋輸入內容 會在您輸入搜尋查詢時，讓開發人員工具「跳轉」至第一個搜尋結果。如果停用，開發人員工具只會在您按下 Enter 時顯示結果。

這部影片首先會示範在您輸入搜尋查詢時，DevTools 如何「跳躍」。啟用這個選項後，按下 Enter 鍵即可前往第一個結果。

同步

本節說明如何設定裝置間的設定同步功能。