[譯] 創意運用 Console API！

• 原文地址：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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。