概述

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

請注意，此處的例子適用于在瀏覽器中運行的 JavaScript。這與在 Node.js中運行的 JavaScript 相似，但是在 Node.js中的行為可能略有不同。

console.log

在進入其他選項之前，讓我們先回顧一下 console.log 的功能。console.log將消息輸出到控制臺。你可以輸入一個對象、一個數(shù)組、一個對象數(shù)組、一個字符串、一個布爾值，基本上你想要打印到控制臺的任何內(nèi)容都可以。這是使用console.log及其輸出的例子：

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

這是 JavaScript 中最常用的調(diào)試方法，也是最常用的控制臺方法。現(xiàn)在讓我們來談?wù)勂渌囊恍┻x擇！

console.info

console.info與console.log幾乎相同。它將信息性消息打印到控制臺。據(jù)我所知，log和info之間并沒有真正的區(qū)別，只是取決于你怎樣對消息進行分類。但是如果你選擇從瀏覽器控制臺中隱藏 “info” 級別的消息，則 “l(fā)og” 和 “info” 消息都會被隱藏。要使用console.info可以這樣做：

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

同樣，輸出幾乎完全相同。

console.warn

console.warn將警告消息打印到控制臺。從本質(zhì)上講，它與前面的功能相同，但是該消息在控制臺中帶有黃色背景，并帶有警告圖標(biāo)（至少在 Chrome Dev Tools 中是這樣）。當(dāng)執(zhí)行某些操作可能會導(dǎo)致你程序中的錯誤，但目前不會引起任何問題時，請使用console.warn。它使你和你的用戶或其他開發(fā)人員知道那里有可能會發(fā)生問題。

console.warn({ restaurantName: ’Pizza Planet’ }); // { restaurantName: ’Pizza Planet’ };

像前面一樣，可以通過傳遞相同的值來把警告打印到控制臺。

console.error

console.error將錯誤信息輸出到控制臺。本質(zhì)上，它與前面的功能相同，但是該消息在控制臺中具有紅色背景，并帶有帶有白色 “x” 錯誤圖標(biāo)的紅色圓圈（至少在 Chrome Dev Tools 中）。當(dāng)你的程序出現(xiàn)問題時，請使用console.error。它為其他開發(fā)人員提供了一種簡便的方法來找出問題的原因并加以解決。它將能夠為你提供錯誤的堆棧跟蹤信息，以便你也可以查找錯誤。

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

像前面一樣，可以通過傳遞相同的值來把錯誤打印到控制臺。

console.table

這是我最喜歡的控制臺選項之一，盡管我經(jīng)常忘記它。console.table接受一些能夠以表格形式展示的數(shù)據(jù)并輸出。讓我們看幾個例子。我們首先從對象上的console.table開始：

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

在dev tools中的輸出看起來類似于此：

(index) Value restaurantName Pizza Planet streetAddress 123 Maple

它獲取對象的每個屬性名稱，并將其放在index列中，并將屬性的值放入Value列中。這發(fā)生在數(shù)組中的每個屬性上。那么，如果我們輸出對象數(shù)組會怎樣？結(jié)果將如下所示：

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

我發(fā)現(xiàn)自己通常會使用console.log，因為我已經(jīng)習(xí)慣了，但是我認為很多時候console.table會更好地工作，并以一種美觀、干凈、易讀的方式為我輸出對象。

console.assert

console.assert是一種將未滿足你確定條件的消息打印到控制臺的方法。該函數(shù)有兩個參數(shù)：要求值的表達式和應(yīng)顯示的錯誤消息。這是一個例子：

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'’

這可能是另一種非常好的調(diào)試程序的方法。僅當(dāng)斷言失敗時才會顯示該消息，因此如果未顯示任何消息，則可以假定表達式正評估正確。

console.group 和 console.groupEnd

console.group和console.groupEnd是可以將許多 console.log 邏輯分組的方式。然后，你可以在需要時通過折疊組以將其隱藏。相當(dāng)容易使用：

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

該組可能會整體折疊。如果你需要在控制臺上記錄很多內(nèi)容，這可能會很有用。

結(jié)論

在 JavaScript 中，有很多方法可以用于console對象。它們可以幫我們進行開發(fā)，以便可以根據(jù)類型過濾消息；查看表中的一項或多項；或者將它們組合在一起或折疊它們，以便在需要時將其隱藏。它將改善你的工作流程。

以上就是JavaScript控制臺的更多功能的詳細內(nèi)容，更多關(guān)于JavaScript控制臺的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！