console.log()是我們調試代碼中常用的一個方法，除此之外，web 標準中，console 是有很多有意思的特性，使用這些特性，可以給你的開發工作增添不一樣的顏色。

console 是通過全局對象訪問。在 whatwg 的規范中，console 上的方法可以分為4類：Logging、Counting、Grouping、Timing。下面我們就逐個梳理一下。

Logging

console 提供了各種形式的日志輸出，包括：log()、info()、warn()、error()、debug()、assert()、table()、dir()、dirxml()、trace()。另外清除控制臺日志提供了 clear() 方法。

那么具體我們應該如果選擇使用哪種方法打印日志呢？提供如下思路可供參考。

1. 打印不同級別的日志方便查找。以 Chrome 為例，如果不勾選 Verbose 選項，則不會顯示 debug 級別的日志。
   
   同理，Info、Warnings、Errors也可進行篩選。

2. 條件判斷打印

   在項目中，我們有時會遇到，如果出現某種情況才會打印信息，否則不打印。如果在使用 if-else 沒必要的情況下，可以使用 assert() 來做。
   assert() 第一個參數為 boolean 類型的值，或者是 Truthy 或 Falsy 的值，只有是 Falsy 的時候，才會打印后面參數對應的數據。例如：

   console.assert(true, 'hello'); // nothing
   
   console.assert(false, 'hello');
   // Assertion failed: hello
   

3. 對象格式化打印

   如果要打印一個 JavaScript 對象，有兩種格式化形式：dir() 打印出的對象不會展示各種信息，只表示一個可展開的對象；dirxml() 會盡可能的展示出對象的有用信息。例如：

   console.dir({a: 1})
   // Object
   
   console.dirxml({a: 1})
   // {a: 1}
   

   通常我們想要查看一個 DOM 對象上的屬性和方法，會用 dir()，因為其只會打印出一個可展開的對象，我們點擊展開此對象，就能查看具體信息；而使用 dirxml() 打印 DOM 對象，控制臺會輸出標簽的展示形式，這種形式我們只能查看此對象的標簽形式。

4. 表格形式打印

   如果打印的數據可表格化，那么使用 table()，會以 table 的形式展示數據。
   
   如果你的數據格式高度一致且需要進行對照查看，那么表格形式打印出來會非常直觀。

5. 追蹤日志位置

   error 級別的日志，會逐級打印出錯誤信息的位置。那么如果 info 級別的日志如果需要逐級打印日志輸出位置，那么就需要 trace() 方法，最終輸出效果如下所示：
   

Counting

Counting 即 計數。如果你以前在調試代碼時，有計數的需求，那么可以使用 count() 方法，而不需要去定義額外變量來操作。count() 的使用非常簡單，接收一個 string 類型參數（如果不傳，默認為 “default”），會生成一個以此參數為名稱的計數器，每次調用，則計數器加一，并把結果打印出來。countReset() 接收參數于 count() 一致，即重置指定的計數器。如下例子：

console.count('hello')
// hello: 1

console.count('hello')
// hello: 2

console.countReset('hello')

console.count('hello')
// hello: 1

Timing

Timing 即 計時器，用法和 Counting 的類似。time() 方法接收一個 string 類型的參數（如果不傳，默認為 “default”），會生成一個以此參數命名的計時器。使用 timeLog() 可查看指定計時器所計時間，使用 timeEnd() 結束指定計數器。如下例子：

console.time()

console.timeLog()
// default: 8044.06103515625ms

console.timeLog()
// default: 11991.714111328125ms

console.timeEnd()
// default: 16062.8837890625ms

console.timeLog()
// Timer 'default' does not exist

Grouping

Grouping 即 分組。如果想把某些輸出分組，這樣查看的時候，可以通過折疊展開來查看某一部分的打印信息。group() 和 groupCollapsed() 都是開始一個分組，groupEnd() 結束一個分組；goup() 和 groupCollapsed() 的區別是，一個打印的信息是展開的，一個是折疊的。如下例子：

打印信息特殊標識符

舉例介紹一下 console 中的特殊標識符

• %s 字符串替代

  console.log('hello %s, hello', 'world')
  // hello world, hello
  

• %d or %i 十進制整數替換

  console.log('you have %d apples', 10)
  // you have 10 apples
  console.log('you have %i apples', 10)
  // you have 10 apples
  

• %f 十進制浮點數替換

  console.log('0.1 + %f = 0.3', 0.2)
  // 0.1 + 0.2 = 0.3
  

• %o, %O 分別對應 dirxml() 和 dir() 的對象展示形式

  console.log('hello %o world', {a: 1})
  // hello {a: 1} world
  
  console.log('hello %O world', {a: 1})
  // hello Object world
  

• %c css 樣式作用到輸出信息

  可以通過 css 來改變輸出信息的字體、顏色、背景等，具體支持哪些 css，可以參考 MDN。發現可以作用的 css 比較類似于偽元素 ::first-letter。通過這些 css ，你就可以有很大的空間來把你的輸出信息變得酷炫。比如我要在控制臺打印一只貓：
  

總結

Console API 為開發者提供了一些方便的功能，比如不同級別日志輸出、計數器、計時器等，另外還為日志信息提供了各種展示形式，特別有趣的是還可以作用 css，這可以讓你的控制臺輸出信息變得酷炫有趣。