Javascript調(diào)試之console對象——你不知道的一些小技巧
前言
寫過前端Javascript代碼的同學(xué)肯定不會(huì)對console對象感到陌生,在調(diào)試的過程中我們經(jīng)常會(huì)用console對象在控制臺(tái)輸出一些常量或者變量。
但是相信很多人也就只用過console.log()這一個(gè)方法,今天我們就一起來看看console對象還有哪些比較有用的方法。由于本篇文章是跟控制臺(tái)有關(guān),代碼就直接在控制臺(tái)展現(xiàn)而沒有另外用新文件展示。
不同級別日志
通過console對象的不同方法,可以在控制臺(tái)上輸出不同級別的日志信息,它們會(huì)采用不同的標(biāo)志來展示,如下圖所示。
不同級別的日志
Javascript調(diào)試之console對象,它的一些小技巧你都知道嗎?
包含占位符
在輸出信息時(shí)可以通過%占位符來指定對應(yīng)的值,而不用總是采用拼接字符串的方法。支持的占位符包括以下幾種。
- %s - 字符
- %d - 整數(shù)
- %f - 浮點(diǎn)數(shù)
- %o - 對象
通過以下一個(gè)簡單的例子可以看出其用法。
包含占位符
Javascript調(diào)試之console對象,它的一些小技巧你都知道嗎?
打印分組信息
通過group()方法可以以分組的形式展示出信息,類似于列表結(jié)構(gòu)。
打印分組信息
Javascript調(diào)試之console對象,它的一些小技巧你都知道嗎?
表達(dá)式判斷
在一些測試框架中,經(jīng)常會(huì)用assert斷言來判斷一個(gè)表達(dá)式的值是否為真。同樣在console對象中也有assert方法,在斷言為真時(shí)并不會(huì)輸出任何信息,而在斷言為false時(shí),直接拋出異常。
表達(dá)式判斷
上述代碼中前兩條語句判斷結(jié)果都為true,所以沒有輸出任何信息,第三條語句判斷結(jié)果為false,所以會(huì)直接拋出異常。
表格打印
console對象有個(gè)table方法,可以直接將對象類型的數(shù)據(jù)以表格展示。
表格打印
函數(shù)調(diào)用棧信息
通過console.trace()方法可以展示出函數(shù)調(diào)用棧的信息,來查看函數(shù)調(diào)用過程,一般會(huì)選擇將這個(gè)方法放在最后執(zhí)行的函數(shù)的方法體中。
函數(shù)調(diào)用棧信息
由于棧是先進(jìn)后出機(jī)制,所以先執(zhí)行的方法會(huì)在后面輸出,因此上述代碼結(jié)果會(huì)按照sum, f2, f1的順序輸出。
計(jì)時(shí)
一般統(tǒng)計(jì)一段代碼執(zhí)行耗時(shí),方法會(huì)是通過Date對象獲取毫秒數(shù),然后將兩個(gè)毫秒數(shù)進(jìn)行相減。
一般計(jì)時(shí)方法
在上述代碼中通過endTime和startTime兩個(gè)變量的差值來計(jì)算出中間執(zhí)行代碼的耗時(shí),我們可以看出往一個(gè)數(shù)組中添加100000個(gè)字符串耗時(shí)為15毫秒。
同樣可以通過console對象的time()和timeEnd()方法來統(tǒng)計(jì)代碼段的執(zhí)行耗時(shí)。time()和timeEnd()可以接收一個(gè)字符串作為標(biāo)識(shí),而且兩個(gè)方法接收的字符串必須一樣,如果沒有傳入字符串則默認(rèn)為‘default'字符串。
console對象計(jì)時(shí)方法
上述代碼執(zhí)行結(jié)果為16毫秒,與之前那個(gè)方法產(chǎn)生的結(jié)果大致一樣。
性能分析
通過console.profile()和console.profileEnd()方法,可以展示出代碼中各個(gè)函數(shù)執(zhí)行所消耗的時(shí)間,可以用來評估代碼性能。
我們使用以下測試代碼來進(jìn)行說明。
打開chrome瀏覽器的控制臺(tái)會(huì)有一個(gè)Javascript Profile菜單欄,如果默認(rèn)情況下沒有的話,可以按照以下方法打開。
Javascript Profile
打開這個(gè)菜單選項(xiàng)后,我們可以看出每個(gè)方法執(zhí)行消耗的時(shí)間。
時(shí)間消耗
以上所述是小編給大家介紹的Javascript調(diào)試之console對象——你不知道的一些小技巧,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
詳解maxlength屬性在textarea里奇怪的表現(xiàn)
這篇文章主要介紹了maxlength屬性在textarea里奇怪的表現(xiàn)的相關(guān)資料,需要的朋友可以參考下2015-12-12javascript 函數(shù)及作用域總結(jié)介紹
本文是對javascript在的函數(shù)及作用域進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11JavaScript實(shí)現(xiàn)定時(shí)頁面跳轉(zhuǎn)功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)定時(shí)頁面跳轉(zhuǎn)功能,涉及javascript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)自定義函數(shù)功能操作技巧,需要的朋友可以參考下2017-02-02深入聊聊Array的sort方法的使用技巧.詳細(xì)點(diǎn)評protype.js中的sortBy方法
深入聊聊Array的sort方法的使用技巧.詳細(xì)點(diǎn)評protype.js中的sortBy方法...2007-04-04js判斷一個(gè)對象是數(shù)組(函數(shù))的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于利用js如何判斷一個(gè)對象是數(shù)組(函數(shù))的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12基于 antd pro 的短信驗(yàn)證碼登錄功能(流程分析)
這篇文章主要介紹了基于 antd pro 的短信驗(yàn)證碼登錄功能(流程分析),本文通過實(shí)例代碼流程分析給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-05-05使用ECharts進(jìn)行數(shù)據(jù)可視化的代碼詳解
ECharts 是一個(gè)由百度開源的強(qiáng)大、靈活的 JavaScript 圖表庫,用于在 Web 頁面上創(chuàng)建各種類型的數(shù)據(jù)可視化圖表,它具有豐富的圖表類型、強(qiáng)大的配置選項(xiàng)和良好的跨平臺(tái)兼容性,本文介紹了如何使用ECharts進(jìn)行數(shù)據(jù)可視化,需要的朋友可以參考下2024-08-08JavaScript定義數(shù)組的三種方法(new Array(),new Array(''x'',''y'')
下面小編就為大家?guī)硪黄狫avaScript定義數(shù)組的三種方法(new Array(),new Array('x','y')。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10