Javascript調試之console對象——你不知道的一些小技巧
前言
寫過前端Javascript代碼的同學肯定不會對console對象感到陌生，在調試的過程中我們經常會用console對象在控制臺輸出一些常量或者變量。
但是相信很多人也就只用過console.log()這一個方法，今天我們就一起來看看console對象還有哪些比較有用的方法。由于本篇文章是跟控制臺有關，代碼就直接在控制臺展現(xiàn)而沒有另外用新文件展示。
不同級別日志
通過console對象的不同方法，可以在控制臺上輸出不同級別的日志信息，它們會采用不同的標志來展示，如下圖所示。
不同級別的日志
Javascript調試之console對象，它的一些小技巧你都知道嗎？
包含占位符
在輸出信息時可以通過%占位符來指定對應的值，而不用總是采用拼接字符串的方法。支持的占位符包括以下幾種。
- %s - 字符
- %d - 整數
- %f - 浮點數
- %o - 對象
通過以下一個簡單的例子可以看出其用法。
包含占位符
Javascript調試之console對象，它的一些小技巧你都知道嗎？
打印分組信息
通過group()方法可以以分組的形式展示出信息，類似于列表結構。
打印分組信息
Javascript調試之console對象，它的一些小技巧你都知道嗎？
表達式判斷
在一些測試框架中，經常會用assert斷言來判斷一個表達式的值是否為真。同樣在console對象中也有assert方法，在斷言為真時并不會輸出任何信息，而在斷言為false時，直接拋出異常。
表達式判斷
上述代碼中前兩條語句判斷結果都為true，所以沒有輸出任何信息，第三條語句判斷結果為false，所以會直接拋出異常。
表格打印
console對象有個table方法，可以直接將對象類型的數據以表格展示。
表格打印
函數調用棧信息
通過console.trace()方法可以展示出函數調用棧的信息，來查看函數調用過程，一般會選擇將這個方法放在最后執(zhí)行的函數的方法體中。
函數調用棧信息
由于棧是先進后出機制，所以先執(zhí)行的方法會在后面輸出，因此上述代碼結果會按照sum, f2, f1的順序輸出。
計時
一般統(tǒng)計一段代碼執(zhí)行耗時，方法會是通過Date對象獲取毫秒數，然后將兩個毫秒數進行相減。
一般計時方法
在上述代碼中通過endTime和startTime兩個變量的差值來計算出中間執(zhí)行代碼的耗時，我們可以看出往一個數組中添加100000個字符串耗時為15毫秒。
同樣可以通過console對象的time()和timeEnd()方法來統(tǒng)計代碼段的執(zhí)行耗時。time()和timeEnd()可以接收一個字符串作為標識，而且兩個方法接收的字符串必須一樣，如果沒有傳入字符串則默認為‘default'字符串。
console對象計時方法
上述代碼執(zhí)行結果為16毫秒，與之前那個方法產生的結果大致一樣。
性能分析
通過console.profile()和console.profileEnd()方法，可以展示出代碼中各個函數執(zhí)行所消耗的時間，可以用來評估代碼性能。
我們使用以下測試代碼來進行說明。
打開chrome瀏覽器的控制臺會有一個Javascript Profile菜單欄，如果默認情況下沒有的話，可以按照以下方法打開。
Javascript Profile
打開這個菜單選項后，我們可以看出每個方法執(zhí)行消耗的時間。
時間消耗
以上所述是小編給大家介紹的Javascript調試之console對象——你不知道的一些小技巧，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
微信小程序onLaunch異步,首頁onLoad先執(zhí)行?
這篇文章主要介紹了微信小程序onLaunch異步,首頁onLoad先執(zhí)行? 文章底部給大家介紹了小程序_onLaunch異步回調數據加載問題的兩種解決方案，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了JS自定義選項卡函數及用法,以實例形式較為詳細的分析了javascript自定義tab切換函數及使用方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了Openlayers實現(xiàn)點閃爍擴散效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了微信小程序實現(xiàn)滑動切換自定義頁碼的方法,結合實例形式分析了微信小程序頁碼動態(tài)切換相關實現(xiàn)技巧與注意事項,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了微信小程序實現(xiàn)活動報名登記,本篇將介紹使用微信小程序實現(xiàn)發(fā)起一個活動報名的設計，以此為基礎，我們可以掌握微信小程序表單的基本用法，進而在諸如疫情信息登記、出入報備等場景中使用小程序進行開發(fā)，滿足相關的需求，需要的朋友可以參考下2022-09-09
本文主要對JS實現(xiàn)太極旋轉的思路進行分析，步驟清晰，簡短的文字，深入的理解。需要的朋友可以看下2016-12-12
基于Marquee.js插件實現(xiàn)的跑馬燈效果示例
這篇文章主要介紹了基于Marquee.js插件實現(xiàn)的跑馬燈效果,結合實例形式給出了Marquee.js插件的定義及具體使用方法,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了js實現(xiàn)宇宙星空背景效果的方法,實例分析了javascript中動畫效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS實現(xiàn)針對給定時間的倒計時功能,結合具體實例形式分析了javascript日期時間的正則判定與動態(tài)運算相關操作技巧,需要的朋友可以參考下2017-04-04
異步是指進程不需要一直等下去,而是繼續(xù)執(zhí)行下面的操作,不用管其他進程的狀態(tài),下面這篇文章主要給大家介紹了關于JS異步編程方法的6種方案,需要的朋友可以參考下2023-01-01