JavaScript 控制檯的更多功能

做者：Preston Lamb

翻譯：瘋狂的技術宅

原文：https://www.prestonlamb.com/b...

未經容許嚴禁轉載

你可能在 JavaScript 項目中都用了console.log。這是一種查看變量的值或程序運行中發生的事情的便捷方法。可是 JavaScript console 對象還有許多其餘的功能，能夠在處理項目時提供幫助。本文將會介紹一些個人最愛，但願你在工做時記得使用它們！

請注意，此處的例子適用於在瀏覽器中運行的 JavaScript。這與在 Node.js 中運行的 JavaScript 類似，可是在 Node.js 中的行爲可能略有不一樣。

console.log

在進入其餘選項以前，讓咱們先回顧一下 console.log 的功能。 console.log 將消息輸出到控制檯。你能夠輸入一個對象、一個數組、一個對象數組、一個字符串、一個布爾值，基本上你想要打印到控制檯的任何內容均可以。這是使用 console.log 及其輸出的例子：

console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

這是 JavaScript 中最經常使用的調試方法，也是最經常使用的控制檯方法。如今讓咱們來談談其餘的一些選擇！

console.info

console.info 與 console.log 幾乎相同。它將信息性消息打印到控制檯。據我所知，log 和 info 之間並無真正的區別，只是取決於你怎樣對消息進行分類。可是若是你選擇從瀏覽器控制檯中隱藏 「info」 級別的消息，則 「log」 和 「info」 消息都會被隱藏。要使用 console.info 能夠這樣作：

console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

一樣，輸出幾乎徹底相同。

console.warn

console.warn 將警告消息打印到控制檯。從本質上講，它與前面的功能相同，可是該消息在控制檯中帶有黃色背景，並帶有警告圖標（至少在 Chrome Dev Tools 中是這樣）。當執行某些操做可能會致使你程序中的錯誤，但目前不會引發任何問題時，請使用 console.warn 。它使你和你的用戶或其餘開發人員知道那裏有可能會發生問題。

console.warn({ restaurantName: 'Pizza Planet' }); // ⚠️ { restaurantName: 'Pizza Planet' };

像前面同樣，能夠經過傳遞相同的值來把警告打印到控制檯。

console.error

console.error將錯誤信息輸出到控制檯。本質上，它與前面的功能相同，可是該消息在控制檯中具備紅色背景，並帶有帶有白色 「x」 錯誤圖標的紅色圓圈（至少在 Chrome Dev Tools 中）。當你的程序出現問題時，請使用 console.error。它爲其餘開發人員提供了一種簡便的方法來找出問題的緣由並加以解決。它將可以爲你提供錯誤的堆棧跟蹤信息，以便你也能夠查找錯誤。

console.error({ restaurantName: 'Pizza Planet' }); // ❌ { restaurantName: 'Pizza Planet' };

像前面同樣，能夠經過傳遞相同的值來把錯誤打印到控制檯。

console.table

這是我最喜歡的控制檯選項之一，儘管我常常忘記它。 console.table 接受一些可以以表格形式展現的數據並輸出。讓咱們看幾個例子。咱們首先從對象上的 console.table 開始：

console.table({ restaurantName: 'Pizza Planet', streetAddress: '123 Maple' });

在dev tools中的輸出看起來相似於此：

(index)	Value
restaurantName	Pizza Planet
streetAddress	123 Maple

它獲取對象的每一個屬性名稱，並將其放在 index 列中，並將屬性的值放入 Value 列中。這發生在數組中的每一個屬性上。那麼，若是咱們輸出對象數組會怎樣？結果將以下所示：

(index)	restaurantName	streetAddress
0	Pizza Planet	123 Maple
1	Pizza Palace	123 Elm

我發現本身一般會使用 console.log，由於我已經習慣了，可是我認爲不少時候 console.table 會更好地工做，並以一種美觀、乾淨、易讀的方式爲我輸出對象。

console.assert

console.assert 是一種將未知足你肯定條件的消息打印到控制檯的方法。該函數有兩個參數：要求值的表達式和應顯示的錯誤消息。這是一個例子：

const obj = { restaurantName: 'Pizza Planet' };
console.assert(obj.restaurantName === 'Pizza Palace', 'The name of the restaurant is not "Pizza Palace"');
// ❌ Assertion Failed; 'The name of the restaurant is not "Pizza Palace"'

這多是另外一種很是好的調試程序的方法。僅當斷言失敗時纔會顯示該消息，所以若是未顯示任何消息，則能夠假定表達式正評估正確。

console.group 和 console.groupEnd

console.group 和 console.groupEnd 是能夠將許多 console.log 邏輯分組的方式。而後，你能夠在須要時經過摺疊組以將其隱藏。至關容易使用：

console.group();
console.log({ restaurantName: 'Pizza Palace' });
console.groupEnd();

該組可能會總體摺疊。若是你須要在控制檯上記錄不少內容，這可能會頗有用。

結論

在 JavaScript 中，有不少方法能夠用於 console 對象。它們能夠幫咱們進行開發，以即可以根據類型過濾消息；查看錶中的一項或多項；或者將它們組合在一塊兒或摺疊它們，以便在須要時將其隱藏。它將改善你的工做流程。

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...