console

例項方法

console.assert()

如果第一個引數為 false，則向控制檯記錄一條錯誤訊息。

console.clear()

清除控制檯。

console.count()

記錄使用給定標籤呼叫此行的次數。

console.countReset()

重置具有給定標籤的計數器的值。

console.debug()

以除錯日誌級別向控制檯輸出訊息。

console.dir()

顯示指定 JavaScript 物件的屬性的可互動列表。此列表允許您使用展開/摺疊三角形檢查子物件的內容。

console.dirxml()

如果可能，顯示指定物件的 XML/HTML 元素表示形式，如果不可能，則顯示 JavaScript 物件檢視。

console.error()

以錯誤日誌級別向控制檯輸出訊息。

console.exception() 非標準 已棄用

console.error() 的別名。

console.group()

建立一個新的內聯 組，將所有後續輸出縮排一個級別。要移回上一級，請呼叫 console.groupEnd()。

console.groupCollapsed()

建立一個新的內聯 組，將所有後續輸出縮排一個級別。但是，與 console.group() 不同，它從內聯組開始是摺疊的，需要使用展開按鈕才能開啟它。要移回上一級，請呼叫 console.groupEnd()。

console.groupEnd()

退出當前的內聯 組。

console.info()

以資訊日誌級別向控制檯輸出訊息。

console.log()

向控制檯輸出訊息。

console.profile() 非標準

啟動瀏覽器內建的效能分析器（例如，Firefox 效能工具）。您可以為效能分析指定一個可選名稱。

console.profileEnd() 非標準

停止效能分析器。您可以在瀏覽器的效能工具中檢視生成的效能分析結果（例如，Firefox 效能工具）。

console.table()

以表格形式顯示資料。

console.time()

以輸入引數指定的名稱啟動一個 計時器。給定頁面最多可以同時執行 10,000 個計時器。

console.timeEnd()

停止指定的 計時器，並以毫秒為單位記錄自啟動以來經過的時間。

console.timeLog()

將指定 計時器 的值記錄到控制檯。

console.timeStamp() 非標準

在瀏覽器效能工具的時間線上新增一個標記（Chrome 或 Firefox）。

console.trace()

輸出一個 堆疊跟蹤。

console.warn()

以警告日誌級別向控制檯輸出訊息。

示例

向控制檯輸出文字

控制檯最常用的功能是記錄文字和其他資料。您可以使用 console.log()、console.info()、console.warn()、console.error() 或 console.debug() 方法生成幾種類別的輸出。這些方法中的每一種都會在日誌中以不同的樣式顯示輸出，並且您可以使用瀏覽器提供的篩選控制元件僅檢視您感興趣的輸出型別。

每種輸出方法有兩種用法：

• 傳遞可變數量的引數，它們的字串表示形式連線成一個字串，然後輸出到控制檯。
• 傳遞一個字串，其中包含零個或多個替換字串，後跟要替換它們的變數數量的引數。

輸出單個物件

使用日誌方法最簡單的方法是輸出單個物件。

const someObject = { str: "Some text", id: 5 };
console.log(someObject);

輸出看起來像這樣：

{str:"Some text", id:5}

瀏覽器將顯示有關物件的儘可能多的資訊。例如，也可能顯示物件的私有狀態。某些型別的物件，如 DOM 元素或函式，也可能以特殊方式顯示。

快照物件

關於物件的資訊是惰性檢索的。這意味著日誌訊息顯示的是物件首次檢視時的內容，而不是記錄時的內容。例如：

const obj = {};
console.log(obj);
obj.prop = 123;

這將輸出 {}。但是，如果您展開物件的詳細資訊，您將看到 prop: 123。

如果您打算修改您的物件，並且想阻止記錄的資訊被更新，您可以在記錄物件之前對其進行 深度克隆。一種常見的方法是 JSON.stringify()，然後 JSON.parse() 它。

console.log(JSON.parse(JSON.stringify(obj)));

在瀏覽器中還有其他有效的選擇，例如 structuredClone()，它在克隆不同型別的物件方面更有效。

輸出多個物件

您也可以透過在呼叫日誌方法時列出多個物件來輸出它們，如下所示：

const car = "Dodge Charger";
const someObject = { str: "Some text", id: 5 };
console.info("My first car was a", car, ". The object is:", someObject);

輸出將如下所示

My first car was a Dodge Charger . The object is: {str:"Some text", id:5}

使用字串替換

日誌方法後的第一個引數可以是一個字串，其中包含零個或多個替換字串。每個替換字串都將被相應的引數值替換。

%o

以“最優有用格式”樣式輸出 JavaScript 物件，例如 DOM 元素可能顯示的方式與在元素檢查器中出現的方式相同。

%O

以“通用 JavaScript 物件格式”樣式輸出 JavaScript 物件，通常以可展開樹的形式。這與 console.dir() 類似。

%d 或 %i

輸出整數。

%s

輸出字串。

%f

輸出浮點數值。

%c

將 CSS 樣式規則應用於所有後續文字。請參閱 樣式化控制檯輸出。

某些瀏覽器可能實現額外的格式說明符。例如，Safari 和 Firefox 支援 C 風格的精度格式化 %.<precision>f。例如 console.log("Foo %.2f", 1.1) 將輸出數字到小數點後 2 位：Foo 1.10，而 console.log("Foo %.2d", 1.1) 將輸出數字為兩位有效數字，前面帶 0：Foo 01。

這些說明符中的每一個都會從引數列表中提取格式字串之後的下一個引數。例如：

for (let i = 0; i < 5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i + 1);
}

輸出如下所示

Hello, Bob. You've called me 1 times.
Hello, Bob. You've called me 2 times.
Hello, Bob. You've called me 3 times.
Hello, Bob. You've called me 4 times.
Hello, Bob. You've called me 5 times.

樣式化控制檯輸出

您可以使用 %c 指令將 CSS 樣式應用於控制檯輸出。

console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
);

指令之前的文字不受影響，但指令之後的文字將使用引數中的 CSS 宣告進行樣式設定。

您可以多次使用 %c。

console.log(
  "Multiple styles: %cred %corange",
  "color: red",
  "color: orange",
  "Additional unformatted message",
);

可與 %c 語法一起使用的屬性如下（至少在 Firefox 中如此 - 在其他瀏覽器中可能有所不同）：

• background 及其簡寫形式。
• border 及其簡寫形式。
• border-radius
• box-decoration-break
• box-shadow
• clear 和 float。
• color
• cursor
• display
• font 及其簡寫形式。
• line-height
• margin
• outline 及其簡寫形式。
• padding
• text-* 屬性，例如 text-transform。
• white-space
• word-spacing 和 word-break。
• writing-mode

在控制檯中使用的組

您可以使用巢狀的組來幫助組織輸出，透過視覺組合相關內容。要建立一個新的巢狀塊，請呼叫 console.group()。console.groupCollapsed() 方法類似，但會建立摺疊的新塊，需要使用展開按鈕才能開啟閱讀。

要退出當前組，請呼叫 console.groupEnd()。例如，給定以下程式碼：

console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");

輸出如下所示

計時器

您可以啟動一個計時器來計算特定操作的持續時間。要啟動一個計時器，請呼叫 console.time() 方法，並將其命名為唯一的引數。要停止計時器並獲取經過的時間（以毫秒為單位），只需呼叫 console.timeEnd() 方法，同樣將計時器名稱作為引數傳遞。給定頁面最多可以同時執行 10,000 個計時器。

例如，給定以下程式碼：

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff…");
console.timeEnd("answer time");

將記錄使用者關閉警報框所需的時間，將時間記錄到控制檯，等待使用者關閉第二個警報，然後將結束時間記錄到控制檯。

請注意，計時器的名稱會在計時器啟動和停止時都顯示出來。

堆疊跟蹤

console 物件還支援輸出堆疊跟蹤；這將顯示到達您呼叫 console.trace() 的點的呼叫路徑。給定類似這樣的程式碼：

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

控制檯中的輸出看起來像這樣：

規範

瀏覽器相容性

另見

• Firefox 開發者工具
• Web 控制檯 — Firefox 中的 Web 控制檯如何處理控制檯 API 呼叫。
• about:debugging — 當除錯目標是移動裝置時，如何檢視控制檯輸出。
• Google Chrome DevTools
• Microsoft Edge DevTools
• Safari Web Inspector