如要設定開發人員工具及其面板的外觀和行為,請「設定」 >「偏好設定」。這個分頁會列出一般自訂選項以及特定面板專用的選項。
如要調整偏好設定,請開啟 「設定」 >「偏好設定」,然後捲動至下列任一部分。
如要瞭解各項設定的用途,請在這個頁面搜尋設定名稱,然後 add_circle 展開說明。
此參考資料代表具有以下圖示的不同設定:
核取方塊
- 下拉式清單
已淘汰
如要還原預設偏好設定,請捲動至「偏好設定」分頁底部,然後按一下「還原預設值並重新載入」。
外觀
本節列出自訂開發人員工具外觀的選項。
「Themes」
可設定開發人員工具 UI 的顏色主題。
「Panel layout」
會在面板中排列窗格。
影響「Elements」(元素) >「Styles」(樣式) 和「Sisters」分頁,以及「Sources」(來源) >「Debugger」(偵錯工具) 窗格。[auto] 選項會讓版面配置取決於開發人員工具的寬度。
「Language」
可設定開發人員工具 UI 的語言代碼。
如要套用這項設定,請重新載入開發人員工具。
啟用 Ctrl/Cmd + 0-9 快速鍵切換面板可讓您透過鍵盤開啟面板。
這部影片說明如何使用對應的鍵盤快速鍵切換分頁。
停用暫停狀態重疊:程式碼暫停執行時,在可視區域中隱藏「已暫停在偵錯工具中暫停」
重疊。
每次更新後顯示新功能:每次 Chrome 更新後,都會自動開啟「新功能」導覽匣分頁。
![「新功能」導覽匣分頁,](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-s-drawer-tab-284de1eb4dca3.png?authuser=3&hl=zh-tw)
來源
本節列出自訂「來源」面板的選項。
使用「搜尋」分頁搜尋所有載入的 JavaScript 檔案和 JavaScript 檔案,包括 Chrome 擴充功能的檔案。
這部影片說明如何搜尋擴充功能來源檔案中的文字。
在「編輯器」中切換分頁時,選取「Sources」(來源) >「Page」(頁面) 窗格中的檔案。自動顯示側欄中的檔案。
本影片說明啟用這個選項後,「Sources」面板如何在切換分頁時從導覽樹狀結構中選取檔案。
啟用 JavaScript 來源對應可讓開發人員工具尋找產生或壓縮 JavaScript 檔案的來源。
![「來源」面板會在狀態列中顯示壓縮後檔案的連結。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-sources-panel-shows-18a5986aebe76.png?authuser=3&hl=zh-tw)
「啟用 Tab 鍵移動焦點」是讓
Tab 鍵在開發人員工具中移動焦點,而不是在編輯器中插入 Tab 字元。
必須重新載入開發人員工具。
這部影片首先顯示使用 Tab 鍵插入的 Tab 字元。啟用這個選項並重新載入開發人員工具後,按下 Tab 鍵可移動焦點。
「偵測縮排」會將縮排設為來源檔案中已在編輯器中開啟的縮排。
必須重新載入開發人員工具。
這部影片會先顯示 8 個空格的預設縮排。啟用這個選項後,就會覆寫來源檔案的預設縮排設定。
自動完成功能會在編輯器中啟用實用建議。
這部影片一開始並未顯示任何建議。啟用此選項時,「編輯器」會顯示指令完成的建議。
自動括號關閉功能會在您輸入開頭的括弧或標記時,自動加入右括號或標記。
這部影片示範了在啟用自動括號關閉前後輸入左括號的內容。
「編輯器」中的「括號比對」會以底線和「淺紅色」標示,代表沒有組合的方括號、大括號或括號。
![大括號,沒有成對的紅色底線。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/a-curly-bracket-without-39b53417db5f3.png?authuser=3&hl=zh-tw)
程式碼折疊可讓您在編輯器中,以大括號折疊及展開程式碼區塊。
必須重新載入開發人員工具。
這部影片說明如何在啟用這個選項時折疊程式碼區塊。
顯示空白字元
會在編輯器中顯示空白字元。
必須重新載入開發人員工具。以下是可用選項:
- All 將所有空白字元表示為點 (
...
)。此外,編輯器會將 Tab 字元以一行 (—
) 表示。 - 軌跡會醒目顯示行末的淺紅色空白字元。
在偵錯時以內嵌方式顯示變數值,系統會在執行作業暫停時,在指派陳述式旁邊顯示變數值。
![在函式執行期間暫停偵錯工具,會在指派陳述式旁邊顯示變數值。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-debugger-paused-durin-7df9450bef37b.png?authuser=3&hl=zh-tw)
觸發中斷點時聚焦來源面板,在含有已暫停執行作業的中斷點那一行,開啟「Sources」 >「Editor」。
這部影片會先在中斷點暫停時,顯示「Sources」面板失焦。啟用這個選項後,開發人員工具會在「Sources」面板中開啟「編輯器」,並顯示包含中斷點的程式碼行。
自動美化列印壓縮後的來源,可讓這些來源清晰易讀。
正確列印時,編輯器可能會多行顯示一行一長程式碼,前面加上 -
,表示這是一行連續。
![「來源」面板中的精美程式碼。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/pretty-print.png?authuser=3&hl=zh-tw)
啟用 CSS 來源地圖可讓開發人員工具找出所產生 CSS 檔案 (例如 .scss
) 的來源,並向您顯示這些檔案。
![「來源」面板會在樹狀導覽結構的「已編寫」部分中顯示 .scss 檔案。「元素」面板的「樣式」窗格會在 CSS 規則旁邊顯示 .scss 來源的連結。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-sources-panel-shows-e421484c90f24.png?authuser=3&hl=zh-tw)
「允許捲動範圍超出檔案結尾」可讓您捲動超出編輯器中的最後一行。
這部影片會說明如何在啟用這個選項後,捲動超過檔案結尾。
允許開發人員工具從遠端檔案路徑載入來源對應等資源。基於安全考量,預設為停用。
如未停用,開發人員工具會記錄與下列內容類似的「Console」訊息:
![Play 管理中心會顯示訊息,說明基於安全考量,使用者不得從遠端檔案路徑載入內容。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/a-message-the-console-in-052f2c13b3dc.png?authuser=3&hl=zh-tw)
「預設縮排」
可讓您在編輯器中,使用
Tab 鍵插入空格數。
這個範例說明如何將預設縮排設定為八個空格,再設定為 Tab 字元。
元素
本節列出自訂「元素」面板的選項。
「顯示使用者代理程式陰影 DOM」會在 DOM 樹狀結構中顯示陰影 DOM 節點。
![「元素」面板顯示陰影 DOM 節點。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-elements-panel-shows-088126d24e216.png?authuser=3&hl=zh-tw)
「文字換行」會在 DOM 樹狀結構中打斷長行,並自動換行到下一行。
![「元素」面板會逐字換行,並在下一行顯示內容。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-elements-panel-breaks-8f610414be113.png?authuser=3&hl=zh-tw)
「顯示 HTML 註解」會在 DOM 樹狀結構中顯示 HTML 註解。
![「Elements」面板會顯示 HTML 註解。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-elements-panel-shows-69db5e051bcd3.png?authuser=3&hl=zh-tw)
在
檢查模式中,將滑鼠遊標懸停在可視區域中的元素上時,「懸停顯示 DOM 節點」會選取 DOM 樹狀結構中的對應節點。
首先,這部影片顯示在 DOM 樹狀結構中未選取 DOM 節點。啟用這個選項後,「元素」面板就會在遊標懸停時選取節點。
顯示詳細的檢查工具工具提示 當你將滑鼠遊標懸停在元素上時,可視區域在
檢查模式中顯示工具提示。
![檢查模式中顯示的詳細工具提示。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-detailed-tooltip-show-28d3aa44e33a2.png?authuser=3&hl=zh-tw)
「懸停顯示尺規」即可在 DOM 樹狀結構中的元素上,顯示可視區域中的尺規。
![可視區域內顯示的尺規。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/rulers-shown-viewport-ae8f481c23e7e.png?authuser=3&hl=zh-tw)
當您在「Styles」窗格中將滑鼠遊標懸停在屬性上時,「顯示 CSS 說明文件工具提示」會顯示工具提示,並提供簡短說明。
「瞭解詳情」連結會提供該資源的 MDN CSS 參考資料。
![提供 CSS 屬性說明文件的工具提示。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-tooltip-documentatio-7c33fb7ae9d4e.png?authuser=3&hl=zh-tw)
網路
本節列出自訂「網路」面板的選項。大部分選項都與面板設定中的選項相同。
「Preserve log」(保留記錄) 與「Network」(網路) 面板中的「Preserve log」(保留記錄) 相同。在網頁載入期間儲存要求。
這部影片會先顯示頁面重新載入時重新整理的要求記錄,並在您啟用這個選項後保留。
「啟用網路要求封鎖功能」會封鎖「網路要求封鎖」導覽匣中符合模式的要求。
這部影片起初顯示要求未遭到封鎖。啟用這個選項後,「網路要求封鎖」導覽匣中的模式就會封鎖。
色彩代碼資源類型會根據網路記錄「Waterfall」欄中的類型,以不同顏色醒目顯示要求。
![「網路」分頁上的「刊登序列」欄,沒有加上顏色的標記。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-waterfall-column-the-c3f0d296db17e.png?authuser=3&hl=zh-tw)
在這個網站上強制執行廣告封鎖功能,會在開發人員工具開啟時封鎖網頁上的偵測到的廣告。
![「聯播網」面板中顯示與廣告相關的聯播網請求,並啟用「封鎖的要求」篩選器。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/an-ad-related-network-req-3e1c284d89cd5.png?authuser=3&hl=zh-tw)
效能
本節列出自訂「效能」面板的選項。
Flamechart 滑鼠滾輪動作
可在您導覽火焰圖時,為滑鼠滾輪指派捲動或縮放動作。
這個範例顯示「Performance」面板的火焰圖的捲動和縮放滑鼠滾輪動作。
控制台
本節列出自訂主控台的選項。大部分選項都和「Console 設定」中的相同。
「隱藏網路訊息」會在控制台中隱藏網路訊息。
這部影片說明如何在 的「設定」和「主控台設定」中,使用這個選項隱藏網路訊息。
「僅限所選內容」會讓「Console」只顯示所選結構定義的訊息:頂端、iframe、工作站或擴充功能。
這部影片說明如何在 的「設定」及「管理中心」>「設定」中同時啟用這個選項,並在主控台中選取相關內容。
「Log XMLHttpRequests」會產生「Console」記錄 XHR 並擷取要求。
這部影片說明如何在 的「設定」和「主控台」>「設定」中同時啟用這個選項,並將
XHR finished loading
訊息記錄到控制台。
「顯示時間戳記」可讓「主控台」在訊息旁邊顯示時間戳記。
![控制台中列出時間戳記的訊息。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/messages-timestamps-list-040be725ea68b.png?authuser=3&hl=zh-tw)
按下 Enter 鍵後接受自動完成建議,當您按下 Enter 鍵時,Console 就會接受自動完成下拉式選單中出現的所選建議。
這部影片說明瞭啟用這個選項前後,按下 Enter 鍵後會發生什麼事。
在主控台中顯示 CORS 錯誤會讓「控制台」顯示系統記錄的 CORS 錯誤。
您也可以在「Console」(管理) >「Settings」(設定) 找到相同選項。
![控制台會顯示 CORS 錯誤。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/console-shows-cors-errors-57f9bea2680a4.png?authuser=3&hl=zh-tw)
「將程式碼評估視為使用者動作」會將您在控制台中執行的任何指令轉成使用者互動。
換句話說,在評估時將 navigator.userActivation.isActive
設為 true
。您也可以在「Console」(管理) >「Settings」(設定) 找到相同選項。
這部影片說明啟用此選項前後的 navigator.userActivation.isActive
評估結果。
自動展開 console.trace() 訊息會在記錄這些訊息時,顯示展開的 console.trace()
訊息。
![控制台中展開的 console.trace() 訊息。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/an-expanded-consoletrace-a083a714be536.png?authuser=3&hl=zh-tw)
在瀏覽時保留記錄,這樣「Console」會在每次瀏覽時記錄 Navigated to
訊息,並儲存所有頁面的記錄檔。
您也可以在「Console」(管理) >「Settings」(設定) 找到相同選項。
![控制台會顯示「已導覽」的訊息,並將記錄儲存在不同頁面。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-console-shows-naviga-f4bc36001187f.png?authuser=3&hl=zh-tw)
延伸
本節列出自訂 Chrome 開發人員工具擴充功能的連結處理方式。
「連結處理」
可設定在您點選來源檔案連結 (例如進入「Elements」 >「Styles」窗格) 時開啟檔案的選項。
保留設定
本節列出可控制開發人員工具儲存您變更方式的選項。
啟用本機覆寫設定後,開發人員工具就會在網頁載入時持續保留您對來源所做的變更。
詳情請參閱本機覆寫。
Debugger
本節列出控制 Debugger 行為的選項。
「停用 JavaScript」可讓您查看 JavaScript 停用後的網頁外觀和行為。
重新載入頁面,看看網頁在載入時是否需要使用 JavaScript,以及這類情形。
如果停用 JavaScript,Chrome 會在網址列中顯示對應的 圖示,開發人員工具會在「來源」旁邊顯示警告
圖示。
![網址列中的圖示和開發人員工具中的「來源」旁邊顯示警告圖示。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/an-icon-the-address-bar-92ceba2ae707c.png?authuser=3&hl=zh-tw)
「停用非同步堆疊追蹤」會隱藏「Call Stack」非同步作業的「完整故事」。
如果您使用的架構支援這類追蹤,Debugger 預設會嘗試追蹤非同步作業。
![Call Stack 中的非同步作業。](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-async-operation-the-7d1209cb7afdd.png?authuser=3&hl=zh-tw)
詳情請參閱「查看非同步堆疊追蹤」。
全球
本節列出在開發人員工具中加入全域效果的選項。
自動開啟彈出式視窗的開發人員工具:當您點選用於開啟新分頁的連結時,系統會開啟開發人員工具。換句話說,所有與 target=_blank
的連結。
這部影片首先說明如何點選連結,並在 *不使用* 開發人員工具的情況下開啟新分頁。啟用這個選項後,系統會*開啟「開發人員工具」的新分頁。
即時搜尋:在您輸入搜尋查詢時,開發人員工具可以「跳轉」到第一個搜尋結果。如果停用,開發人員工具只有在你按下 Enter 鍵時才會顯示結果。
首先,這部影片會說明開發人員工具在輸入搜尋查詢時,如何「快速跳動」。啟用這個選項後,當您按下 Enter 鍵,開發人員工具就會將您導向第一個搜尋結果。
同步
這個部分可讓您指定裝置之間的設定同步處理作業。
啟用設定同步功能即可在多部裝置上同步處理開發人員工具設定。
如要使用這項設定,請先啟用 Chrome 同步功能。詳情請參閱「同步處理設定」。