本頁提供 Chrome 開發人員工具控制台相關功能的參考資料。本文假設您已熟悉如何使用主控台查看記錄訊息並執行 JavaScript。如果不是，請參閱開始使用。
如需 console.log() 等函式的 API 參考資料，請參閱 Console API 參考資料。如需 monitorEvents() 等函式的參考資料，請參閱 Console Utilities API 參考資料。
開啟控制台
開啟控制檯面板
按下 Control + Shift + J 鍵或 Command + Option + J 鍵 (Mac)。
如要透過「Command」選單開啟控制台，請先輸入 Console，然後執行標有「Panel」標記的「Show Console」指令。
在導覽匣中開啟控制台
按下 Escape 鍵，或按一下「自訂及控制開發人員工具」
，然後選取「顯示控制台導覽匣」。
「開發人員工具」視窗底部會彈出「導覽匣」分頁，
如要透過「Command」選單開啟「Cons」分頁，請開始輸入 Console，然後執行標有「Drawer」標記的「Show Console」指令。
開啟控制台設定
按一下控制台右上角的 ![[設定]。](https://developer.chrome.com/static/docs/devtools/console/reference/image/settings-15d0f4489b69f.svg?hl=zh-tw){kind=small}
「Console Settings」(控制台設定)。
各項設定的說明如下：
開啟控制台側欄
按一下「Show Console Sidebar」
即可顯示側欄，這有助於篩選。
查看訊息
本節包含的功能可變更訊息在控制台中的顯示方式。如需實作逐步操作說明，請參閱「查看訊息」。
停用訊息分組功能
開啟主控台設定並停用「類似群組」，停用主控台的預設訊息分組行為。如需範例，請參閱記錄 XHR 和擷取要求。
查看來自中斷點的訊息
控制台會以下列方式標示中斷點觸發的訊息：
如要跳至「來源」面板中的內嵌中斷點編輯器，請按一下中斷點訊息旁的錨定連結。
查看堆疊追蹤
控制台會自動擷取錯誤和警告的堆疊追蹤。堆疊追蹤是導致錯誤或警告的函式呼叫 (影格) 歷史記錄。控制台會反向排序：最新影格位於頂端。
如要查看堆疊追蹤，請按一下錯誤或警告旁邊的 
展開圖示。
查看非同步堆疊追蹤
如果您使用的架構支援，或直接使用瀏覽器排程基本功能 (例如 setTimeout) 支援，開發人員工具，就能將非同步程式碼的兩個部分互相連結，藉此追蹤非同步作業。
在這種情況下，堆疊追蹤會顯示非同步作業的「完整故事」。
在堆疊追蹤中顯示已知的第三方影格
根據預設，如果來源對應包含 ignoreList 欄位，Console 不會在堆疊追蹤 (例如 webpack) 或架構 (例如 Angular) 產生的來源中追蹤第三方影格。
如要查看完整的堆疊追蹤 (包括第三方頁框)，請按一下堆疊追蹤底部的「Show more frame」(顯示另外 N 個)。
如要一律查看完整的堆疊追蹤，請依序點選 ![[設定]。](https://developer.chrome.com/static/docs/devtools/console/reference/image/settings-0eb8492a23f31.svg?hl=zh-tw){kind=small}
「設定」 >「忽略清單」 >「自動新增已知的第三方指令碼以忽略清單」設定。
記錄 XHR 和擷取要求
開啟主控台設定並啟用 Log XMLHttpRequests，以便在發生時將所有 XMLHttpRequest 和 Fetch 要求記錄到控制台。
上例中的訊息顯示控制台的預設分組行為。以下範例說明在停用訊息分組功能之後，相同的記錄會如何。
在各網頁載入時保留訊息
根據預設，每次載入新頁面時，控制台都會清除。如要在載入網頁時保留訊息，請開啟主控台設定，然後勾選「Preserve Log」核取方塊。
隱藏網路訊息
根據預設，瀏覽器會將網路訊息記錄到「控制台」。例如，以下範例中的頂端訊息代表 404。
如何隱藏網路訊息：
- 開啟控制台設定。
- 勾選「隱藏網路」核取方塊。
顯示或隱藏 CORS 錯誤
如果網路要求因跨源資源共享 (CORS) 而失敗，控制台會顯示 CORS 錯誤。
如要顯示或隱藏 CORS 錯誤，請按照下列步驟操作：
- 開啟控制台設定。
- 勾選或取消勾選「在控制台中顯示 CORS 錯誤」核取方塊。
如果控制台設定為顯示 CORS 錯誤，您可以在錯誤旁按一下下列按鈕：
：在「Network」面板中，使用與 CORS 相關的 TypeError開啟要求。
，即可在「問題」分頁中取得潛在解決方案。
篩選訊息
在控制台中篩選訊息的方法很多。
篩除瀏覽器訊息
開啟主控台側欄，然後按一下「User Messages」，即可只顯示來自該頁面 JavaScript 的訊息。
依記錄層級篩選
開發人員工具會指派大部分的 console.* 方法嚴重性等級。
層級分為四種：
VerboseInfoWarningError
舉例來說，console.log() 位於 Info 群組中，而 console.error() 則在 Error 群組中。Console API 參考資料說明每個適用方法的嚴重性等級。
瀏覽器記錄到控制台的每則訊息都有嚴重性等級。您可以隱藏自己不感興趣的郵件層級。舉例來說，如果您只想查看 Error 訊息，可以隱藏另外 3 個群組。
按一下「Log Levels」下拉式選單，即可啟用或停用 Verbose、Info、Warning 或 Error 訊息。
您也可以開啟主控台側欄，然後按一下「Errors」、「Warnings」、「Info」或「Verbose」，依記錄層級進行篩選。
依網址篩選訊息
輸入 url: 後加上網址，即可單獨查看來自該網址的訊息。輸入「url:」後，開發人員工具會顯示所有相關網址。
網域也適用。舉例來說，如果 https://example.com/a.js 和 https://example.com/b.js 是記錄訊息，url:https://example.com 可讓您專注於來自這 2 個指令碼的訊息。
如要隱藏來自指定網址的所有訊息，請輸入 -url:，後面接著特定網址，例如 https://b.wal.co。這是排除網址篩選器。
您也可以開啟主控台側欄，展開「User Messages」部分，然後按一下包含要聚焦訊息的指令碼網址，顯示來自單一網址的訊息。
濾除不同情境的訊息
假設您的網頁上出現了廣告，廣告內嵌在 <iframe> 中，並會在您的主控台中產生大量訊息。由於這則廣告位於不同的 JavaScript 內容，因此隱藏訊息的方法之一是開啟主控台設定，然後勾選「僅限所選內容」核取方塊。
過濾不符合規則運算式模式的郵件
在「Filter」(篩選器) 文字方塊中輸入規則運算式，篩除所有不符合該模式的訊息。/[foo]\s[bar]/系統不支援聊天室，請改用 \s。開發人員工具會檢查是否在訊息文字或導致系統記錄訊息的指令碼中找到模式。
舉例來說，以下篩選器會排除所有不符合 /[gm][ta][mi]/ 的郵件。
![篩除任何與 /[gm][ta][mi]/ 不符的郵件。](https://developer.chrome.com/static/docs/devtools/console/reference/image/filtering-any-messages-82d76b2bac549.png?hl=zh-tw)
搜尋記錄中的文字
如何搜尋記錄訊息中的文字：
- 如要開啟內建搜尋列，請按下 Command + F 鍵 (Mac) 或 Ctrl + F 鍵 (Windows、Linux)。
- 在導覽列中輸入查詢內容。在這個範例中，查詢為
legacy。
或者，你可以：
- 按一下
「比對大小寫」，讓查詢區分大小寫。 - 按一下
「使用規則運算式」，即可使用規則運算式運算式搜尋。
- 按一下
- 按下 Enter 鍵。如要跳至上一個或下一個搜尋結果，請按向上或向下按鈕。
執行 JavaScript
本節包含在控制台中執行 JavaScript 的功能。如需實作逐步操作說明，請參閱「執行 JavaScript」。
字串複製選項
控制台預設會將字串輸出為有效的 JavaScript 常值。在輸出項目上按一下滑鼠右鍵，然後選擇三個複製選項：
- 複製為 JavaScript 常值。逸出適當的特殊字元，並根據內容，以單引號、雙引號或倒引號括住字串。
- 複製字串內容。將確切的原始字串複製到剪貼簿，包括換行符號和其他特殊字元。
- 複製為 JSON 常值。將字串格式設為有效的 JSON。
從記錄重新執行運算式
按下「向上鍵」鍵，即可瀏覽您先前在控制台中執行的 JavaScript 運算式記錄。按下 Enter 鍵即可再次執行該運算式。
透過即時運算式即時觀察運算式的值
如果您在主控台中重複輸入相同的 JavaScript 運算式，建立「Live Expression」可能會更簡單。透過「Live Expressions」，您可以輸入一次運算式，然後將其固定在主控台頂端。運算式的值幾乎即時更新。請參閱「透過即時運算式即時觀察 JavaScript 運算式值」。
停用 Eager 評估功能
在主控台中輸入 JavaScript 運算式時，Eager Evaluation 會顯示該運算式傳回值的預覽畫面。開啟主控台設定並停用「Eager Evaluation」核取方塊，即可關閉回傳值預覽功能。
評估時觸發使用者啟動作業
「使用者啟用」是指瀏覽工作階段的狀態 (取決於使用者動作)。「有效」狀態表示使用者目前正在與網頁互動，或在網頁載入後進行互動。
如要在任何評估時觸發使用者啟動作業，請開啟主控台設定，然後勾選 
[評估觸發條件使用者啟動程序]。
停用歷史記錄的自動完成功能
當您輸入運算式時，主控台的自動完成彈出式視窗會顯示您稍早執行的運算式。這些運算式的前面會加上 > 字元。在以下範例中，開發人員工具先前評估了 document.querySelector('a') 和 document.querySelector('img')。
開啟主控台設定並停用「Autocomplete From History」核取方塊，即可停止顯示記錄中的運算式。
選取 JavaScript 內容
根據預設，「JavaScript Context」下拉式選單會設為 top，代表主要文件的瀏覽情境。
假設網頁中有內嵌於 <iframe> 的廣告。您想執行 JavaScript 來調整廣告的 DOM如要這麼做，您必須先從「JavaScript 內容」下拉式選單中選取廣告的瀏覽情境。
檢查物件屬性
控制台可以顯示您指定的 JavaScript 物件屬性互動式清單。
如要瀏覽清單，請在控制台中輸入物件名稱，然後按下 Enter 鍵。
如要檢查 DOM 物件的屬性，請按照「查看 DOM 物件屬性」一文的步驟操作。
Spot 自有和繼承的資源
Console 會先排序自己的物件屬性，再以粗體強調這些屬性。
從原型鏈結沿用的屬性皆為一般字型。Console 會評估內建物件的對應原生存取子，在物件本身顯示這些物件。
評估自訂存取子
根據預設，開發人員工具不會評估您建立的存取者。
如要評估物件的自訂存取子，請按一下 (...)。
Spot 列舉和非列舉屬性
列舉屬性的顏色鮮明。不會列舉不可列舉的屬性。
列舉屬性可以使用 for … in 迴圈或 Object.keys() 方法疊代。
類別執行個體的 Spot 不公開屬性
即使您在評估類別範圍外，控制台也可以自動完成私人屬性。
檢查內部 JavaScript 屬性
Console 也可以藉用 ECMAScript 標記法，以雙方括號括住 JavaScript 內部的部分屬性。您無法在程式碼中與這類屬性互動。不過，建議你檢查一下。
各種物件可能會顯示下列內部屬性：
- 所有物件都有
[[Prototype]]。
- 原始包裝函式具有
[[PrimitiveValue]]屬性。
ArrayBuffer物件包含下列屬性：- 除了
ArrayBuffer專屬的屬性外，WebAssembly.Memory物件也包含[[WebAssemblyMemory]]屬性。
- 索引鍵集合 (地圖和組合) 的
[[Entries]]屬性包含對應的鍵項目。
Promise物件包含下列屬性：[[PromiseState]]：待處理、已完成或遭拒[[PromiseResult]]：undefined表示待處理，<value>如已完成，<reason>遭拒時超過
Proxy物件具有下列屬性：[[Handler]]物件、[[Target]]物件和[[isRevoked]](無論是否關閉)。
檢查函式
在 JavaScript 中，函式也是具有屬性的物件。不過，如果您在控制台中輸入函式名稱，開發人員工具會呼叫該函式，而不會顯示其屬性。
如要查看 JavaScript 內部的函式屬性，請使用 console.dir() 指令。
函式具有以下屬性：
[[FunctionLocation]]：來源檔案中含有函式定義的行連結。[[Scopes]]：列出函式可存取的值和運算式。如要在偵錯期間檢查函式範圍，請參閱「查看及編輯本機、封閉和全域屬性」一文。- 繫結函式具備下列屬性：
[[TargetFunction]]。bind()的目標。[[BoundThis]]。this的值。[[BoundArgs]]。函式引數的陣列。
- 產生器函式會標示
[[IsGenerator]]: true屬性。
- 產生器會傳回疊代器物件，且具有下列屬性：
[[GeneratorLocation]]：來源檔案中含有產生器定義的行連結。[[GeneratorState]]：suspended、closed或running.[[GeneratorFunction]]：傳回物件的產生器。[[GeneratorReceiver]]：接收值的物件。
清除控制台
您可以使用下列任一工作流程清除控制台畫面：
- 按一下「Clear Console」(清除主控台)
。 - 在訊息上按一下滑鼠右鍵，然後選取「清除控制台」。
- 在主控台中輸入
clear()，然後按下 Enter 鍵。 - 從網頁的 JavaScript 呼叫
console.clear()。 - 在控制台處於焦點時，按下 Control + L 鍵。