如果你以前開發(fā)過web應(yīng)用程序，那么一定熟悉console.log(...)，這是一種將數(shù)據(jù)打印到開發(fā)者控制臺(tái)的方法：可用于調(diào)試、日志記錄和測(cè)試。

運(yùn)行console.log(console)，還可以查看console對(duì)象的更多功能。

這篇文章簡(jiǎn)要概述了可用于提升日志記錄體驗(yàn)的10大技巧。

一起來看看吧。

打印表格

console.table()方法將對(duì)象/數(shù)組打印為格式整齊的表格。

console.table({
  'Time Stamp': new Date().getTime(),
  'OS': navigator['platform'],
  'Browser': navigator['appCodeName'],
  'Language': navigator['language'],
});

分組

使用console.group()可將相關(guān)的控制臺(tái)語句與可折疊章節(jié)組合在一起。

你可以選擇通過傳遞字符串作為參數(shù)來為章節(jié)指定標(biāo)題。可以在控制臺(tái)中折疊和展開章節(jié)，但默認(rèn)情況下也可以使用groupCollapsed取代group來折疊章節(jié)。你還可以在章節(jié)內(nèi)嵌套子章節(jié)，但務(wù)必記住使用groupEnd關(guān)閉每個(gè)組。

以下示例將輸出一個(gè)打開的包含一些信息的章節(jié)。

console.group('URL Info');
  console.log('Protocol', window.location.protocol);
  console.log('Host', window.origin);
  console.log('Path', window.location.pathname);
  console.groupCollapsed('Meta Info');
    console.log('Date Fetched', new Date().getTime());
    console.log('OS', navigator['platform']);
    console.log('Browser', navigator['appCodeName']);
    console.log('Language', navigator['language']);
  console.groupEnd();
console.groupEnd();

帶樣式的日志輸出

可以使用一些基本的CSS來設(shè)置日志輸出的樣式，例如顏色、字體、文本樣式和大小。

例如，嘗試運(yùn)行以下命令：

console.log(
  '%cHello World!',
  'color: #f709bb; font-family: sans-serif; text-decoration: underline;'
);

得到輸出如下：

很酷吧？但是還可以做更多事情！

比如說改變字體，樣式，背景顏色，添加陰影和曲線......

時(shí)間

另一種常見的調(diào)試技術(shù)是計(jì)算程序執(zhí)行時(shí)間，以跟蹤操作所需的時(shí)間。這可以通過使用console.time()啟動(dòng)計(jì)時(shí)器并傳入標(biāo)簽，然后通過相同的標(biāo)簽使用console.timeEnd()結(jié)束計(jì)時(shí)器來實(shí)現(xiàn)。甚至還可以使用console.timeLog()在長(zhǎng)時(shí)間運(yùn)行的操作中添加標(biāo)記。

console.time("concatenation");
let output = "";
for (var i = 1; i <= 1e6; i++) {
  output += i;
}
console.timeEnd("concatenation");

concatenation: 1206ms - timer ended

還有一個(gè)非標(biāo)準(zhǔn)方法——console.timeStamp()，在性能選項(xiàng)卡中添加標(biāo)記，因此可以將代碼中的點(diǎn)與時(shí)間軸中記錄的其他事件（如繪制和布局事件）相關(guān)聯(lián)。

斷言

如果你只想在發(fā)生錯(cuò)誤或特定條件為真/假時(shí)登錄到控制臺(tái)，那么可以使用console.assert()來完成，除非第一個(gè)參數(shù)為false，否則不會(huì)將任何內(nèi)容記錄到控制臺(tái)。

第一個(gè)參數(shù)是要檢查的布爾條件，后跟0或要打印的多個(gè)數(shù)據(jù)點(diǎn)，最后一個(gè)參數(shù)是要輸出的消息。例如console.assert(false, 'Value was false')將輸出消息，因?yàn)榈谝粋€(gè)參數(shù)是false。

const errorMsg = 'the # is not even';
for (let num = 2; num <= 5; num++) {
  console.log(`the # is ${num}`);
  console.assert(num % 2 === 0, { num }, errorMsg);
}

計(jì)數(shù)

還在手動(dòng)遞增數(shù)字進(jìn)行日志記錄嗎？console.count()可幫助用于跟蹤某些內(nèi)容的執(zhí)行次數(shù)，或代碼塊的輸入頻率。

你可以選擇為計(jì)數(shù)器指定一個(gè)標(biāo)簽，以便管理多個(gè)計(jì)數(shù)器并使輸出更清晰。

計(jì)數(shù)器將始終從1開始。你可以隨時(shí)使用console.countReset()重置計(jì)數(shù)器，該函數(shù)也接受可選的標(biāo)簽參數(shù)。

以下代碼最終值將為8。

const numbers = [1, 2, 3, 30, 69, 120, 240, 420];
numbers.forEach((name) => {
  console.count();
});

下面是標(biāo)記計(jì)數(shù)器的示例輸出。

如果使用值，則不會(huì)傳入標(biāo)簽，而是為每個(gè)條件值提供一個(gè)單獨(dú)的計(jì)數(shù)器。例如：

console.count(NaN);         // NaN: 1
console.count(NaN+3);       // NaN: 2
console.count(1/0);         // Infinity: 1
console.count(String(1/0)); // Infinity: 2

堆棧跟蹤

在JavaScript中，我們經(jīng)常會(huì)用到深度嵌套的方法和對(duì)象。你可以使用console.trace()遍歷堆棧跟蹤，并輸出調(diào)用了哪些方法。

還可以選擇將數(shù)據(jù)與堆棧跟蹤一起輸出。

dir

如果將大型對(duì)象記錄到控制臺(tái)，則可能會(huì)變得難以讀取。幸而我們可以通過console.dir()方法以可擴(kuò)展的樹結(jié)構(gòu)進(jìn)行格式化。

以下是目錄樣式控制臺(tái)輸出的示例：

你還可以使用console.dirxml()以類似的方式打印基于XML或HTML的樹。

調(diào)試

你可能在應(yīng)用中設(shè)置了一些日志記錄，且在開發(fā)過程中依賴這些日志記錄，但不希望用戶看到。用console.debug()替換日志語句就可以做到這一點(diǎn)，它的功能與console.log完全相同，但可以被大多數(shù)構(gòu)建系統(tǒng)所刪除，或者在生產(chǎn)模式下運(yùn)行時(shí)被禁用。

日志級(jí)別

注意到瀏覽器控制臺(tái)中有若干過濾器（信息、警告和錯(cuò)誤）了嗎？它們?cè)试S你更改記錄數(shù)據(jù)的詳細(xì)程度。要使用這些過濾器，只需切換日志語句即可：

console.info() - 用于記錄通知消息，通常包括一個(gè)小的“i”和或藍(lán)色背景

console.warn() - 用于記錄警告或非嚴(yán)重錯(cuò)誤信息，通常包括三角感嘆號(hào)和或黃色背景

console.error() - 用于記錄可能影響功能的錯(cuò)誤信息，通常包括圓形感嘆號(hào)和或紅色背景

在生產(chǎn)環(huán)境中運(yùn)行時(shí)，Node.js中不同的日志級(jí)別會(huì)寫入不同的流，例如error()會(huì)寫入stderr，而日志輸出會(huì)寫入stdout，但在開發(fā)中它們都會(huì)如常出現(xiàn)在控制臺(tái)中。

多值日志

console對(duì)象上的大多數(shù)函數(shù)接受多個(gè)參數(shù)，因此你可以添加標(biāo)簽到輸出，或一次打印多個(gè)數(shù)據(jù)點(diǎn)，例如：console.log('User: ', user.name);

但是，打印多個(gè)標(biāo)記值的更簡(jiǎn)單方法是使用對(duì)象解構(gòu)。例如，如果有三個(gè)變量（x、y和z），那么可以將它們記錄為一個(gè)用大括號(hào)括起來的對(duì)象，這樣就能輸出每個(gè)變量的名稱和值——如console.log( { x, y, z } );

日志字符串格式

如果需要輸出格式化的字符串，可以使用C語言樣式的printf格式修飾符來實(shí)現(xiàn)。

支持的格式修飾符有：

• %s - 字符串或轉(zhuǎn)換為字符串的任何其他類型
• %d / %i - 整數(shù)
• %f - 浮點(diǎn)數(shù)
• %o - 使用最佳格式
• %O - 使用默認(rèn)格式
• %c - 使用自定義格式

例如

console.log("Hello %s, welcome to the year %d!", "Alicia", new Date().getFullYear());
// Hello Alicia, welcome to the year 2022!

當(dāng)然，你也可以使用模板文字來實(shí)現(xiàn)相同的目的，如果是較短的字符串，可能更容易閱讀。

清除

最后，當(dāng)查找事件的輸出時(shí)，你可能希望刪除頁面首次加載時(shí)記錄到控制臺(tái)的所有內(nèi)容。這可以通過console.clear()來完成，它將清除所有內(nèi)容，不會(huì)重置任何數(shù)據(jù)。

通常還可以通過單擊Bin圖標(biāo)來清除控制臺(tái)，以及使用篩選器文本輸入進(jìn)行搜索。

特殊瀏覽器方法

直接在瀏覽器控制臺(tái)中運(yùn)行代碼時(shí)，還可以訪問速記方法，這些方法對(duì)于調(diào)試、自動(dòng)化和測(cè)試非常有用。

其中最有用的是：

• $() - Document.querySelector()的簡(jiǎn)寫（選擇DOM元素，jQuery-style?。?/li>
• $$() - 與上面相同，但selectAll用于在數(shù)組中返回多個(gè)元素時(shí)使用
• $_ - 返回上次計(jì)算表達(dá)式的值
• $0 - 返回最近選擇的DOM元素（在檢查器中）
• $1...$4 - 也可用于抓取以前選擇的UI元素
• $x() - 允許你使用Xpath查詢選擇DOM元素
• keys()和values() - Object.getKeys()的簡(jiǎn)寫，將返回包含obj鍵或值的數(shù)組
• copy() - 將內(nèi)容復(fù)制到剪貼板
• monitorEvents() - 每次觸發(fā)給定事件時(shí)運(yùn)行命令
• 對(duì)于某些常見的控制臺(tái)命令（如console.table()），你不需要鍵入前面的console，只需運(yùn)行table()

警告！這些只能在開發(fā)工具控制臺(tái)中工作，在代碼中不起作用！

最后再快速介紹一些最佳實(shí)踐...

• 定義lint規(guī)則，以防止任何console.log語句合并到主分支中
• 編寫包裝函數(shù)來處理日志記錄，這樣你就可以根據(jù)環(huán)境啟用/禁用調(diào)試日志，也可以使用適當(dāng)?shù)娜罩炯?jí)別，以及應(yīng)用任何格式。這也可集成到第三方日志記錄服務(wù)，只需在一個(gè)位置進(jìn)行代碼更新即可
• 切勿記錄任何敏感信息，任何已安裝的擴(kuò)展程序都可以捕獲瀏覽器日志，因此并不安全
• 始終使用正確的日志級(jí)別（如info、warn、error）來簡(jiǎn)化篩選和禁用
• 遵循一致的格式，以便在需要時(shí)可以由計(jì)算機(jī)解析日志
• 日志消息應(yīng)簡(jiǎn)短、有意義
• 在日志中包含上下文或類別
• 不要過度使用，只記錄有用的信息