如要設定開發人員工具及其面板的外觀和行為，請依序點選 
「Settings」>「Preferences」。這個分頁會列出一般自訂選項和面板專屬選項。
如要設定偏好設定，請開啟 
「Settings」>「Preferences」，然後捲動至下文所述的其中一個部分。
如要瞭解各項設定的作用，請在本頁搜尋設定名稱，然後按一下「add_circle」展開說明。
本參考資料使用下列圖示表示不同設定：
個核取方塊- 下拉式選單
已淘汰
如要還原預設偏好設定，請捲動至「Preferences」分頁底部，然後按一下「Restore defaults and reload」。
外觀
本節列出自訂開發人員工具外觀的選項。
主題 
設定開發人員工具 UI 的色彩主題。
面板版面配置 
會在面板中排列窗格。
這會影響「元素」>「樣式」和同層分頁，以及「來源」>「偵錯工具」窗格。auto 選項會根據開發人員工具寬度調整版面配置。
Language 
設定開發人員工具 UI 的語言代碼。
如要套用這項設定，請重新載入開發人員工具。
「啟用 Ctrl/Cmd + 0-9 快速鍵切換面板」可讓您使用鍵盤開啟面板。
這部影片說明如何使用對應的鍵盤快速鍵切換分頁。
「Disable paused state overlay」：程式碼執行作業暫停時，隱藏可視區域中的「Paused in debugger」
疊加層。
每次更新後顯示「新功能」：每次 Chrome 更新後，自動開啟「新功能」側邊面板分頁。
來源
本節列出自訂「來源」面板的選項。
在匿名指令碼和內容指令碼中搜尋：使用「搜尋」分頁，搜尋所有已載入的 JavaScript 檔案，包括 Chrome 擴充功能中的檔案。
這部影片說明如何在擴充功能來源檔案中搜尋文字。
在側欄自動顯示檔案：在「編輯器」中切換分頁時，自動在「來源」>「頁面」窗格中選取檔案。
這部影片示範啟用這個選項後，當您切換分頁時，「來源」面板如何在導覽樹狀結構中選取檔案。
「Enable JavaScript source maps」可讓開發人員工具找出已產生或壓縮的 JavaScript 檔案來源。
「啟用 Tab 鍵移動焦點」可讓 
Tab 鍵在開發人員工具中移動焦點，而不是在編輯器中插入 Tab 字元。
必須重新載入開發人員工具。
這部影片首先顯示使用 Tab 鍵插入的 Tab 字元。啟用這個選項並重新載入開發人員工具後，Tab 鍵就會移動焦點。
「Detect indentation」會將縮排設為編輯器中開啟的來源檔案中的縮排。
必須重新載入開發人員工具。
這部影片首先顯示預設的八個空格縮排。啟用這個選項後，系統會覆寫預設縮排，改用來源檔案的縮排。
自動完成功能會在編輯器中提供實用建議。
這部影片一開始不會顯示任何建議。啟用這個選項後，編輯器就會顯示指令自動完成建議。
自動加上右括號：輸入左括號或左標記時，自動加上右括號或右標記。
這部影片呈現啟用自動加上右括號功能前後，輸入左括號的效果。
括號配對功能會在編輯器中，以淺紅色底線和醒目顯示標出沒有配對的中括號、大括號或小括號。
程式碼摺疊：在編輯器中，摺疊及展開大括號內的程式碼區塊。
必須重新載入開發人員工具。
這部影片說明啟用這個選項後，如何收合程式碼區塊。
顯示空白字元 
在編輯器中顯示空白字元。
必須重新載入開發人員工具。選項的作用如下：
- 「All」會將所有空白字元表示為點 (
...)。此外，「編輯器」會將 Tab 字元表示為線條 (—)。 - 結尾：以淺紅色醒目顯示行尾的空白字元。
在偵錯時顯示內嵌變數值：在執行暫停時，顯示指派陳述式旁的變數值。
「觸發中斷點時，聚焦於來源面板」會開啟「來源」>「編輯器」，並顯示暫停執行的中斷點所在行。
這部影片首先顯示在暫停於中斷點時，「Sources」面板未聚焦。啟用這個選項後，開發人員工具會在「來源」面板中開啟「編輯器」，並顯示含有中斷點的程式碼行。
自動對壓縮過的來源套用美化排版，讓這些來源更易於閱讀。
美化排版後，「編輯器」可能會將單一長程式碼行顯示為多行，並在前面加上 -，表示這是接續行。
「啟用 CSS 來源對應」可讓開發人員工具找出產生的 CSS 檔案來源 (例如 .scss)，並顯示給您。
「Allow scrolling past end of file」可讓您捲動至「編輯器」中最後一行之後的位置。
這部影片說明啟用這個選項後，如何捲動至檔案結尾。
允許開發人員工具透過遠端檔案路徑載入來源對應等資源。為了安全起見，系統預設會停用這項設定。
如果未啟用，開發人員工具會將類似下方的訊息記錄到控制台：
預設縮排 
可讓您選擇 
Tab 鍵在編輯器中插入的空格數。
這個範例說明如何先將預設縮排設為八個空格，然後再設為 Tab 字元。
元素
本節列出自訂「Elements」面板的選項。
「Show user agent shadow DOM」會在 DOM 樹狀結構中顯示使用者代理程式 Shadow DOM 節點。
「Word wrap」會將 DOM 樹狀結構中的長行拆分，並換行到下一行。
「Show HTML comments」會在 DOM 樹狀結構中顯示 HTML 註解。
「滑鼠懸停時顯示 DOM 節點」：在
檢查模式中，將滑鼠游標懸停在可視區域中的元素上時，系統會選取 DOM 樹狀結構中的對應節點。
這部影片首先顯示 DOM 樹狀結構中未選取 DOM 節點。啟用這個選項後，「Elements」面板就會選取滑鼠懸停的節點。
「Show detailed inspect tooltip」：在 
檢查模式中，將滑鼠游標懸停在元素上時，在可視區域中顯示工具提示。
「懸停時顯示尺規」：將滑鼠游標懸停在 DOM 樹狀結構中的元素上時，檢視區會顯示尺規。
顯示 CSS 說明文件工具提示：將滑鼠游標懸停在「樣式」窗格中的屬性上時，會顯示含有簡短說明的工具提示。
「Learn more」連結會帶您前往該屬性的 MDN CSS 參考資料。
網路
本節列出自訂「網路」面板的選項。大部分選項與面板設定相同。
「Preserve log」與「Network」面板中的「Preserve log」相同。在載入網頁時儲存要求。
這部影片首先顯示重新載入網頁時，要求記錄會重新整理，然後在啟用這個選項時保留。
「Record network log」與「Network」面板中的
「Record network log」
「啟用網路要求封鎖功能」會封鎖與「網路要求封鎖」導覽匣中模式相符的要求。
這部影片首先顯示要求未遭到封鎖。啟用這個選項後，「網路要求封鎖」導覽匣中的模式就會封鎖這些要求。
允許產生含私密資料的 HAR：在「下載」「匯出 HAR」按鈕中新增選項，可選擇是否匯出私密資料 (已經過處理)。
機密資料是指 Cookie、Set-Cookie 和 Authorization 標頭中的資料。
「Color-code resource types」會根據網路記錄「Waterfall」欄中的要求類型，以不同顏色醒目顯示要求。
「依頁框將網路記錄分組」與「網路」面板中的「依頁框分組」
「強制在這個網站上封鎖廣告」：在開發人員工具開啟時，封鎖頁面上偵測到的廣告。
效能
本節列出自訂「Performance」面板的選項。
火焰圖滑鼠滾輪動作 
：在瀏覽火焰圖時，將捲動或縮放動作指派給滑鼠滾輪。
以下範例顯示在「Performance」面板的火焰圖中，捲動和縮放滑鼠滾輪動作。
控制台
本節列出自訂控制台的選項。大部分選項與「控制台設定」中的選項相同。
「Hide network messages」會隱藏控制台中的網路訊息。
和「控制台設定」
「Selected context only」：控制台只會顯示所選執行環境的訊息，包括 top、iframe、worker 或擴充功能。
「設定」和「控制台」>「設定」
「Log XMLHttpRequests」可讓「控制台」記錄 XHR 和擷取要求。
這部影片說明如何在「
設定」和「控制台」>「設定」中啟用這個選項，並將 XHR finished loading 訊息記錄到「控制台」。
「Show timestamps」可讓「Console」在訊息旁顯示時間戳記。
根據歷史記錄自動完成：控制台會根據您輸入的內容，建議先前執行過的指令。
「Accept autocomplete suggestion on Enter」：按下 Enter 鍵時，控制台會接受自動完成下拉式選單中選取的建議。
這部影片說明啟用這個選項前後，按下 Enter 鍵會發生什麼情況。
「Group similar messages in console」：讓「控制台」將類似訊息分組。
「在主控台中顯示 CORS 錯誤」：主控台會顯示記錄的 CORS 錯誤。
即時運算功能會在您輸入指令時，讓控制台顯示輸出內容預覽。
「將程式碼評估視為使用者動作」會將您在「控制台」中執行的任何指令轉換為使用者互動。
換句話說，系統會在評估時將 navigator.userActivation.isActive 設為 true。您也可以在「控制台」>「設定」中找到相同選項。
這部影片顯示啟用這個選項前後，navigator.userActivation.isActive 的評估結果。
「自動展開 console.trace() 訊息」：讓控制台在記錄 console.trace() 訊息時，顯示展開的訊息。
「Preserve log upon navigation」會讓「Console」在每次導覽時記錄 Navigated to 訊息，並儲存所有頁面的記錄。
額外資訊
本節列出的選項可自訂 Chrome 開發人員工具擴充功能的連結處理方式。
連結處理
：設定點選來源檔案連結時，要用來開啟檔案的選項，例如在「元素」>「樣式」窗格中。
保留設定
本節列出的選項可控管開發人員工具儲存變更的方式。
啟用本機覆寫功能後，開發人員工具會在載入網頁時，保留您對來源所做的變更。
詳情請參閱「本機覆寫」。
Debugger
本節列出控制偵錯工具行為的選項。
「停用 JavaScript」可讓您查看停用 JavaScript 時，網頁的外觀和行為。
重新載入頁面，查看網頁在載入時是否依賴 JavaScript，以及依賴的方式。
停用 JavaScript 時，Chrome 會在網址列顯示對應的 
圖示，開發人員工具則會在「來源」旁顯示警告 
圖示。
「停用非同步堆疊追蹤」會隱藏「呼叫堆疊」中非同步作業的「完整記錄」。
根據預設，如果使用的架構支援追蹤非同步作業，偵錯工具會嘗試追蹤這類作業。
詳情請參閱「查看非同步堆疊追蹤」。
全球
本節列出的選項會對開發人員工具產生全域影響。
自動為彈出式視窗開啟開發人員工具：點選會開啟新分頁的連結時，自動開啟開發人員工具。也就是所有包含 target=_blank 的連結。
這部影片首先示範如何「不使用」開發人員工具，點選連結並開啟新分頁。啟用這個選項後，新分頁就會「連同」開發人員工具一起開啟。
輸入時搜尋：DevTools 會在您輸入搜尋查詢時，「跳」到第一個搜尋結果。如果停用，只有在按下 Enter 鍵時，開發人員工具才會帶您前往結果。
這部影片首先展示 DevTools 如何在您輸入搜尋查詢時「跳轉」。啟用這個選項後，只要按下 Enter 鍵，開發人員工具就會帶您前往第一個結果。
同步處理
你可以在這個部分設定裝置間的同步處理。
「啟用設定同步」可讓您在多部裝置上同步 DevTools 設定。
如要使用這項設定，請先啟用 Chrome 同步功能。詳情請參閱「同步設定」。