一定聽說過 console.log() ，而且可能一直在使用它。它非常流行，在集成開發環境中鍵入時，Visual Studio Intellicode 等工具通常會在其他控制臺方法之前推薦使用它。

在本文中，我們將探討一些最有用的控制臺方法，以及它們在數據可視化、調試等方面的用途。

1. table()

當你需要在代碼中以表格形式（如對象數組）顯示一組對象時， console.table() 方法就會派上用場。以汽車列表為例：

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

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

console.log(cars);

在 Chrome 瀏覽器開發者控制臺中，我們可以檢查我們記錄的對象的各種屬性，層次不限。

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

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

console.table(cars);

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

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

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

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

2. assert()

console.assert() 非常適合調試目的，它接收斷言，并在斷言為 false 時向控制臺寫入錯誤信息。但如果是 true ，則不會發生任何事情:

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

第一個斷言通過是因為 num 大于 10 ，所以控制臺只顯示第二個斷言：

3. trace()

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

function a() {
  b();
}

function b() {
  c();
}

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

a();

4. error()

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

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

不過，在 Node.js 中不會有這種顏色分離：

不過，信息在內部被寫入不同的位置。 console.error() 寫入 stderr 流，而 console.log() 寫入 stdout 流。你可以使用process.stderr和 process.stdout 訪問這些流。這對于將錯誤信息和信息重定向到不同的文件非常有用，就像我們在下面的代碼示例中所做的那樣。

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.');

運行此代碼時，傳遞給 error() 和log()的信息將輸出到相應的文件，而不是控制臺。

5. warn()

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

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

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

6. count() 和 countReset()

console.count() 記錄當前調用 count() 的執行次數。這是另一個有用的調試工具。

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

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

由于我們沒有指定標簽，因此顯示的標簽是 default 。我們可以通過為 count() 傳遞一個字符串參數來做到這一點

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

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

現在，每條信息都有不同的計數。countReset() 方法將標簽的計數設回零。

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()

我們可以同時使用這些方法來測量程序中某一特定操作所需的時間。

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');

在此，我們將對 for of 和 forEach 循環進行性能比較。 time() 啟動定時器，執行向其傳遞的標簽所指定的操作。 timeLog() 在不停止計時器的情況下記錄當前持續時間，我們用它來顯示迭代一千次后的時間。 timeEnd() 記錄當前持續時間并停止計時器。我們在一百萬次迭代后調用它。

看起來 forEach() 比 for of 快。

8. clear()

console.clear() 通過清除日志來清除控制臺中的雜亂信息。

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

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

console.group() 為其后的控制臺信息添加一級縮進。 console.groupEnd() 會將縮進程度重置為調用前面的 console.group() 之前的縮進程度。

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() 創建了一個類似 console.group() 的組，但該組是折疊的，直到用戶使用旁邊的 "披露 "按鈕將其展開。

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，我們可以在控制臺中瀏覽：

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

總結

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

sole 對象提供對瀏覽器控制臺的接入（如：Firefox 的 Web Console）。不同瀏覽器上它的工作方式是不一樣的，但這里會介紹一些大都會提供的接口特性。
Console對象可以在任何全局對象中訪問，如 Window，WorkerGlobalScope 以及通過屬性工作臺提供的特殊定義。

它被瀏覽器定義為 Window.Console，也可被簡單的 Console 調用。

最常用的方法就是Console.log(),就是在控制臺輸出內容。剛開始學前端的時候看到大家都是用的Console.log(),幾乎沒有見過Console的其他用法，難道Console真的沒有別的用法了？查了一下后發現Console還是非常強大的，至于為什么很少看到有人用可能是因為用過都刪掉了吧。在此記錄一下Console的其他用法。

注意：因為Console 對象提供對瀏覽器控制臺的接入 所以在不同瀏覽器中的支持及表現形式可能不太一樣，但是調試內容只有我們開發者會看，所以保證開發環境能用這些方法就可以了，下面演示全部都為Chrome上面的效果。

分類輸出

不同類別信息的輸出

console.log('文字信息');

console.info('提示信息');

console.warn('警告信息');

console.error('錯誤信息');

分組輸出

使用Console.group()和Console.groupEnd()包裹分組內容。

還可以使用Console.groupCollapsed()來代替Console.group()生成折疊的分組。

console.group('第一個組');
 console.log("1-1");
 console.log("1-2");
 console.log("1-3");
console.groupEnd();

console.group('第二個組');
 console.log("2-1");
 console.log("2-2");
 console.log("2-3");
console.groupEnd();

Console.group()還可以嵌套使用

表格輸出

使用console.table()可以將傳入的對象，或數組以表格形式輸出。適合排列整齊的元素

查看對象

使用Console.dir()顯示一個對象的所有屬性和方法
在Chrome中Console.dir()和Console.log()效果相同

查看節點

使用Console.dirxml()顯示一個對象的所有屬性和方法
在Chrome中Console.dirxml()和Console.log()效果相同

百度首頁logo的節點信息

條件輸出

利用console.assert(),可以進行條件輸出。

• 當第一個參數或返回值為真時，不輸出內容
• 當第一個參數或返回值為假時，輸出后面的內容并拋出異常

計次輸出

使用Console.count()輸出內容和被調用的次數

追蹤調用堆棧

使用Console.trace()來追蹤函數被調用的過程，在復雜項目時調用過程非常多，用這個命令來幫你縷清。

計時功能

使用Console.time()和Console.timeEnd()包裹需要計時的代碼片段，輸出運行這段代碼的事件。

• Console.time()中的參數作為計時器的標識，具有唯一性。
• Console.timeEnd()中的參數來結束此標識的計時器，并以毫秒為單位返回運行時間。
• 最多同時運行10000個計時器。

性能分析

使用Console.profile()和Console.profile()進行性能分析，查看代碼各部分運行消耗的時間，但是我在Chrome自帶的調試工具中并沒有找到在哪里查看這兩個方法生成的分析報告。應該需要其他的調試工具。

有趣的Console.log()

最后再來介紹一下強大的Console.log(),這個方法有很多的用法（其他輸出方法的用法，如error()等，可以參照log()使用）。

一、提示輸出

可以再輸出的對象、變量前加上提示信息，增加辨識度

二、格式化輸出

三、自定義樣式

使用%c為打印內容定義樣式,再輸出信息前加上%c，后面寫上標準的css樣式，就可以為輸出的信息添加樣式了

總結

Console的用法很多，有些再調試過程中非常實用，可以節省很多時間。當然我知道debug還是用斷點調試的方法比較好，但是小問題用“printf大法”也是很好用的。