[譯] 如何充分利用 JavaScript 控制檯

• 原文地址：How to get the most out of the JavaScript console
• 原文做者：Darryl Pargeter
• 譯文出自：掘金翻譯計劃
• 譯者：sunui
• 校對者：reid3290、Aladdin-ADD

---

JavaScript 中最基本的調試工具之一就是 console.log()。console 還附帶了一些其餘好用的方法，能夠添加到開發人員的調試工具包中。

你能夠使用 console 執行如下任務：

• 輸出一個計時器來協助進行簡單的基準測試
• 輸出一個表格來以易讀的格式顯示一個數組或對象
• 使用 CSS 將顏色和其餘樣式選項應用於輸出

Console 對象

console 對象容許您訪問瀏覽器的控制檯。它容許你輸出有助於調試代碼的字符串、數組和對象。console 是 window 對象的屬性，由瀏覽器對象模型(BOM)提供。

咱們能夠經過這兩種方法之一訪問 console：

1. window.console.log('This works')
2. console.log('So does this')

第二個選項本質上是對前者的引用，因此咱們使用後者以精簡代碼。

關於 BOM 的快速提示：它沒有設定標準，因此每家瀏覽器都以稍微不一樣的方式實現。我在 Chrome 和 Firefox 測試了全部示例，但你的輸出可能有所不一樣，這取決於你使用的瀏覽器。

輸出文本

將文本記錄到控制檯
console 對象最多見的元素是 console.log，對於大多數狀況，使用它就能夠完成任務。

輸出信息到控制檯的四種方式：

1. log
2. info
3. warn
4. error

他們四個工做方式相同。你惟一要作的是給選擇的方法傳遞一個或更多的參數。控制檯會顯示不一樣的圖標來指示其記錄級別。下面的例子中你能夠看到 info 級別的記錄和 warning/error 級別的不一樣之處。

簡單易讀的輸出

輸出東西太多將變得難以閱讀

你可能注意到了 error 日誌消息 —— 它比其餘消息更顯眼。它顯示着紅色的背景和堆棧跟蹤，而 info 和 warn 就不會。可是在 Chrome 中 warn 確實有一個黃色的背景。

視覺上的區分有助於你在控制檯快速瀏覽辨別出錯誤或警告信息。你應該確保在準備生產的應用中移除它們，除非你打算讓它們來警示其餘操做你的代碼的開發者。

字符串替換

這個技術能夠使用字符串中的佔位符來替換你向方法中傳入的其餘參數。

輸入： console.log('string %s', 'substitutions')

輸出： string substitutions

%s 是逗號後面第二個參數 'substitutions' 的佔位符。任何的字符串、整數或數組都將被轉換成字符串並替換 %s。若是你傳入一個對象，它將顯示爲 [object Object]。

若是你想傳入對象，你須要使用 %o 或者 %O，而不是 %s。

console.log('this is an object %o', { obj: { obj2: 'hello' }})

數字

字符串替換能夠與整數和浮點數一塊兒使用：

• 整數使用 %i 或 %d,
• 浮點數使用 %f。

輸入： console.log('int: %d, floating-point: %f', 1, 1.5)

輸出：int: 1, floating-point: 1.500000

能夠使用 %.1f 來格式化浮點數，使小數點後僅顯示一位小數。你能夠用 %.nf 來顯示小數點後 n 位小數。

若是咱們使用上述例子顯示小數點後一位小數來格式化浮點數值，它看起來這樣：

輸入： console.log('int: %d, floating-point: %.1f', 1, 1.5)

輸出： int: 1, floating-point: 1.5

格式化說明符

1. %s | 使用字符串替換元素
2. %(d|i)| 使用整數替換元素
3. %f| 使用浮點數替換元素
4. %(o|O) | 元素顯示爲一個對象
5. %c | 應用提供的 CSS

字符串模板

隨着 ES6 的出現，模板字符串是替換或鏈接的替代品。他們使用反引號(``)來代替引號，變量包裹在 ${} 中：

const a = 'substitutions';

console.log(`bear: ${a}`);

// bear: substitutions複製代碼

對象在模板字符串中顯示爲 [object Object]，因此你將須要使用 %o 或 %O 替換以看到詳情，或單獨記錄。

比起使用字符串鏈接：console.log('hello' + str + '!');，使用替換或模板能夠建立更易讀的代碼。

美妙的彩色插曲！

如今，是時候來點更有趣而多彩的東西了！

是時候用字符串替換讓咱們的 console 彈出豐富多彩的顏色了。

我將使用一個模仿 Ajax 的例子，給咱們顯示一個請求成功（用綠色）和失敗（用紅色）。這是輸出和代碼：

成功的小熊和失敗的蝙蝠

const success = [
 'background: green',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');

const failure = [
 'background: red',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');

console.info('%c /dancing/bears was Successful!', success);
console.log({data: {
 name: 'Bob',
 age: 'unknown'
}}); // "mocked" data response

console.error('%c /dancing/bats failed!', failure);
console.log('/dancing/bats Does not exist');複製代碼

在字符串替換中使用 %c 佔位符來應用你的樣式規則。

console.error('%c /dancing/bats failed!', failure);複製代碼

而後把你的 CSS 元素做爲參數，你就能看到應用 CSS 的日誌了。 你也能夠給你的字符串添加多個 %c。

console.log('%cred %cblue %cwhite','color:red;','color:blue;', 'color: white;')複製代碼

這將按照他們的表明的顏色輸出字符 「red」、「blue」 和 「white」。

控制檯僅僅支持少數 CSS 屬性，建議你試驗一下哪些支持哪些不支持。重申一下，你的輸出結果可能因你的瀏覽器而異。

其餘可用的方法

還有幾個其餘可用的 console 方法。注意下面有幾項還不是 API 標準，因此可能瀏覽器間互不兼容。這個例子使用的是 Firefox 51.0.1。

Assert()

Assert 攜帶兩個參數 —— 若是第一個參數計算爲 false，那麼它將顯示第二個參數。

let isTrue = false;

console.assert(isTrue, 'This will display');

isTrue = true;

console.assert(isTrue, 'This will not');複製代碼

若是斷言爲 false，控制檯將輸出內容。它顯示爲一個上文提到的 error 級別的日誌，給你顯示一個紅色的錯誤消息和堆棧跟蹤。

Dir()

dir 方法顯示一個傳入對象的可交互屬性列表。

console.dir(document.body);複製代碼

Chrome 會顯示不一樣的層級
最終，dir 僅僅能節省一兩次點擊，若是你須要檢查一個 API 響應返回的對象，你能夠用它結構化地顯示出來以節約一些時間。

Table()

table 方法用一個表格顯示數組或對象

console.table(['Javascript', 'PHP', 'Perl', 'C++']);複製代碼

輸出數組

數組的索引或對象的屬性名位於左側的索引欄，值顯示在右側列欄。

const superhero = {
    firstname: 'Peter',
    lastname: 'Parker',
}
console.table(superhero);複製代碼

輸出對象

Chrome 用戶須要注意： 這是個人同事提醒個人，上述 table 方法的例子在 Chrome 中貌似不能工做。你能夠經過將項目放入數組或對象數組中來解決此問題。

console.table([['Javascript', 'PHP', 'Perl', 'C++']]);

const superhero = {
    firstname: 'Peter',
    lastname: 'Parker',
}
console.table([superhero]);複製代碼

Group()

console.group() 由至少三個 console 調用組成，它多是使用時須要打最多字的方法。但它也是最有用的方法之一（特別對使用 Redux Logger 的開發者）。

稍基礎的調用看起來是這樣的：

console.group();
console.log('I will output');
console.group();
console.log('more indents')
console.groupEnd();
console.log('ohh look a bear');
console.groupEnd();複製代碼

這將輸出多個層級，顯示效果因你的顯示器而異。

Firefox 顯示成縮進列表：

Chrome 顯示成對象的風格：

每次調用 console.group() 都將開啓一個新的組，若是在一個組內會建立一個新的層級。每次調用 console.groupEnd() 都會結束當前組或層級並向上移動一個層級。

我發現 Chrome 的輸出樣式更易讀，由於它看起來像一個可摺疊的對象。

你能夠給 group 傳入一個 header 參數，它將被顯示並替代 console.group：

console.group('Header');複製代碼

若是你調用 console.groupCollapsed()，你能夠從一開始就將這個組顯示爲摺疊。據我所知，這個方法可能只有 Chrome 支持。

Time()

time 方法和上文的 group 方法相似，由兩部分組成。

一個用於啓動計時器的方法和一箇中止它的方法。

一旦計時器完成，它將以毫秒爲單位輸出總運行時間。

啓動計時器使用 console.time('id for timer')，結束計時器使用 console.timeEnd('id for timer')。您能夠同時運行多達 10,000 個定時器。

輸出結果可能有點像這樣： timer: 0.57ms。

當你須要作一個快速的基準測試時，它很是有用。

結論

咱們已經更深刻地瞭解了 console 對象以及其中附帶的其餘一些方法。當咱們須要調試代碼時，這些方法是可用的好工具。

仍然有幾種方法我沒有談論，由於他們的 API 依然在變更。具體能夠閱讀 MDN Web API 和 WHATWG 規範。

developer.mozilla.org/en/docs/Web…

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。