偏好設定

「Themes」 會為開發人員工具 UI 設定色彩主題。

主題：

• 系統偏好設定
• 淺色
• 深色

面板版面配置 會在面板中排列窗格。

影響範圍為「Elements」(元素) >「Styles」(樣式) 與「姊妹」分頁，以及「Sources」>「Debugger」窗格。auto 選項會讓版面配置取決於開發人員工具的寬度。

面板版面配置：

• 橫向
• 直向
• 自動

Language 可設定開發人員工具 UI 的語言代碼。

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

語言：

• 瀏覽器 UI 語言
• 其中一個地區選項 (在本例中為中文)

啟用 Ctrl/Cmd + 0-9 快速鍵切換面板，即可使用鍵盤開啟面板。

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

「停用暫停狀態重疊」功能會在暫停執行程式碼時，隱藏可視區域中的「已在偵錯工具中暫停」 疊加層。

每次更新 Chrome 後，[顯示新功能] 就會自動開啟「新功能」導覽匣分頁。

在匿名指令碼和內容指令碼中搜尋：您可以使用「搜尋」分頁搜尋所有已載入的 JavaScript 檔案，包括 Chrome 擴充功能中的檔案。

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

「自動在側欄中顯示檔案」：當您在「編輯器」中切換分頁時，系統會在「來源」>「頁面」窗格中選取檔案。

這部影片說明如何在啟用這個選項後，在切換分頁時，來源面板會如何選取導覽樹狀結構中的檔案。

啟用 JavaScript 來源對應可讓開發人員工具尋找產生的或經過精簡的 JavaScript 檔案來源。

「啟用透過 Tab 鍵移動焦點」：讓 Tab 鍵在 DevTools 中移動焦點，而不是在編輯器中插入 Tab 字元。

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

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

「偵測縮排」：將來源檔案縮排設為在編輯器中開啟的來源檔案縮排。

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

這部影片會先顯示預設的八個空格縮排。接著，當您啟用這個選項時，系統會將預設縮排值覆寫為來源檔案的縮排值。

自動完成功能可在編輯器中提供實用的建議。

這部影片一開始沒有任何建議。然後，當您啟用這個選項時，「Editor」會顯示指令完成的建議。

「自動加上右括號」：在您輸入左括號時，系統會自動加上右括號或標記。

這部影片展示了啟用自動括弧前後的右括號功能。

在「Editor」中，正方形括號、大括號或括號 (沒有配對的括號) 會以底線和淺紅色標示底線和醒目顯示。

程式碼摺疊功能可讓您在編輯器中以大括號摺疊及展開程式碼區塊。

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

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

顯示空白字元 會在編輯器中顯示空白字元。

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

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

顯示空白字元：

• 無
• 全部 (...)
• Trailing

「在偵錯時顯示內嵌變數值」會在執行作業暫停時，顯示變數值旁的指定陳述式。

在觸發中斷點時聚焦「來源」面板會在暫停執行的中斷點所在的程式碼行開啟「來源」>「編輯器」。

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

自動針對壓縮過的來源套用美化排版，讓這些來源更容易閱讀。

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

啟用 CSS 來源對應：開發人員工具可找出產生的 CSS 檔案來源 (例如 .scss)，並顯示給您。

「允許捲動超過檔案結尾」選項可讓您在編輯器中進一步捲動畫面。

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

允許開發人員工具透過遠端檔案路徑載入來源對應等資源。出於安全考量，系統預設會停用這項設定。

如果停用這項政策，開發人員工具會記錄主控台的訊息，如下所示：

您可以使用預設縮排 選擇 Tab 鍵在編輯器中插入的空格數量。

預設縮排：

• 2 個聊天室
• 4 個空格
• 8 個聊天室
• 定位字元

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

顯示使用者代理程式 shadow DOM 會在 DOM 樹狀結構中顯示 shadow DOM 節點。

換行會在 DOM 樹狀結構中換行長行，並換行到下一行。

「Show HTML comments」會在 DOM 樹狀結構中顯示 HTML 註解。

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

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

「顯示詳細檢查結果工具提示」會在您將滑鼠遊標懸停在元素上時，在 檢查模式的可視區域中顯示工具提示。

「懸停時顯示尺規」：當滑鼠游標懸停在 DOM 樹狀結構中的元素時，會在檢視區顯示尺規。

「顯示 CSS 說明文件」工具提示，當您將遊標懸停在「樣式」窗格中的屬性時，系統會顯示工具提示及簡短說明。

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

「保留記錄」與「網路」面板中的「保留記錄」 相同。在各網頁載入時儲存要求。

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

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

啟用網路要求封鎖功能：封鎖與「網路要求封鎖」頁面中模式相符的要求。

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

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

「允許產生含有機密資料的 HAR 檔案」「匯出 HAR」按鈕新增選項，讓您無論匯出或不需使用機密資料 (經過清理處理)。

機密資料是指 Cookie、Set-Cookie 和 Authorization 標頭中的資料。

顏色代碼資源類型會根據網路記錄中的瀑布圖欄，以不同顏色標示要求。

「依頁框將網路記錄分組」與「網路」面板中的「依頁框分組」相同。這個選項會將內嵌影格啟動的要求分組。

在這個網站上強制封鎖廣告，在開發人員工具開啟時，封鎖網頁上的偵測到的廣告。

Flamechart 滑鼠滾輪動作 會在您瀏覽火焰圖時，將捲動或縮放動作指派給滑鼠滾輪。

火焰圖的滑鼠滾輪動作：

• 捲動
• 縮放

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

「隱藏網路訊息」會在控制台中隱藏網路訊息。

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

僅限已選取的內容：控制台只會針對已選取的內容 (頂層、iframe、worker 或擴充功能) 顯示訊息。

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

「Log XMLHttpRequests」會發出「Console」記錄 XHR 及擷取要求。

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

「顯示時間戳記」可讓「控制台」在訊息旁顯示時間戳記。

根據記錄自動完成：主控台會在您輸入字詞時建議您先前執行過的指令。

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

按下 Enter 鍵後，按下 Enter 鍵接受自動完成建議後，「Console」就會從自動完成下拉式選單中接受所選建議。

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

在控制台中將類似的訊息分組，可讓「控制台」將類似的訊息歸為一組。

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

在主控台中顯示 CORS 錯誤，讓控制台顯示其記錄的 CORS 錯誤。

您可以在「管理中心」>「設定」找到相同選項。

即刻評估功能可讓控制台在您輸入指令時顯示輸出內容的預覽畫面。

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

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

將程式碼評估視為使用者動作，可將您在主控台中執行的任何指令轉化為使用者互動。

換句話說，在評估時，它會將 navigator.userActivation.isActive 設為 true。您可以在「管理中心」>「設定」找到相同選項。

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

如果選擇自動展開 console.trace() 訊息，控制台會在記錄時顯示展開的 console.trace() 訊息。

Preserve log upon navigation 會在每次導覽時記錄 Console 的 Navigated to 訊息，並儲存所有頁面的記錄。

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

連結處理 會設定選項，用於在您按一下來源檔案的連結時開啟檔案，例如在「Elements」>「Styles」窗格中。

連結處理：

• 自動、預設會在「來源」面板中開啟檔案。
• 可由 DevTools 擴充功能新增的任意選項。

啟用本機覆寫值：讓開發人員工具在各網頁載入時保留您對來源所做的變更。

詳情請參閱本機覆寫。

「停用 JavaScript」可讓您查看網頁在停用 JavaScript時的顯示方式和行為。

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

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

停用非同步堆疊追蹤：隱藏 Call Stack 中非同步作業的「完整故事」。

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

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

自動為彈出式視窗開啟開發人員工具後，當您點選開啟新分頁的連結時，就會開啟開發人員工具。也就是所有與 target=_blank 相關的連結。

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

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

這部影片首先會示範在您輸入搜尋查詢時，DevTools 如何「跳轉」。啟用這個選項後，當您按下 Enter 鍵時，開發人員工具就會前往第一筆結果。

啟用設定同步功能：可讓您在多部裝置上同步 DevTools 設定。

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