我最開始接觸前端的時(shí)候，學(xué)會(huì)用的就是 console.log 们镜，甚至現(xiàn)在币叹，大部分情況也還在用它調(diào)試，但是模狭，在不同的場景下颈抚，除了 log ，其實(shí)有更好的選擇嚼鹉。

1. console.assert

在 MDN 中是這樣定義的

console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // c-like message formatting

當(dāng)我們傳入的第一個(gè)參數(shù)為 假 時(shí)贩汉，console.assert 打印跟在這個(gè)參數(shù)后面的值。

這個(gè)方法適用于什么情況呢锚赤？舉個(gè)栗子：

通過它匹舞，你可以擺脫令人討厭的 if 表達(dá)式，還可以獲得堆棧信息线脚。

請(qǐng)注意赐稽，如果你使用的 NodeJS 版本 ≤ 10.0 叫榕， console.assert 可能會(huì)中斷后面代碼的執(zhí)行，但是在 .10 的版本中被修復(fù)了(當(dāng)然姊舵，在瀏覽器中不存在這個(gè)問題)

2. 增強(qiáng) log 的閱讀體驗(yàn)

有時(shí)即使你 console.log 一個(gè)簡單的變量晰绎，你可能會(huì)忘記（或混淆）哪一個(gè)是那個(gè)。那當(dāng)你有不同的變量需要打印的時(shí)候括丁，閱讀起來會(huì)更費(fèi)勁荞下。

假如有這么一堆你想要輸出但看起來并不易讀的數(shù)據(jù)

“哪一個(gè)值對(duì)應(yīng)哪一個(gè)變量來著？”

為了讓它變得更加易讀躏将，你可以打印一個(gè)對(duì)象 - 只需將所有 console.log 的參數(shù)包裝在大括號(hào)中锄弱。感謝 ECMAScript 2015 中引入了 enhanced object literal(增強(qiáng)對(duì)象文字面量) ，所以加上 {} 已經(jīng)是你需要做的全部事情了：

3.console.table

console.table 這個(gè)小技巧在開發(fā)者中可能并沒有多少人知道: 如果有一個(gè) 數(shù)組 (或者是 類數(shù)組 的對(duì)象祸憋，或者就是一個(gè) 對(duì)象 )需要打印会宪，你可以使用 console.table 方法將它以一個(gè)漂亮的表格的形式打印出來。它不僅會(huì)根據(jù)數(shù)組中包含的對(duì)象的所有屬性蚯窥，去計(jì)算出表中的列名掸鹅，而且這些列都是可以 縮放甚至 還可以排序!!!

如果你覺得展示的列太多了，使用第二個(gè)參數(shù)拦赠，傳入你想要展示的列的名字:

image

對(duì)于后臺(tái)而言巍沙，只有 node 版本大于 10 以上， console.table 才能起作用

4. table 和 {} 的配合

我們剛剛看到了 console.table 這個(gè)技巧荷鼠，也了解了在他上面的 {} 句携，那么我們?yōu)槭裁床粚⑺麄兘Y(jié)合起來打造一個(gè)終極 log 呢？

5. console.dir

有時(shí)候你想要打印一個(gè) DOM 節(jié)點(diǎn)允乐。 console.log 會(huì)將這個(gè)交互式的元素渲染成像是從 Elements 中剪切出來的一樣矮嫉。如果說你想要查看 這個(gè)節(jié)點(diǎn)所關(guān)聯(lián)到的真實(shí)的js對(duì)象 呢？并且想要查看他的 屬性 等等牍疏？

在那樣的情況下蠢笋，就可以使用console.dir:

6. 給 logs 加上時(shí)間戳

我們總是需要打印各式各樣的信息，之前我們討論了如何讓輸出的信息更加直觀鳞陨，但是如果我們需要打印相關(guān)的時(shí)間信息呢昨寞？這就用到了計(jì)時(shí)的相關(guān)操作。

如果你想要給你的應(yīng)用中發(fā)生的事件加上一個(gè)確切的時(shí)間記錄厦滤，開啟 timestamps 援岩。你可以在設(shè)置(在調(diào)試工具中的 ? 下拉中找到它，或者按下 F1 )中來開啟或者使用 Commands Menu：

7.監(jiān)測(cè)執(zhí)行時(shí)間

與其在所有事上展示一個(gè)時(shí)間戳掏导，或許你對(duì)腳本中的特殊的節(jié)點(diǎn)之間執(zhí)行的時(shí)間跨度更加感興趣享怀，對(duì)于這樣的情況，我們可以采用一對(duì)有效的 console 方法

• console.time() — 開啟一個(gè)計(jì)時(shí)器
• console.timeEnd() — 結(jié)束計(jì)時(shí)并且將結(jié)果在 console 中打印出來

如果你想一次記錄多件事碘菜，可以往這些函數(shù)中傳入不同的標(biāo)簽值凹蜈。(例如: console.time('loading') 限寞， console.timeEnd('loading') )

8. 給你的 console.log 加上 CSS 樣式

如果你給打印文本加上 %c 那么 console.log 的第二個(gè)參數(shù)就變成了CSS 規(guī)則！這個(gè)特性可以讓你的日志脫穎而出(例如 Facebook 在你打開 console 的時(shí)候所做的一樣)

ex:console.log('%cStop', 'color:red')

9. 讓 console.log 基于調(diào)用堆棧自動(dòng)縮進(jìn)

配合 Error 對(duì)象的 stack 屬性仰坦，讓你的 log 可以根據(jù)堆棧的調(diào)用自動(dòng)縮進(jìn)：

function log(message) {
      console.log(
        // 這句話是重點(diǎn)當(dāng)我們 new 出來的 Error 對(duì)象時(shí)履植，會(huì)匹配它的stack 信息中的換行符，換行符出現(xiàn)的次數(shù)也等同于它在堆棧調(diào)用時(shí)的深度悄晃。
        ' '.repeat(new Error().stack.match(/\n/g).length - 2) + message
      );
    }

    function foo() {
      log('foo');
      return bar() + bar();
    }

    function bar() {
      log('bar');
      return baz() + baz();
    }

    function baz() {
      log('baz');
      return 17;
    }

    foo();

運(yùn)行結(jié)果如下：

10. 直接在回調(diào)中使用 console.log

是不是經(jīng)常有這樣的情況玫霎，就是我確定要將什么傳遞給回調(diào)函數(shù)。在這種情況下妈橄，我會(huì)在里面添加一個(gè) console.log 來檢查庶近。

有兩種方式來實(shí)現(xiàn)：

• 在回調(diào)方法的內(nèi)部使用 console.log
• 直接使用 consolelog 來作為回調(diào)方法。

我推薦使用第二種眷蚓，因?yàn)檫@不僅減少了輸入鼻种，還可能在回調(diào)中接收多個(gè)參數(shù)。(這在第一個(gè)解決方案中是沒有的)

11. 使用實(shí)時(shí)表達(dá)式

在本文形成的不久前沙热，DevTools 在 Console 面板中引入了一個(gè)非常漂亮的附加功能叉钥，這是一個(gè)名為 Live expression 的工具

只需按下 "眼睛" 符號(hào)，你就可以在那里定義任何 JavaScript 表達(dá)式篙贸。 它會(huì)不斷更新投队，所以表達(dá)的結(jié)果將永遠(yuǎn)，存在 :-)

同時(shí)支持定義好幾個(gè)：