原文：Getting creative with the Console API! 作者：Twitter Facebook
譯文：創造性地使用 Console！ 譯者：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 傳送時事通訊！最後，再次感謝閱讀，下一篇文章再見！✌
譯者注：《JavaScript Weekly》週刊正在翻譯中...
請戳 -> JavaScript-Weekly-zh-CN