更多的 JavaScript 控制檯功能
瘋狂的技術宅 前端先鋒
翻譯：瘋狂的技術宅
作者：Preston Lamb
來源：prestonlamb.com
正文共：2407 字
預計閱讀時間：7 分鐘
你可能在 JavaScript 項目中用了console.log。這是一種查看變量值或程序運行中發生的事情的便捷方法。但是 JavaScript console 對象還有許多其他的功能，可以在處理項目時提供幫助。本文將會介紹一些我的最愛，希望你在工作時記得使用它們！
請注意，此處的例子適用於在瀏覽器中運行的 JavaScript。這與在 Node.js 中運行的 JavaScript 相似，但是在 Node.js 中的行爲可能略有不同。
console.log
在進入其他選項之前，讓我們先回顧一下 console.log 的功能。console.log 將消息輸出到控制檯。你可以輸入一個對象、一個數組、一個對象數組、一個字符串、一個布爾值，基本上你想要打印到控制檯的任何內容都可以。這是使用 console.log 及其輸出的例子：
1console.log({ restaurantName: 'Pizza Planet' }); // {
``` restaurantName: 'Pizza Planet' };
這是 JavaScript 中最常用的調試方法，也是最常用的控制檯方法。現在讓我們來談談其他的一些選擇！
### console.info
console.info 與 console.log 幾乎相同。它將信息性消息打印到控制檯。據我所知，log 和 info 之間並沒有真正的區別，只是取決於你怎樣對消息進行分類。但是如果你選擇從瀏覽器控制檯中隱藏 “info” 級別的消息，則 “log” 和 “info” 消息都會被隱藏。要使用 console.info 可以這樣做：
1console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };
同樣，輸出幾乎完全相同。
### console.warn
console.warn 將警告消息打印到控制檯。從本質上講，它與前面的功能相同，但是該消息在控制檯中帶有黃色背景，並帶有警告圖標（至少在 Chrome Dev Tools 中是這樣）。當執行某些操作可能會導致你程序中的錯誤，但目前不會引起任何問題時，請使用 console.warn 。它使你和你的用戶或其他開發人員知道那裏有可能會發生問題。
1console.warn({ restaurantName: 'Pizza Planet' }); // ⚠️ { restaurantName: 'Pizza Planet' };
### console.error
console.error將錯誤信息輸出到控制檯。本質上，它與前面的功能相同，但是該消息在控制檯中具有紅色背景，並帶有帶有白色 “x” 錯誤圖標的紅色圓圈（至少在 Chrome Dev Tools 中）。當你的程序出現問題時，請使用 console.error。它爲其他開發人員提供了一種簡便的方法來找出問題的原因並加以解決。它將能夠爲你提供錯誤的堆棧跟蹤信息，以便你也可以查找錯誤。
1console.error({ restaurantName: 'Pizza Planet' }); // ❌ { restaurantName: 'Pizza Planet' };
像前面一樣，可以通過傳遞相同的值來把錯誤打印到控制檯。
### console.table
這是我最喜歡的控制檯選項之一，儘管我經常忘記它。console.table 接受一些能夠以表格形式展示的數據並輸出。讓我們看幾個例子。我們首先從對象上的 console.table 開始：
1console.table({ restaurantName: 'Pizza Planet', streetAddress: '123 Maple' });
在dev tools中的輸出看起來類似於此：
它獲取對象的每個屬性名稱，並將其放在 index 列中，並將屬性的值放入 Value 列中。這發生在數組中的每個屬性上。那麼，如果我們輸出對象數組會怎樣？結果將如下所示：
我發現自己通常會使用 console.log，因爲我已經習慣了，但是我認爲很多時候 console.table 會更好地工作，並以一種美觀、乾淨、易讀的方式爲我輸出對象。
### console.assert
console.assert 是一種將未滿足你確定條件的消息打印到控制檯的方法。該函數有兩個參數：要求值的表達式和應顯示的錯誤消息。這是一個例子：
1const obj = { restaurantName: 'Pizza Planet' };
2console.assert(obj.restaurantName === 'Pizza Palace', 'The name of the restaurant is not "Pizza Palace"');
3// ❌ Assertion Failed; 'The name of the restaurant is not "Pizza Palace"'
這可能是另一種非常好的調試程序的方法。僅當斷言失敗時纔會顯示該消息，因此如果未顯示任何消息，則可以假定表達式正評估正確。
### console.group 和 console.groupEnd
console.group 和 console.groupEnd 是可以將許多 console.log 邏輯分組的方式。然後，你可以在需要時通過摺疊組以將其隱藏。相當容易使用：
1console.group();
2console.log({ restaurantName: 'Pizza Palace' });
3console.groupEnd();
該組可能會整體摺疊。如果你需要在控制檯上記錄很多內容，這可能會很有用。
### 結論
在 JavaScript 中，有很多方法可以用於 console 對象。它們可以幫我們進行開發，以便可以根據類型過濾消息；查看錶中的一項或多項；或者將它們組合在一起或摺疊它們，以便在需要時將其隱藏。它將改善你的工作流程。
原文鏈接
https://www.prestonlamb.com/blog/theres-more-to-the-javascript-console