偏好設定

Sofia Emelianova
Sofia Emelianova
GitHub

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

如要調整偏好設定，請開啟 [設定]。「設定」 >「偏好設定」，然後捲動至下列任一部分。

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

如要瞭解各項設定的用途，請在這個頁面搜尋設定名稱，然後 add_circle 展開說明。

此參考資料代表具有以下圖示的不同設定：

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

如要還原預設偏好設定，請捲動至「偏好設定」分頁底部，然後按一下「還原預設值並重新載入」。

外觀

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

「Themes」下拉式選單。 可設定開發人員工具 UI 的顏色主題。

主題： 將開發人員工具的主題從系統偏好設定變更為深色。
  • 系統偏好設定
  • 淺色
  • 深色

「Panel layout」下拉式選單。 會在面板中排列窗格。

影響「Elements」(元素) >「Styles」(樣式) 和「Sisters」分頁，以及「Sources」(來源) >「Debugger」(偵錯工具) 窗格。[auto] 選項會讓版面配置取決於開發人員工具的寬度。

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

「Language」下拉式選單。 可設定開發人員工具 UI 的語言代碼。

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

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

核取方塊。 啟用 Ctrl/Cmd + 0-9 快速鍵切換面板可讓您透過鍵盤開啟面板。

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

核取方塊。 停用暫停狀態重疊：程式碼暫停執行時，在可視區域中隱藏「已暫停在偵錯工具中暫停」播放按鈕並跳過按鈕。 重疊。

核取方塊。 每次更新後顯示新功能：每次 Chrome 更新後，都會自動開啟「新功能」導覽匣分頁。

「新功能」導覽匣分頁，

來源

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

核取方塊。使用「搜尋」分頁搜尋所有載入的 JavaScript 檔案和 JavaScript 檔案，包括 Chrome 擴充功能的檔案。

這部影片說明如何搜尋擴充功能來源檔案中的文字。

核取方塊。在「編輯器」中切換分頁時，選取「Sources」(來源) >「Page」(頁面) 窗格中的檔案。自動顯示側欄中的檔案。

本影片說明啟用這個選項後，「Sources」面板如何在切換分頁時從導覽樹狀結構中選取檔案。

核取方塊。 啟用 JavaScript 來源對應可讓開發人員工具尋找產生或壓縮 JavaScript 檔案的來源。

「來源」面板會在狀態列中顯示壓縮後檔案的連結。

核取方塊。「啟用 Tab 鍵移動焦點」是讓 Tab 鍵。 Tab 鍵在開發人員工具中移動焦點，而不是在編輯器中插入 Tab 字元。

必須重新載入開發人員工具。

這部影片首先顯示使用 Tab 鍵插入的 Tab 字元。啟用這個選項並重新載入開發人員工具後，按下 Tab 鍵可移動焦點。

核取方塊。「偵測縮排」會將縮排設為來源檔案中已在編輯器中開啟的縮排。

必須重新載入開發人員工具。

這部影片會先顯示 8 個空格的預設縮排。啟用這個選項後，就會覆寫來源檔案的預設縮排設定。

核取方塊。 自動完成功能會在編輯器中啟用實用建議。

這部影片一開始並未顯示任何建議。啟用此選項時，「編輯器」會顯示指令完成的建議。

核取方塊。 自動括號關閉功能會在您輸入開頭的括弧或標記時，自動加入右括號或標記。

這部影片示範了在啟用自動括號關閉前後輸入左括號的內容。

核取方塊。「編輯器」中的「括號比對」會以底線和「淺紅色」標示，代表沒有組合的方括號、大括號或括號。

大括號，沒有成對的紅色底線。

核取方塊。 程式碼折疊可讓您在編輯器中，以大括號折疊及展開程式碼區塊。

必須重新載入開發人員工具。

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

顯示空白字元 下拉式選單。 會在編輯器中顯示空白字元。

必須重新載入開發人員工具。以下是可用選項：

  • All 將所有空白字元表示為點 (...)。此外，編輯器會將 Tab 字元以一行 (—) 表示。
  • 軌跡會醒目顯示行末的淺紅色空白字元。
顯示空白字元： 已選取選項：「全部」和「追蹤」。
  • 無
  • 全部 (...)
  • 追蹤

核取方塊。 在偵錯時以內嵌方式顯示變數值，系統會在執行作業暫停時，在指派陳述式旁邊顯示變數值。

在函式執行期間暫停偵錯工具，會在指派陳述式旁邊顯示變數值。

核取方塊。 觸發中斷點時聚焦來源面板，在含有已暫停執行作業的中斷點那一行，開啟「Sources」 >「Editor」。

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

核取方塊。 自動美化列印壓縮後的來源，可讓這些來源清晰易讀。

正確列印時，編輯器可能會多行顯示一行一長程式碼，前面加上 -，表示這是一行連續。

「來源」面板中的精美程式碼。

核取方塊。 啟用 CSS 來源地圖可讓開發人員工具找出所產生 CSS 檔案 (例如 .scss) 的來源，並向您顯示這些檔案。

「來源」面板會在樹狀導覽結構的「已編寫」部分中顯示 .scss 檔案。「元素」面板的「樣式」窗格會在 CSS 規則旁邊顯示 .scss 來源的連結。

核取方塊。「允許捲動範圍超出檔案結尾」可讓您捲動超出編輯器中的最後一行。

這部影片會說明如何在啟用這個選項後，捲動超過檔案結尾。

核取方塊。 允許開發人員工具從遠端檔案路徑載入來源對應等資源。基於安全考量，預設為停用。

如未停用，開發人員工具會記錄與下列內容類似的「Console」訊息：

Play 管理中心會顯示訊息，說明基於安全考量，使用者不得從遠端檔案路徑載入內容。

「預設縮排」下拉式選單。 可讓您在編輯器中，使用 Tab 鍵。 Tab 鍵插入空格數。

預設縮排： 停用覆寫選項，並將預設縮排從二空格變更為八，再變更為 Tab 鍵。
  • 2 個空格
  • 4 個空格
  • 8 個空格
  • 定位字元

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

元素

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

核取方塊。「顯示使用者代理程式陰影 DOM」會在 DOM 樹狀結構中顯示陰影 DOM 節點。

「元素」面板顯示陰影 DOM 節點。

核取方塊。「文字換行」會在 DOM 樹狀結構中打斷長行，並自動換行到下一行。

「元素」面板會逐字換行，並在下一行顯示內容。

核取方塊。「顯示 HTML 註解」會在 DOM 樹狀結構中顯示 HTML 註解。

「Elements」面板會顯示 HTML 註解。

核取方塊。在 檢查。 檢查模式中，將滑鼠遊標懸停在可視區域中的元素上時，「懸停顯示 DOM 節點」會選取 DOM 樹狀結構中的對應節點。

首先，這部影片顯示在 DOM 樹狀結構中未選取 DOM 節點。啟用這個選項後，「元素」面板就會在遊標懸停時選取節點。

核取方塊。 顯示詳細的檢查工具工具提示 當你將滑鼠遊標懸停在元素上時，可視區域在檢查。檢查模式中顯示工具提示。

檢查模式中顯示的詳細工具提示。

核取方塊。「懸停顯示尺規」即可在 DOM 樹狀結構中的元素上，顯示可視區域中的尺規。

可視區域內顯示的尺規。

核取方塊。 當您在「Styles」窗格中將滑鼠遊標懸停在屬性上時，「顯示 CSS 說明文件工具提示」會顯示工具提示，並提供簡短說明。

「瞭解詳情」連結會提供該資源的 MDN CSS 參考資料。

提供 CSS 屬性說明文件的工具提示。

網路

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

核取方塊。「Preserve log」(保留記錄) 與「Network」(網路) 面板中的「Preserve log」(保留記錄) 相同。在網頁載入期間儲存要求。

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

核取方塊。「錄製網路記錄」和「網路」面板中的 記錄網路記錄。「記錄網路記錄」相同。開始或停止記錄網路記錄中的要求。

「Network」面板中的「Record network log」按鈕。

核取方塊。「啟用網路要求封鎖功能」會封鎖「網路要求封鎖」導覽匣中符合模式的要求。

這部影片起初顯示要求未遭到封鎖。啟用這個選項後，「網路要求封鎖」導覽匣中的模式就會封鎖。

核取方塊。「停用快取 (開發人員工具開啟時)」與「網路」面板中的「停用快取」相同。停用瀏覽器快取。

「停用快取」核取方塊。

核取方塊。 色彩代碼資源類型會根據網路記錄「Waterfall」欄中的類型，以不同顏色醒目顯示要求。

「網路」分頁上的「刊登序列」欄，沒有加上顏色的標記。

核取方塊。「依框架將網路記錄分組」與「網路」面板中的「依框架分組」相同。這個選項會將內嵌頁框發出的要求分組。

網路要求記錄，其中包含按內嵌頁框分組的要求。

核取方塊。 在這個網站上強制執行廣告封鎖功能，會在開發人員工具開啟時封鎖網頁上的偵測到的廣告。

「聯播網」面板中顯示與廣告相關的聯播網請求，並啟用「封鎖的要求」篩選器。

效能

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

Flamechart 滑鼠滾輪動作 下拉式選單。 可在您導覽火焰圖時，為滑鼠滾輪指派捲動或縮放動作。

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

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

控制台

本節列出自訂主控台的選項。大部分選項都和「Console 設定」中的相同。

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

核取方塊。「隱藏網路訊息」會在控制台中隱藏網路訊息。

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

核取方塊。「僅限所選內容」會讓「Console」只顯示所選結構定義的訊息：頂端、iframe、工作站或擴充功能。

這部影片說明如何在 [設定]。 的「設定」及「管理中心」>「設定」中同時啟用這個選項，並在主控台中選取相關內容。

核取方塊。「Log XMLHttpRequests」會產生「Console」記錄 XHR 並擷取要求。

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

核取方塊。「顯示時間戳記」可讓「主控台」在訊息旁邊顯示時間戳記。

控制台中列出時間戳記的訊息。

核取方塊。 自動完成功能記錄會顯示，Console 會提供您之前在輸入內容時執行的建議指令。

您也可以在「Console」(管理) >「Settings」(設定) 找到相同選項。

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

核取方塊。 按下 Enter 鍵後接受自動完成建議，當您按下 Enter 鍵時，Console 就會接受自動完成下拉式選單中出現的所選建議。

這部影片說明瞭啟用這個選項前後，按下 Enter 鍵後會發生什麼事。

核取方塊。 控制台中的類似郵件分組後，「控制台」會將類似郵件歸為一組。

您也可以在「Console」(管理) >「Settings」(設定) 找到相同選項。

控制台中的類似訊息會歸為一組。

核取方塊。 在主控台中顯示 CORS 錯誤會讓「控制台」顯示系統記錄的 CORS 錯誤。

您也可以在「Console」(管理) >「Settings」(設定) 找到相同選項。

控制台會顯示 CORS 錯誤。

核取方塊。「Eager 評估」功能可讓您在輸入指令時，讓「控制台」顯示輸出內容的預覽畫面。

您也可以在「Console」(管理) >「Settings」(設定) 找到相同選項。

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

核取方塊。「將程式碼評估視為使用者動作」會將您在控制台中執行的任何指令轉成使用者互動。

換句話說，在評估時將 navigator.userActivation.isActive 設為 true。您也可以在「Console」(管理) >「Settings」(設定) 找到相同選項。

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

核取方塊。 自動展開 console.trace() 訊息會在記錄這些訊息時，顯示展開的 console.trace() 訊息。

控制台中展開的 console.trace() 訊息。

核取方塊。 在瀏覽時保留記錄，這樣「Console」會在每次瀏覽時記錄 Navigated to 訊息，並儲存所有頁面的記錄檔。

您也可以在「Console」(管理) >「Settings」(設定) 找到相同選項。

控制台會顯示「已導覽」的訊息，並將記錄儲存在不同頁面。

延伸

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

連結處理： 選擇開啟連結時要使用的選項。
  • 自動。根據預設，在「Sources」面板中開啟檔案。
  • 可透過開發人員工具擴充功能新增的任意選項。

保留設定

本節列出可控制開發人員工具儲存您變更方式的選項。

核取方塊。 啟用本機覆寫設定後，開發人員工具就會在網頁載入時持續保留您對來源所做的變更。

詳情請參閱本機覆寫。

Debugger

本節列出控制 Debugger 行為的選項。

核取方塊。「停用 JavaScript」可讓您查看 JavaScript 停用後的網頁外觀和行為。

重新載入頁面，看看網頁在載入時是否需要使用 JavaScript，以及這類情形。

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

網址列中的圖示和開發人員工具中的「來源」旁邊顯示警告圖示。

核取方塊。「停用非同步堆疊追蹤」會隱藏「Call Stack」非同步作業的「完整故事」。

如果您使用的架構支援這類追蹤，Debugger 預設會嘗試追蹤非同步作業。

Call Stack 中的非同步作業。

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

全球

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

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

核取方塊。 即時搜尋：在您輸入搜尋查詢時，開發人員工具可以「跳轉」到第一個搜尋結果。如果停用，開發人員工具只有在你按下 Enter 鍵時才會顯示結果。

首先，這部影片會說明開發人員工具在輸入搜尋查詢時，如何「快速跳動」。啟用這個選項後，當您按下 Enter 鍵，開發人員工具就會將您導向第一個搜尋結果。

同步

這個部分可讓您指定裝置之間的設定同步處理作業。

核取方塊。 啟用設定同步功能即可在多部裝置上同步處理開發人員工具設定。

如要使用這項設定，請先啟用 Chrome 同步功能。詳情請參閱「同步處理設定」。