console篇 - console中騷操作

console篇 - console中騷操作

1. console.assert
   在 MDN 中是這樣定義的

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

當我們傳入的第一個參數爲 假 時，console.assert 打印跟在這個參數後面的值。

這個方法適用於什麼情況呢？舉個栗子：

通過它，你可以擺脫令人討厭的 if 表達式，還可以獲得堆棧信息。

請注意，如果你使用的 NodeJS 版本 ≤ 10.0 ， console.assert 可能會中斷後面代碼的執行，但是在 .10 的版本中被修復了(當然，在瀏覽器中不存在這個問題)

2. 增強 log 的閱讀體驗
   有時即使你 console.log 一個簡單的變量，你可能會忘記（或混淆）哪一個是那個。那當你有不同的變量需要打印的時候，閱讀起來會更費勁。

假如有這麼一堆你想要輸出但看起來並不易讀的數據

“哪一個值對應哪一個變量來着？”

爲了讓它變得更加易讀，你可以打印一個對象 - 只需將所有 console.log 的參數包裝在大括號中。感謝 ECMAScript 2015 中引入了 enhanced object literal(增強對象文字面量) ，所以加上 {} 已經是你需要做的全部事情了：

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

如果你覺得展示的列太多了，使用第二個參數，傳入你想要展示的列的名字:

對於後臺而言，只有 node 版本大於 10 以上， console.table 才能起作用

4. table 和 {} 的配合
   我們剛剛看到了 console.table 這個技巧，也瞭解了在他上面的 {} ，那麼我們爲什麼不將他們結合起來打造一個終極 log 呢？
   

5. console.dir
   有時候你想要打印一個 DOM 節點。 console.log 會將這個交互式的元素渲染成像是從 Elements 中剪切出來的一樣。如果說你想要查看 這個節點所關聯到的真實的js對象 呢？並且想要查看他的 屬性 等等？

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

6. 給 logs 加上時間戳
   我們總是需要打印各式各樣的信息，之前我們討論瞭如何讓輸出的信息更加直觀，但是如果我們需要打印相關的時間信息呢？這就用到了計時的相關操作。

如果你想要給你的應用中發生的事件加上一個確切的時間記錄，開啓 timestamps 。你可以在設置(在調試工具中的 ⋮ 下拉中找到它，或者按下 F1 )中來開啓或者使用 Commands Menu：

7.監測執行時間
與其在所有事上展示一個時間戳，或許你對腳本中的特殊的節點之間執行的時間跨度更加感興趣，對於這樣的情況，我們可以採用一對有效的 console 方法

console.time() — 開啓一個計時器
console.timeEnd() — 結束計時並且將結果在 console 中打印出來
如果你想一次記錄多件事，可以往這些函數中傳入不同的標籤值。(例如: console.time(‘loading’) ， console.timeEnd(‘loading’) )

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

9. 讓 console.log 基於調用堆棧自動縮進
   配合 Error 對象的 stack 屬性，讓你的 log 可以根據堆棧的調用自動縮進：

function log(message) {
console.log(
// 這句話是重點當我們 new 出來的 Error 對象時，會匹配它的stack 信息中的換行符，換行符出現的次數也等同於它在堆棧調用時的深度。
’ '.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();

運行結果如下：

10. 直接在回調中使用 console.log
    是不是經常有這樣的情況，就是我確定要將什麼傳遞給回調函數。在這種情況下，我會在裏面添加一個 console.log 來檢查。

有兩種方式來實現：

在這裏插入圖片描述
在回調方法的內部使用 console.log
直接使用 consolelog 來作爲回調方法。
我推薦使用第二種，因爲這不僅減少了輸入，還可能在回調中接收多個參數。(這在第一個解決方案中是沒有的)

11. 使用實時表達式
    在本文形成的不久前，DevTools 在 Console 面板中引入了一個非常漂亮的附加功能，這是一個名爲 Live expression 的工具

只需按下 “眼睛” 符號，你就可以在那裏定義任何 JavaScript 表達式。 它會不斷更新，所以表達的結果將永遠，存在 😃

同時支持定義好幾個：

來自掘金小冊 你不知道的 Chrome 調試技巧