概述

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

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

console.log

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

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

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

console.info

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

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

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

console.warn

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

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

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

console.error

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

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

像前面一樣，可以通過傳遞相同的值來把錯(cuò)誤打印到控制臺(tái)。

console.table

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

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

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

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

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

console.assert

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

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)斷言失敗時(shí)才會(huì)顯示該消息，因此如果未顯示任何消息，則可以假定表達(dá)式正評(píng)估正確。

console.group 和 console.groupEnd

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

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

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

結(jié)論

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

以上就是JavaScript控制臺(tái)的更多功能的詳細(xì)內(nèi)容，更多關(guān)于JavaScript控制臺(tái)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論