主控台功能參考資料

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

本頁為 Chrome 開發人員工具控制台的相關功能參考資料。本文假設您已熟悉如何使用主控台查看記錄訊息並執行 JavaScript。如果沒有，請參閱「開始使用」。

如需 console.log() 等函式的 API 參考資料，請參閱 Console API 參考資料。如需 monitorEvents() 等函式的參考資料，請參閱 Console Utilities API 參考資料。

開啟控制台

您可以透過面板或導覽匣中的分頁開啟控制台。

開啟控制檯面板

按下 Control + Shift + J 鍵，或 Command + Option + J 鍵 (Mac)。

控制台。

如要從「Command Menu」(指令選單) 開啟控制台，請開始輸入 Console 並執行「Show Console」指令，這個指令旁邊有「Panel」徽章。

顯示主控檯面板的指令。

在導覽匣中開啟控制台

按下 Escape 鍵或點選「Customize And Control DevTools」自訂及控制開發人員工具。，然後選取「Show Console Drawer」。

顯示主控台導覽匣。

「Drawer」會彈出「開發人員工具」視窗的底部，並顯示「Console」分頁。

導覽匣中的「Console」分頁。

如要從「Command menu」開啟「Console」分頁，請開始輸入 Console，並執行「Show Console」指令，旁邊有「Drawer」徽章。

在導覽匣中顯示「Console」分頁的指令。

開啟控制台設定

按一下主控台右上角的 [設定]。「Console Settings」(控制台設定)。

控制台設定。

下方連結說明各項設定：

按一下「Show Console Sidebar」圖示 顯示控制台側欄。 以顯示實用的側欄，方便篩選。

控制台側欄。

查看訊息

本節所含的功能可在控制台中變更訊息的呈現方式。如需逐步操作說明，請參閱「查看訊息」一節。

停用訊息分組功能

開啟主控台設定並停用「類似群組」，以停用主控台的預設訊息群組行為。如需範例，請參閱記錄 XHR 和 擷取要求。

查看來自中斷點的訊息

Console 會以下列方式標記中斷點觸發的訊息：

控制台會標記條件中斷點和記錄點建立的訊息。

如要跳到「Sources」面板中的內嵌中斷點編輯器，請按一下中斷點訊息旁邊的錨點連結。

查看堆疊追蹤

控制台會自動擷取錯誤和警告的堆疊追蹤。堆疊追蹤是指引發錯誤或警告的函式呼叫 (框架) 歷史記錄。控制台會以反向順序顯示這些影格：最新的影格位於頂端。

如要查看堆疊追蹤，請按一下錯誤或警告旁邊的 展開。 展開圖示。

堆疊追蹤。

查看堆疊追蹤中的錯誤原因

控制台可顯示堆疊追蹤中的「錯誤原因」鏈結 (如果有的話)。

為方便偵錯，您可以在擷取及擲回錯誤時指定錯誤原因。Console 推理原因時，會輸出每個錯誤堆疊並附上 Caused by: 前置字元，方便您找出原始錯誤。

錯誤鏈結在堆疊追蹤中前面會加上「Caused by:」字樣。

查看非同步堆疊追蹤

如果您目前使用的架構支援，或直接使用瀏覽器排程基本功能 (例如 setTimeout)，開發人員工具就能追蹤非同步作業的兩個部分，藉此追蹤非同步作業。

在本例中，堆疊追蹤會顯示非同步作業的「完整故事」。

非同步堆疊追蹤。

在堆疊追蹤中顯示已知的第三方影格

根據預設，當來源對應包含 ignoreList 欄位時，Console 會從堆疊追蹤 (例如 webpack) 或架構 (例如 Angular) 產生的來源，從堆疊追蹤隱藏第三方影格。

如要查看包含第三方影格的完整堆疊追蹤，請按一下堆疊追蹤底部的「Show N 個框架」。

顯示另外 N 個頁框。

如要一律查看完整堆疊追蹤，請停用 [設定]。「設定」 >「忽略清單」 >「自動新增已知的第三方指令碼以忽略清單」設定。

自動新增已知的第三方指令碼以忽略清單。

記錄 XHR 和 Fetch 請求

開啟主控台設定並啟用「Log XMLHttpRequests」，將所有 XMLHttpRequest 和 Fetch 要求記錄到主控台。

記錄 XMLHttpRequest 和 Fetch 要求。

上方範例頂端的訊息顯示控制台的預設分組行為。以下範例顯示了停用訊息分組後的相同記錄外觀。

記錄的 XMLHttpRequest 和 Fetch 要求在取消分組後的外觀。

在載入網頁時保留訊息

根據預設，每當您載入新頁面時，控制台都會清除。如要在載入頁面時保留訊息，請開啟控制台設定，然後勾選「Preserve Log」核取方塊。

隱藏網路訊息

根據預設，瀏覽器會將網路訊息記錄至控制台。例如，以下範例中的熱門訊息代表 404。

控制台顯示 404 訊息。

如要隱藏網路訊息：

  1. 開啟控制台設定。
  2. 勾選「隱藏網路」核取方塊。

顯示或隱藏 CORS 錯誤

如果因跨來源資源共用 (CORS) 而導致網路要求失敗，控制台可能會顯示 CORS 錯誤。

如何顯示或隱藏 CORS 錯誤：

  1. 開啟控制台設定。
  2. 勾選或取消勾選「在主控台中顯示 CORS 錯誤」核取方塊。

在控制台中顯示 CORS 錯誤。

如果控制台設定為顯示 CORS 錯誤，您可以點選錯誤旁的按鈕：

網路和問題按鈕。

篩選訊息

您可以在控制台中透過多種方式篩選郵件。

篩選瀏覽器訊息

開啟主控台側欄，然後按一下「User Messages」(使用者訊息)，即可只顯示來自頁面 JavaScript 的訊息。

查看使用者訊息。

依記錄層級篩選

開發人員工具會指派大部分的 console.* 方法嚴重性等級。

共有四個等級：

  • Verbose
  • Info
  • Warning
  • Error

例如，console.log() 位於 Info 群組中，而 console.error() 位於 Error 群組。Console API 參考資料說明瞭每個適用方法的嚴重性等級。

瀏覽器記錄至主控台的每則訊息，也都有嚴重性等級。您可以隱藏任何不感興趣的訊息層級。舉例來說，如果只想對 Error 訊息感興趣，就可以隱藏其他 3 個群組。

點選「Log Levels」下拉式選單，即可啟用或停用 Verbose、Info、Warning 或 Error 訊息。

「Log Levels」(記錄層級) 下拉式選單。

您也可以依記錄層級篩選，方法是顯示控制台側欄。 開啟主控台側欄，然後按一下「Errors」、「Warnings」、「Info」或「詳細資訊」。

使用側欄查看警告。

依網址篩選訊息

輸入 url: 並在後面加上網址，即可只查看來自該網址的訊息。輸入 url: 後，開發人員工具就會顯示所有相關的網址。

網址篩選器。

網域也能用於舉例來說，如果 https://example.com/a.js 和 https://example.com/b.js 正在記錄訊息，url:https://example.com 可讓您專注於來自這 2 個指令碼的訊息。

如要隱藏來自特定網址的所有郵件，請輸入 -url:，後面加上網址，例如 https://b.wal.co。這是排除網址篩選器。

排除網址篩選器。開發人員工具會隱藏符合指定網址的所有訊息。

您也可以開啟主控台側欄，展開「使用者訊息」部分，然後按一下含有要聚焦訊息的指令碼網址，藉此顯示單一網址的訊息。

查看來自特定指令碼的訊息。

篩選掉來自不同情境的訊息

假設您在網頁上有一個廣告，廣告內嵌在 <iframe> 中，會在控制台產生大量訊息。由於這個廣告使用另一個 JavaScript 內容，如要隱藏廣告訊息，其中一種方法就是開啟控制台設定，並啟用「僅限所選內容」核取方塊。

篩除不符合規則運算式模式的郵件

在「Filter」(篩選器) 文字方塊中輸入 /[foo]\s[bar]/ 等規則運算式，篩選出不符合���模式的任何訊息。不支援空格，請改用 \s。開發人員工具會檢查訊息文字或導致系統記錄訊息的指令碼是否找到該模式。

舉例來說，下列篩選器會篩除所有不符合 /[gm][ta][mi]/ 的郵件。

���除所有與 /[gm][ta][ta][mi]/ 不相符的郵件。

如何搜尋記錄訊息中的文字：

  1. 如要開啟內建搜尋列，請按下 Command + F 鍵 (Mac) 或 Ctrl + F 鍵 (Windows、Linux)。
  2. 在列中輸入查詢內容。在此範例中，查詢為 legacy。輸入查詢。 您也可以選擇：
    • 按一下 大小寫需相符。「相符大小寫」，讓查詢區分大小寫。
    • 按一下 規則運算式按鈕。「使用規則運算式」，即可使用規則運算式運算式進行搜尋。
  3. 按下 Enter 鍵。如要跳至上一個或下一個搜尋結果，請按下向上或向下按鈕。

執行 JavaScript

這部分包含在控制台中執行 JavaScript 的相關功能。如需實作逐步操作說明，請參閱「執行 JavaScript」一節。

字串複製選項

根據預設，控制台會將字串輸出為有效的 JavaScript 常值。在輸出上按一下滑鼠右鍵，然後選擇三種複製選項：

  • 複製為 JavaScript 常值。依據內容逸出適當的特殊字元，並以單引號、雙引號或倒引號括住字串。
  • 複製字串內容。將確切的原始字串 (包括換行和其他特殊字元) 複製到剪貼簿。
  • 複製為 JSON 常值。將字串格式化為有效的 JSON。

複製選項。

從記錄中重新執行運算式

按下向上鍵，即可循環瀏覽您先��在控制台中執行的 JavaScript 運算式記錄。按下 Enter 鍵即可再次執行該運算式。

使用即時運算式即時監控運算式的值

如果您在主控台中重複輸入相同的 JavaScript 運算式，建立即時運算式可能會比較容易。使用即時運算式後，只要輸入運算式一次，就能將其固定在主控台頂端。運算式的值會近乎即時更新。請參閱查看使用即時運算式即時的 JavaScript 運算式值一文。

停用 Eager 評估功能

當您在主控台中輸入 JavaScript 運算式時，「Eager Evaluation」會顯示該運算式回傳值的預覽畫面。「Open Console Settings」並停用「Eager Evaluation」核取方塊，關閉傳回值預覽功能。

透過評估觸發使用者啟用作業

使用者啟用是指依使用者動作區分的瀏覽工作階段狀態。「有效」狀態表示使用者目前正在與網頁互動，或是在網頁載入之後與之互動。

如要在任何評估作業中觸發使用者啟動作業，請開啟主控台設定，然後勾選 核取方塊。「評估觸發使用者啟動作業」。

停用記錄中的自動完成功能

您輸入運算式時，主控台的自動完成彈出式視窗會顯示您先前執行的運算式。這些運算式前面會加上 > 字元。在以下範例中，開發人員工具先前評估過 document.querySelector('a') 和 document.querySelector('img')，

自動完成彈出式視窗會顯示歷史記錄中的運算式。

開啟主控台設定，然後停用「Autocomplete from History」核取方塊，即可停止顯示歷史記錄中的運算式。

選取 JavaScript 內容

「JavaScript Context」下拉式選單預設為 top，代表主要文件的瀏覽情境。

JavaScript Context 下拉式選單。

假設您網頁上的廣告內嵌於 <iframe> 中。您想執行 JavaScript 來調整廣告的 DOM。如要這麼做，您必須先從「JavaScript Context」下拉式選單中選取廣告的瀏覽情境。

選取其他 JavaScript 內容。

檢查物件屬性

控制台可顯示您指定 JavaScript 物件的互動式屬性清單。

如要瀏覽清單，請在控制台中輸入物件名稱，然後按下 Enter 鍵。

如要檢查 DOM 物件屬性，請按照「查看 DOM 物件屬性」一文中的步驟操作。

Spot 擁有者和繼承的屬性

控制台會先按照物件屬性排序，再以粗體顯示這些屬性。

顯示物件屬性。

從原型鏈繼承的屬性位於一般字型中。控制台會評估內建物件的對應原生存取子，藉此在物件上顯示這些模組。

顯示繼承的屬性。

評估自訂存取子

根據預設，開發人員工具不會評估您建立的存取子，自訂存取子。如要評估物件的自訂存取子，請按一下 (...)。已評估自訂存取子。

Spot 列舉和不可列舉的屬性

可列舉的屬性為亮色。系統會忽略非列舉的屬性。列舉及非列舉的屬性。 可使用 for … in 迴圈或 Object.keys() 方法疊代可列舉的屬性。

Spot 類別執行個體的私人屬性

控制台會透過 # 前置字串指定類別執行個體的私人屬性。

類別執行個體的私人屬性。

即使您在類別範圍外評估不公開屬性，Console 還是能自動完成私人屬性。

私人地產自動完成。

檢查內部 JavaScript 屬性

Console 會借用 ECMAScript 標記法，以雙方括號括住 JavaScript 內部的部分屬性。您無法在程式碼中與這類屬性互動。不過，建議您檢查這些變數。

您可能會看到下列內部屬性在不同物件上：

檢查函式

在 JavaScript 中，函式也是帶有屬性的物件。但如果您在控制台中輸入函式名稱，開發人員工具會呼叫該函式，而不是顯示其屬性。

如要查看 JavaScript 內部函式屬性，請使用 console.dir() 指令。

檢查函式的屬性。

函式具有以下屬性：

  • [[FunctionLocation]]：來源檔案中具有函式定義的行連結。
  • [[Scopes]]：列出函式可存取的值和運算式。如要在偵錯期間檢查函式範圍，請參閱「查看及編輯本機、封閉和全域屬性」。
  • 繫結函式具有下列屬性：
    • [[TargetFunction]]：bind()的目標。
    • [[BoundThis]]。this 的值。
    • [[BoundArgs]]：函式引數的陣列。已繫結函式。
  • 產生器函式會標記 [[IsGenerator]]: true 屬性。 產生器函式。
  • 產生器會傳回疊代器物件，且具備下列屬性：
    • [[GeneratorLocation]]：來源檔案中包含產生器定義的行連結。
    • [[GeneratorState]]：suspended、closed 或 running.
    • [[GeneratorFunction]]：傳回物件的產生器。
    • [[GeneratorReceiver]]：接收值的物件。 Iterator 物件。

清除控制台

你可以使用下列任一工作流程清除控制台：

  • 按一下「Clear Console」圖示 。。
  • 在訊息上按一下滑鼠右鍵，然後選取「Clear Console」。
  • 在控制台中輸入 clear()，然後按下 Enter 鍵。
  • 從網頁的 JavaScript 呼叫 console.clear()。
  • 當控制台位於焦點時，按下 Control + L 鍵。