你一定聽(tīng)說(shuō)過(guò) console.log() ，而且可能一直在使用它。它非常流行，在集成開(kāi)發(fā)環(huán)境中鍵入時(shí)，Visual Studio Intellicode 等工具通常會(huì)在其他控制臺(tái)方法之前推薦使用它。

在本文中，我們將探討一些最有用的控制臺(tái)方法，以及它們?cè)跀?shù)據(jù)可視化、調(diào)試等方面的用途。

1. table()

當(dāng)你需要在代碼中以表格形式（如對(duì)象數(shù)組）顯示一組對(duì)象時(shí)， console.table() 方法就會(huì)派上用場(chǎng)。以汽車(chē)列表為例：

const cars = [
  {
    color: 'red',
    age: 4,
    maxSpeed: 120,
  },
  {
    color: 'blue',
    age: 2,
    maxSpeed: 100,
  },
  {
    color: 'yellow',
    age: 3,
    maxSpeed: 160,
  },
];

如何在控制臺(tái)中檢查它們？ console.log() 是一種典型的方法：

console.log(cars);

在 Chrome 瀏覽器開(kāi)發(fā)者控制臺(tái)中，我們可以檢查我們記錄的對(duì)象的各種屬性，層次不限。

圖片

我們可以在 Node.js 終端中查看屬性，還可以獲得色彩：

圖片

這是一種可以接受的方法，但 console.table() 方法提供了一種更優(yōu)雅的替代方法：

console.table(cars);

console.table() 在 Chrome 瀏覽器控制臺(tái)中:

圖片

console.table() in Node.js Node.js 中的

圖片

顧名思義，它以易于理解的表格形式呈現(xiàn)數(shù)據(jù)，就像電子表格一樣。它也適用于數(shù)組陣列。

const arr = [
  [1, 3, 5],
  [2, 4, 6],
  [10, 20, 30],
];
console.table(arr);

圖片

2. assert()

console.assert() 非常適合調(diào)試目的，它接收斷言，并在斷言為 false 時(shí)向控制臺(tái)寫(xiě)入錯(cuò)誤信息。但如果是 true ，則不會(huì)發(fā)生任何事情:

const num = 13;
console.assert(num > 10, 'Number must be greater than 10');
console.assert(num > 20, 'Number must be greater than 20');

第一個(gè)斷言通過(guò)是因?yàn)?nbsp;num 大于 10 ，所以控制臺(tái)只顯示第二個(gè)斷言：

圖片

3. trace()

console.trace() 可以幫助您在調(diào)用它的位置輸出當(dāng)前堆棧跟蹤。例如

function a() {
  b();
}

function b() {
  c();
}

function c() {
  console.trace();
}

a();

圖片

4. error()

error() 可能是第二種最常用的 Console 方法。在 Chrome 瀏覽器控制臺(tái)中，它會(huì)以獨(dú)特的紅色顯示錯(cuò)誤信息。

console.error('This is an error message.');
console.log('This is a log message.');

圖片

不過(guò)，在 Node.js 中不會(huì)有這種顏色分離：

圖片

不過(guò)，信息在內(nèi)部被寫(xiě)入不同的位置。 console.error() 寫(xiě)入 stderr 流，而 console.log() 寫(xiě)入 stdout 流。你可以使用process.stderr和 process.stdout 訪問(wèn)這些流。這對(duì)于將錯(cuò)誤信息和信息重定向到不同的文件非常有用，就像我們?cè)谙旅娴拇a示例中所做的那樣。

const fs = require('fs');

const errorFs = fs.createWriteStream('./error-log.txt');
process.stderr.write = errorFs.write.bind(errorFs);

const infoFs = fs.createWriteStream('./info-log.txt');
process.stdout.write = infoFs.write.bind(infoFs);

console.error('This is an error message.');
console.log('This is a log message.');

運(yùn)行此代碼時(shí)，傳遞給 error() 和log()的信息將輸出到相應(yīng)的文件，而不是控制臺(tái)。

5. warn()

console.warn() 在 Chrome 瀏覽器控制臺(tái)中輸出黃色信息，表示警告。

console.warn('This is a warning message');

圖片

在 Node.js 中，信息會(huì)像 console.error() 一樣寫(xiě)入 stderr 流。

6. count() 和 countReset()

console.count() 記錄當(dāng)前調(diào)用 count() 的執(zhí)行次數(shù)。這是另一個(gè)有用的調(diào)試工具。

function shout(message) {
  console.count();
  return message.toUpperCase() + '!!!';
}

shout('hey');
shout('hi');
shout('hello');

圖片

由于我們沒(méi)有指定標(biāo)簽，因此顯示的標(biāo)簽是 default 。我們可以通過(guò)為 count() 傳遞一個(gè)字符串參數(shù)來(lái)做到這一點(diǎn)

function shout(message) {
  console.count(message);
  return message.toUpperCase() + '!!!';
}

shout('hey');
shout('hi');
shout('hello');
shout('hi');
shout('hi');
shout('hello');

圖片

現(xiàn)在，每條信息都有不同的計(jì)數(shù)。countReset() 方法將標(biāo)簽的計(jì)數(shù)設(shè)回零。

function shout(message) {
  console.count(message);
  return message.toUpperCase() + '!!!';
}

shout('hi');
shout('hello');
shout('hi');
shout('hi');
shout('hello');
console.countReset('hi');
shout('hi');

圖片

7. time(), timeEnd(), and timeLog()

我們可以同時(shí)使用這些方法來(lái)測(cè)量程序中某一特定操作所需的時(shí)間。

const arr = [...Array(10)];

const doubles1 = [];
console.time('for of');
let i = 0;
for (; i < 1000; i++) {
  for (const item of arr);
}
console.timeLog('for of');
for (; i < 1000000; i++) {
  for (const item of arr);
}
console.timeEnd('for of');

console.time('forEach');
i = 0;
for (; i < 1000; i++) {
  arr.forEach(() => {});
}
console.timeLog('forEach');
for (; i < 1000000; i++) {
  arr.forEach(() => {});
}
console.timeEnd('forEach');

圖片

在此，我們將對(duì) for of 和 forEach 循環(huán)進(jìn)行性能比較。 time() 啟動(dòng)定時(shí)器，執(zhí)行向其傳遞的標(biāo)簽所指定的操作。 timeLog() 在不停止計(jì)時(shí)器的情況下記錄當(dāng)前持續(xù)時(shí)間，我們用它來(lái)顯示迭代一千次后的時(shí)間。 timeEnd() 記錄當(dāng)前持續(xù)時(shí)間并停止計(jì)時(shí)器。我們?cè)谝话偃f(wàn)次迭代后調(diào)用它。

看起來(lái) forEach() 比 for of 快。

8. clear()

console.clear() 通過(guò)清除日志來(lái)清除控制臺(tái)中的雜亂信息。

console.log('A log message.');
console.clear();

圖片

9. group(), groupCollapsed(), and groupEnd()

console.group() 為其后的控制臺(tái)信息添加一級(jí)縮進(jìn)。 console.groupEnd() 會(huì)將縮進(jìn)程度重置為調(diào)用前面的 console.group() 之前的縮進(jìn)程度。

console.log('This is the outer level');
console.group();
console.log('Level 2');
console.group();
console.log('Level 3');
console.warn('More of level 3');
console.groupEnd();
console.log('Back to level 2');
console.groupEnd();
console.log('Back to the outer level');

圖片

console.groupCollapsed() 創(chuàng)建了一個(gè)類似 console.group() 的組，但該組是折疊的，直到用戶使用旁邊的 "披露 "按鈕將其展開(kāi)。

console.log('This is the outer level');
console.group();
console.log('Level 2');
console.groupCollapsed();
console.log('Level 3 ');
console.warn('More of level 3');
console.groupEnd();
console.log('Back to level 2');
console.groupEnd();
console.log('Back to the outer level');

圖片

10. dir()

console.log() 將 HTMLElement 記錄為 HTML，我們可以在控制臺(tái)中瀏覽：

圖片

但是， console.dir() 會(huì)將其記錄為一個(gè)對(duì)象，并顯示一個(gè)交互式屬性列表：

圖片

總結(jié)

正如你在本文中所看到的，除了console.log()之外，還有許多控制臺(tái)方法。其中一些只是在控制臺(tái) UI 中用顏色和更好的可視化來(lái)點(diǎn)綴，而另一些則可以作為調(diào)試和性能測(cè)試的強(qiáng)大工具。