快捷導(dǎo)航

Javascript調(diào)試之console對(duì)象——你不知道的一些小技巧

更新時(shí)間：2017年07月10日 11:40:19 投稿：mrr

這篇文章主要總結(jié)了console對(duì)象的一些有用的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧

前言

寫(xiě)過(guò)前端Javascript代碼的同學(xué)肯定不會(huì)對(duì)console對(duì)象感到陌生，在調(diào)試的過(guò)程中我們經(jīng)常會(huì)用console對(duì)象在控制臺(tái)輸出一些常量或者變量。

但是相信很多人也就只用過(guò)console.log()這一個(gè)方法，今天我們就一起來(lái)看看console對(duì)象還有哪些比較有用的方法。由于本篇文章是跟控制臺(tái)有關(guān)，代碼就直接在控制臺(tái)展現(xiàn)而沒(méi)有另外用新文件展示。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

不同級(jí)別日志

通過(guò)console對(duì)象的不同方法，可以在控制臺(tái)上輸出不同級(jí)別的日志信息，它們會(huì)采用不同的標(biāo)志來(lái)展示，如下圖所示。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

不同級(jí)別的日志

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

包含占位符

在輸出信息時(shí)可以通過(guò)%占位符來(lái)指定對(duì)應(yīng)的值，而不用總是采用拼接字符串的方法。支持的占位符包括以下幾種。

%s - 字符
%d - 整數(shù)
%f - 浮點(diǎn)數(shù)
%o - 對(duì)象

通過(guò)以下一個(gè)簡(jiǎn)單的例子可以看出其用法。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

包含占位符

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

打印分組信息

通過(guò)group()方法可以以分組的形式展示出信息，類(lèi)似于列表結(jié)構(gòu)。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

打印分組信息

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

表達(dá)式判斷

在一些測(cè)試框架中，經(jīng)常會(huì)用assert斷言來(lái)判斷一個(gè)表達(dá)式的值是否為真。同樣在console對(duì)象中也有assert方法，在斷言為真時(shí)并不會(huì)輸出任何信息，而在斷言為false時(shí)，直接拋出異常。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

表達(dá)式判斷

上述代碼中前兩條語(yǔ)句判斷結(jié)果都為true，所以沒(méi)有輸出任何信息，第三條語(yǔ)句判斷結(jié)果為false，所以會(huì)直接拋出異常。

表格打印

console對(duì)象有個(gè)table方法，可以直接將對(duì)象類(lèi)型的數(shù)據(jù)以表格展示。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

表格打印

函數(shù)調(diào)用棧信息

通過(guò)console.trace()方法可以展示出函數(shù)調(diào)用棧的信息，來(lái)查看函數(shù)調(diào)用過(guò)程，一般會(huì)選擇將這個(gè)方法放在最后執(zhí)行的函數(shù)的方法體中。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

函數(shù)調(diào)用棧信息

由于棧是先進(jìn)后出機(jī)制，所以先執(zhí)行的方法會(huì)在后面輸出，因此上述代碼結(jié)果會(huì)按照sum, f2, f1的順序輸出。

計(jì)時(shí)

一般統(tǒng)計(jì)一段代碼執(zhí)行耗時(shí)，方法會(huì)是通過(guò)Date對(duì)象獲取毫秒數(shù)，然后將兩個(gè)毫秒數(shù)進(jìn)行相減。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

一般計(jì)時(shí)方法

在上述代碼中通過(guò)endTime和startTime兩個(gè)變量的差值來(lái)計(jì)算出中間執(zhí)行代碼的耗時(shí)，我們可以看出往一個(gè)數(shù)組中添加100000個(gè)字符串耗時(shí)為15毫秒。

同樣可以通過(guò)console對(duì)象的time()和timeEnd()方法來(lái)統(tǒng)計(jì)代碼段的執(zhí)行耗時(shí)。time()和timeEnd()可以接收一個(gè)字符串作為標(biāo)識(shí)，而且兩個(gè)方法接收的字符串必須一樣，如果沒(méi)有傳入字符串則默認(rèn)為‘default'字符串。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

console對(duì)象計(jì)時(shí)方法

上述代碼執(zhí)行結(jié)果為16毫秒，與之前那個(gè)方法產(chǎn)生的結(jié)果大致一樣。

性能分析

通過(guò)console.profile()和console.profileEnd()方法，可以展示出代碼中各個(gè)函數(shù)執(zhí)行所消耗的時(shí)間，可以用來(lái)評(píng)估代碼性能。

我們使用以下測(cè)試代碼來(lái)進(jìn)行說(shuō)明。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

打開(kāi)chrome瀏覽器的控制臺(tái)會(huì)有一個(gè)Javascript Profile菜單欄，如果默認(rèn)情況下沒(méi)有的話，可以按照以下方法打開(kāi)。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

Javascript Profile

打開(kāi)這個(gè)菜單選項(xiàng)后，我們可以看出每個(gè)方法執(zhí)行消耗的時(shí)間。

Javascript調(diào)試之console對(duì)象，它的一些小技巧你都知道嗎？

時(shí)間消耗

以上所述是小編給大家介紹的Javascript調(diào)試之console對(duì)象——你不知道的一些小技巧，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: