[譯] 創造性地使用 Console！

• 原文：Getting creative with the Console API!
• 做者：Twitter Facebook
• 譯者：Zavier Tang

在對 JavaScript 程序進行調試時始終離不開 Console API，而咱們大部分時間都僅僅是使用 console.log() 來完成工做。可是，你知道嗎？咱們並非必須得這樣的，你難道沒有以爲 console.log() 的單塊輸出很讓人感到厭煩嗎？其實，你可讓你的 Console 控制檯變得更好、更具可讀性💅。

Console.log()

信不信由你，console.log() 自己就有一些你可能不知道的特性。固然，它的最基本用途就是打印日誌。咱們惟一能作的就是讓它看起來更具可讀性！

替代字符串

與 console.log() 方法密切相關的唯一一件事就是，你能夠將它與所謂的替代字符串（String subs）一塊兒使用。這爲你提供了一個在字符串中使用特定表達式的功能，它將被所提供的參數給替換。以下：

console.log("Object value: %o with string substitution",
    {string: "str", number: 10});
複製代碼

控制檯結果以下：

字符串替換表達式還有其餘的一些形式：

• %o / %O - 表明 objects;
• %d / %i - 表明 integers;
• %s - 表明 strings;
• %f - 表明 floating-point numbers;

可是，你可能會想爲何要使用這樣的功能呢？不使用替代字符串，你一樣能夠很是方便的傳遞多個值到打印的日誌中，以下：

console.log("Object value: ",
    {string: "str", number: 10},
    " with string substitution");
複製代碼

也許，對於字符串和數字，你能夠只使用字符串字面量的形式。可是，我想說的是，在作一些可讀性較高的控制檯日誌輸出時，你須要較好地輸出字符串格式，而替代字符串（string subs）可讓你輕鬆地作到這一點！對於以上的選擇，你必須贊成。替代字符串（string subs）它會是更方便。至於字符串字面量，它們尚未這些像**替代字符串（string 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 指令。 正如你所見，樣式應用於 %c 指令後面的全部內容。經過使用另外一個 %c 指令來閉合樣式的使用。若是要使用普通的，無格式的日誌內容，則須要爲 %c 傳遞一個爲空的字符串。須要注意的是，提供給 ％c 指令以及其餘替代字符串的參數須要以正確的順序添加。😉

分組打印 & 打印執行路徑

咱們纔剛剛開始，上面咱們已經在日誌中引入了 CSS 樣式。接下來讓咱們來看一下 Console 還有哪些其餘的祕密呢？

分組打印

太多的控制檯日誌輸出並非一個很好的操做，它可能致使很糟糕的可讀性，從而致使沒有太多意義的日誌輸出。因此，輸出結構化的日誌老是好的。

你可使用 console.group() 來實現。經過使用該方法，你能夠在控制檯中輸出深層可摺疊的結構（組），它能夠更好的組織你的日誌輸出。若是你但願在默認狀況下摺疊你的組，還有一個 console.groupCollapsed() 方法。固然，嵌套組也能夠根據你的須要進行嵌套。你還能夠經過向其傳遞參數列表（就像使用console.log()），使你的組具備相似於日誌頭的形式。在使用 group 方法時，每一個 console 都將在建立的組中找到它的位置。可使用 console.groupEnd() 方法來閉合一個組。

console.group();
console.log("Inside 1st group");
console.group();
console.log("Inside 2nd group");
console.groupEnd();
console.groupEnd();
console.log("Outer scope");
複製代碼

我想你已經注意到了，你能夠將全部提供的代碼段中的代碼複製並粘貼到你的控制檯，並以你想要的方式嘗試它們！

控制檯結果以下：

打印執行路徑

你能夠經過 Console API 得到的另外一個有用信息是當前調用的路徑（執行路徑 / 堆棧跟蹤）。你知道嗎，會有一個列表放置了被執行的連接（例如函數鏈），當 console.trace() 被調用時，將得到它的執行路徑，這就是咱們正要談論的方法。不管是檢測反作用仍是檢查代碼流，這些信息都是很是有用。只需將下面的代碼拷貝到你的控制檯中便可看到結果。

console.trace("Logging the way down here!");
複製代碼

控制檯結果以下：

Console.XXX

你可能已經瞭解到了一些 Console API 有趣的方法。接下來，咱們立刻要討論的是關於在日誌中添加一些額外的信息。不如讓咱們快速的認識一下它們吧！

Warning

console.warn() 的效果和 console.log() 同樣，可是它會有相似警告的樣式效果。在大多數的瀏覽器當中，它顯示爲黃色的文字而且提示一個警告符號 ⚠。同時，在默認狀況下，console.warning() 也會打印執行路徑，這樣能夠快速地找到警告的來源。

console.warn("This is a warning!");
複製代碼

Error

與 console.warn() 相似，console.error() 方法也會打印帶有執行路徑的消息，消息的樣式也是特殊的。它一般是紅色的，而且添加了錯誤圖標❌。這樣能夠清楚地通知用戶這裏有某些可能錯誤的代碼。這裏值得注意的是，console.error() 方法只是打印一個控制檯消息，它是沒有任何附加效果的，好比中止代碼的執行（因此這裏你能夠拋出一個錯誤）。這是一個簡單的說明，由於許多初學者可能會對這種特性感到有些困擾。

console.error("This is an error!");
複製代碼

Info & debug

還有兩種方法可用於向日志中打印一些消息。接下來咱們要介紹的是 console.info() 和 console.debug() 。它們的打印結果並不老是具備獨特的樣式 —— 在某些瀏覽器中它只是一個圖標。其實，這些以及以前的方法是爲了便於將你的某些操做按照不一樣的類別打印在控制檯中。在不一樣的瀏覽器中，開發工具用戶界面爲你提供了要顯示的特定類別日誌的選項，例如：錯誤、調試消息或普通訊息。

console.info("This is very informative!");
console.debug("Debugging a bug!");
複製代碼

Assert

甚至還有一個特殊的 Console 方法，它提供了在條件判斷下（斷言）執行不一樣打印效果的快捷方式。它是 console.assert() 。 就像標準的 console.log() 方法同樣，它可使用無數個參數，區別在於第一個必須是一個布爾值斷言。若是斷言是 true，則沒有任何反應，反之，它會將全部傳遞的參數當成錯誤消息寫入控制檯（與 console.error() 方法相同）。

console.assert(true, "This won't be logged!");
console.assert(false, "This will be logged!");
複製代碼

而後，在打印了一些消息以後，你可能但願讓你的控制檯消息面板看起來更乾淨一些。沒問題！只需使用 console.clear() 方法，便可讓全部打印過的舊日誌所有消失！這是一個很是有用的功能，它甚至在大多數瀏覽器的控制檯界面中都有本身的按鈕（和快捷方式）！👍

console.clear()
複製代碼

計時

Console API 甚至還提供了一組與時序相關的方法⌚。使用它們，你能夠對部分代碼進行快速的性能測試。這個API很簡單，你可使用 console.time() 方法開始，該方法能夠將可選參數做爲給定計時器的標籤或標識。相關的計時器就在調用此方法時啓動。而後，你可使用 console.timeLog() 和 console.timeEnd() 方法（帶有可選的標識參數）來記錄你的時間（以毫秒爲單位）或者結束相應的計時器。

console.time();
// code snippet 1
console.timeLog(); // default: [time] ms
// code snippet 2
console.timeEnd(); // default: [time] ms
1234
複製代碼

固然，若是是正在進行一些真正的基準測試或性能測試，建議使用專門爲此目的而設計的 Performance API。

計數

若是你有打印了許多的日誌，但你不知道給定部分代碼執行了多少次？這裏也有一個 API —— console.count() 方法它最基本的功能就是計算它被調用的次數。固然，你一樣能夠傳遞一個可選的參數，爲給定計數器提供標籤（默認爲 default）。你可使用 console.countReset() 方法重置所選的計數器。

console.count(); // default: 1
console.count(); // default: 2
console.count(); // default: 3
console.countReset();
console.count(); // default: 1
複製代碼

表格

我認爲這是 Console API 最被低估的功能之一（超出以前提到的 CSS 樣式）。當在調試和打印二維對象和數組時，向控制檯輸出真實的可排序表格的能力是很是有用的。對的！實際上能夠在控制檯中顯示一個表格。你只需使用 console.table() 並傳遞一個參數這麼簡單（是對象或數組，若是是原始值一般只是打印普通的日誌），嘗試下面的代碼片斷便可看到效果。

console.table([[0, 1, 2, 3, 4], [5, 6, 7, 8, 9]]);
複製代碼

Console ASCII art

若是沒有 ASCII 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 LOGO，就像如今在控制檯中的同樣！🤯

藉助 CSS 樣式，使用一些填充和背景屬性，你還能夠將完整的圖像輸出到控制檯！例如：你能夠查看console.image 模塊（也在 NPM上）來使用此功能。可是，我認爲 ASCII 更加時尚。💅

現代化的 Logs

如你所見，你的日誌和調試的過程已經徹底沒必要是如此的單色！除了簡單的 console.log() 以外，還有更多的方法。有了這篇文章的知識，如今你就能夠進行選擇了！你可使用傳統的 console.log() 和瀏覽器提供的不一樣結構的精美格式，或者你也可使用上述方法爲控制檯添加一些新鮮感。

我但願你喜歡這篇文章，也但願它可讓你學到新的知識。同時，你能夠將這篇文章分享給他人，這樣任何人均可以擁有充滿色彩的控制檯🌈，你也能夠經過評論留下你的意見！另外，你能夠關注個人 Twitter，也能夠給個人 Facebook 發送時事通信！最後，再次感謝閱讀，下一篇文章再見！✌