- 原文地址：Getting creative with the Console API!
- 原文作者：Areknawo
- 譯文出自：掘金翻譯計劃
- 本文永久連結：github.com/xitu/gold-m…
- 譯者：wznonstop
- 校對者：Tammy-Liu, ezioyuan
在 Javascript 中 Console API 和 Debugging 總是密不可分的，其大多通過 console.log() 的方式使用。然而，你知道它不僅僅只有這種使用方法嗎？你是否也已經對 console.log() 的單一輸出方式感到厭倦了呢？你是否也想讓你的 log 更出色更優美嗎？ ? 如果你的你的答案是肯定的話，跟隨我，讓我們一起發現 Console API 真正的多姿多彩和趣味性！
Console.log()
無論你是否相信，console.log() 本身還是有一些你可能不知道的額外功能。當然，她的基礎目的 — logging — 是不變的。我們唯一能做的就是使它更加出色。讓我們嘗試一下怎麼樣？ ?
String subs
與 console.log() 這一方法緊密相關的唯一事情是你可以將它與所謂的 字串替換 一同使用。這基本上就是為你提供了使用字串特定表示式的選項，然後將其替換為提供的引數。它看起來有點像這樣：
console.log("Object value: %o with string substitution",
{string: "str", number: 10});
複製程式碼是不是很棒呢？關鍵是字串替換表示式有多種變化：
- %o / %O — 用於物件;
- %d / %i — 用於整數;
- %s — 用於字串;
- %f — 用於浮點數;
但是，看了上面這些，你可能要問，為什麼要使用這樣一個特徵？尤其是當你可以簡單的傳遞多個值給 log 的時候，如下所示：
console.log("Object value: ",
{string: "str", number: 10},
" with string substitution");
複製程式碼此外，對於字串和數字，你可以只使用 字串字面值！那麼，有什麼問題呢？首先，我將講一下當你做一些不錯的 console log 時，你只需要一些不錯的字串，log subs 可以允許你輕鬆做到這一點。至於上文所講的字串替換 — 你必須認同的是 — 你需要睜大眼睛看看這些空間。? 使用 subs，它更方便。至於字串字面值，他們並沒有像這些 subs 一樣長（驚喜！?），並且他們不會為物件提供相同的，良好的格式。但是，只要你只使用數字和字串，你可能更傾向於 一個不同的方法。
CSS
我們再學一種以往尚未學過的類子字串編譯指令，就是 %c，它允許你應用 css 風格的 字串去記錄資訊！? 讓我來為你們展示下如何使用！
console.log("Example %cCSS-styled%c %clog!",
"color: red; font-family: monoscope;",
"", "color: green; font-size: large; font-weight: bold");
複製程式碼上面的例子是 %c 指令的廣泛應用。正如你所見到的那樣，樣式應用於處在該編譯指令 後面 的所有內容，除非你使用其他的編譯指令，而這是我們正要做的。如果你使用普通的無樣式的 log 格式，你將需要傳遞一個空字串。不言而喻，這個提供給 %c 編譯指令和子字串的值需要按照預期的順序一個一個地提交給下一步的引數。 ?
Grouping & tracing
我們已經在 log 中引入了 CSS，這僅僅只是一個開始，那麼 Console API 還有哪些祕密呢？
Grouping
加入過多的 console log 並不是很健康，它可能導致更糟糕的可讀性，從而出現無意義的 log 的情形。然而適當地建立一些 結構 總是好的。你可以通過使用 [console.group()](https://developer.mozilla.org/en-US/docs/Web/API/Console/group) 的方法精準地實現。通過使用該方法，你可以在 console group 中建立深層次的、可摺疊的結構，這允許你隱藏並組織你的 log。如果你希望在預設情況下將 log group 摺疊，還有一個方法是使用 [console.groupCollapsed()](https://developer.mozilla.org/en-US/docs/Web/API/Console/groupCollapsed)。當然，console group 可以根據你的需要進行巢狀（就像你想的那樣）。你還可以通過向其傳遞引數列表來使得你的 log group 具有類 header-log（就像使用 console.log()）。在呼叫 log group 方法後完成，每個控制檯呼叫都將在建立的組中找到它的位置。要退出的話，需要使用一個特殊的方法叫做 [console.groupEnd()](https://developer.mozilla.org/en-US/docs/Web/API/Console/groupEnd)。很簡單，對嗎？?
console.group();
console.log("Inside 1st group");
console.group();
console.log("Inside 2nd group");
console.groupEnd();
console.groupEnd();
console.log("Outer scope");
複製程式碼我想你已經注意到，你只需將所有提供的程式碼段中的程式碼 複製並貼上 到你的控制檯，然後以你想要的方式使用它們！
Tracing
另外一個關於 Console API 的有用的資訊是獲取當前呼叫的路徑（執行路徑/堆疊跟蹤）。你知道嗎，程式碼列表通過放置了被執行的連結（例如函式連結）去獲取當前的呼叫 [console.trace()](https://developer.mozilla.org/en-US/docs/Web/API/Console/trace)，這也正式是我們所談論的方法。無論是檢測副作用還是檢查程式碼流，這些資訊都非常有用。只需將下面的程式碼放到你的程式碼中，你就明白我說的意思啦。
console.trace("Logging the way down here!");
複製程式碼Console.XXX
你可能已經瞭解了一些關於 Console API 的不同方法。我將要講的這些能夠給你的 logs 增添一些 額外的資訊。讓我們快速的概括一下它們，好嗎？
Warning
[console.warn()](https://developer.mozilla.org/en-US/docs/Web/API/Console/warn) 這一方法操作起來就像 console.log（就像大多數這些 logging 方法一樣）。但是，它還具有 類似警告的樣式。⚠ 在大多數瀏覽器中，它應該是 黃色 的並且在有一個警告符號（出於自然因素）。預設情況下，對此方法的呼叫也會返回跟蹤，因此你可以快速找到警告（以及可能的錯誤）的來源。
console.warn("This is a warning!");
複製程式碼Error
[console.error()](https://developer.mozilla.org/en-US/docs/Web/API/Console/error)這一方法與 console.warn() 輸出具有堆疊跟蹤的訊息類似，具有特殊的樣式。它通常是 紅色 的，新增了錯誤圖示。❌ 它清楚地通知使用者某些事情是不對的。一個重要的知識點是 .error（）這個方法輸出的只是一個沒有任何附加選項的控制檯訊息，類似於停止程式碼執行（為此你需要丟擲一個錯誤）。它 只是一個簡單的說明，因為許多新使用者可能會對這種操作感到有些不確定性。
console.error("This is an error!");
複製程式碼Info & debug
還有兩種方法可用於向 logs 新增一些指令：[console.info()](https://developer.mozilla.org/en-US/docs/Web/API/Console/info) 和 [console.debug()](https://developer.mozilla.org/en-US/docs/Web/API/Console/debug)。 ? 運用這兩種方式輸出的內容並不總是具有獨特的風格，在某些瀏覽器中它只是一個資訊圖示。這些和上文提及的其他方法都允許你在你的控制檯訊息中應用某一特定的類別。在不同的瀏覽器中（例如基於 Chromium 的瀏覽器中），dev-tools UI 為你提供了選項，可以選擇顯示的特定類別的 log，例如錯誤，除錯訊息或資訊。這只是一個組織功能！
console.info("This is very informative!");
console.debug("Debugging a bug!");
複製程式碼Assert
還有一個特別的 Console API 方法，它為你在任何條件下進行 log（斷言）提供了捷徑。它就是 [console.assert()](https://developer.mozilla.org/en-US/docs/Web/API/Console/assert)。就像標準的 console.log() 方法一樣，它可以採用無數個引數，不同的是它的第一個引數需要是布林值。如果它解析為 true，則斷言不會被 log，否則，它會將錯誤和傳入的引數在控制檯中 log 出來（與 .error（）方法相同）。
console.assert(true, "This won't be logged!");
console.assert(false, "This will be logged!");
複製程式碼而且，在使用大量的 log 方法之後，你可能希望讓你的控制檯訊息板看起來更整潔一些。沒問題！只需使用 [console.clear()](https://developer.mozilla.org/en-US/docs/Web/API/Console/clear) 這一方法，即可看到所有之前 log 的資訊消失！這是一個非常有用的功能，它甚至在大多數瀏覽器的控制檯介面中都有自己的按鈕（和快捷方式）！
Timing
Console API 甚至提供了一組與定時器相關的功能。⌚ 在他們的幫助下，你可以對部分程式碼快速地進行效能測試。正如我之前所說，這個 API 很簡單。你可以使用這一方法 [console.time()](https://developer.mozilla.org/en-US/docs/Web/API/Console/time)，將可選引數作為標籤或者 id 賦給定時器。當你進行呼叫的時候定時器便啟動了。然後你可以使用 [console.timeLog()](https://developer.mozilla.org/en-US/docs/Web/API/Console/timeLog) 和 [console.timeEnd()](https://developer.mozilla.org/en-US/docs/Web/API/Console/timeEnd) 這兩種方法（帶有可選的標籤引數）來 log 你的時間（以毫秒為單位）以及結束定時器。
console.time();
// code snippet 1
console.timeLog(); // default: [time] ms
// code snippet 2
console.timeEnd(); // default: [time] ms
複製程式碼當然，如果你正在進行一些真正的基準測試或效能測試，我建議使用專門為此目的而設計的 Performance API。
Counting
如果你有很多的 log，而你不知道這部分被執行的程式碼出現了多少次 log，你已經猜到了！接下來這個 API 可以解決這個問題！[console.count()](https://developer.mozilla.org/en-US/docs/Web/API/Console/count) 這一方法可能是最基礎的東西，它可以計算被呼叫的次數。當然，你可以傳遞一個可選引數作為計數器的標籤（設定預設值）。稍後，你可以使用 [console.countReset()](https://developer.mozilla.org/en-US/docs/Web/API/Console/countReset) 這一方法重置所選計數器。
console.count(); // default: 1
console.count(); // default: 2
console.count(); // default: 3
console.countReset();
console.count(); // default: 1
複製程式碼就個人而言，我沒有看到很多對這個特殊功能的運用，但這樣的方法存在總是好的。也許只是我的一己之見...
Tables
我認為這是 Console API 最被低估的功能之一（超過之前提到的 CSS 樣式）。? 當除錯和檢查平面或二維物件和陣列時，向控制檯輸出真實的、可排序的表格這一能力是非常有用的。是的，你真的可以在控制檯中顯示一個表格。它只需使用帶有一個引數的簡單呼叫 [console.table()](https://developer.mozilla.org/en-US/docs/Web/API/Console/table)，該引數很可能是物件或陣列（原始值通常只是正常的 log，超過 2 維結構將被截斷為較小的對應物。只需試一下如下的程式碼來來看一下我想表達的意思！
console.table([[0,1,2,3,4], [5,6,7,8,9]]);
複製程式碼Console ASCII art
如果沒有 ASCII art，console art 就不一樣了！藉助 image-to-ascii 模組（可以在 NPM 上找到），你可以輕鬆地將普通影像轉換為 ASCII 對應模組！? 除此之外，該模組還提供了許多可自定義的設定和選項，用以建立你所需的輸出。以下是使用該庫的簡單示例：
import imageToAscii from "image-to-ascii";
imageToAscii(
"https://d2vqpl3tx84ay5.cloudfront.net/500x/tumblr_lsus01g1ik1qies3uo1_400.png",
{
colored: false,
}, (err, converted) => {
console.log(err || converted);
});
複製程式碼使用上面的程式碼，你可以建立令人驚歎的 JS 徽標，就像你現在在控制檯中建立的徽標一樣！ ?
藉助 CSS 樣式，一些填充和背景屬性，你也可以將完整的影像輸出到控制檯！例如，你可以檢視 console.image 模組（也可以在 NPM 上使用）來使用此功能。但是，我認為 ASCII 更加時尚。 ?
Modern logs
如你所見，你的 logs 和除錯過程整體上不必如此單調！除了簡單的 console.log() 之外，還有更多的好方法。有了這篇文章中的知識，選擇權現在就在你的手裡！你可以使用傳統的 console.log() 這一方法和你的瀏覽器提供的各種精美款樣式的結構，或者你可以使用上文描述的技巧為你的控制檯增添一些新意。瀏覽器提供的不同結構的傳統和精美格式，或者你可以使用上述技術為控制檯新增一些新鮮感。無論如何，即使你正在和討厭的 bug ? 鬥爭，你也要找到其中的樂趣！
我希望你喜歡這篇文章，它可以讓你學到新東西。和往常一樣，可以考慮與他人分享，讓每個人都可以讓他們的控制檯充滿色彩 ? ，並通過反饋或評論將你的意見留在下面！此外，請關注我的 Twitter 和 Facebook 上，並註冊 newsletter（即將登場）！再次，感謝閱讀，希望在下一篇文章中依舊看到你的身影！✌
如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。