概述

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

請注意，此處的例子適用于在瀏覽器中運行的 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對象。它們可以幫我們進行開發，以便可以根據類型過濾消息；查看表中的一項或多項；或者將它們組合在一起或折疊它們，以便在需要時將其隱藏。它將改善你的工作流程。

以上就是JavaScript控制臺的更多功能的詳細內容，更多關于JavaScript控制臺的資料請關注好吧啦網其它相關文章！