利用Console來Debug的10個高級技巧匯總
前言
在過去的十年中,我最熱衷的事情之一就是前端開發(fā)(特別是JavaScript)。作為一個“匠人”,我喜歡專研各種工具。在本文,我會為你介紹一些用老式console來debug的技巧。
是的,我們都知道下面基本的技巧:
console.log(‘Hello World!'); console.info(‘Something happened…'); console.warn(‘Something strange happened…'); console.error(‘Something horrible happened…');
從現(xiàn)在開始,我將教會你一些你不知道的技巧,讓你成為老司機(jī)!
1. console.trace()
如果你想知道消息是哪里打印出來的,使用console.trace()來獲取要打印的數(shù)據(jù)的stacktrace。

2. console.time() && console.timeEnd()
如果你想分析函數(shù)的性能,可以使用console.time()來計時,console.timeEnd()來結(jié)束計時,控制臺會打印出兩次之間的時間差。

3. console.memory
如果你發(fā)現(xiàn)性能問題很難分析,可能還要考慮是否有內(nèi)存泄露,你可以使用console.memory(注意memory是console的屬性,不是函數(shù)),來查看當(dāng)前的堆的使用情況。

4. console.profile(‘profileName') & console.profileEnd(‘profileName')
雖然不是一個標(biāo)準(zhǔn)的做法,不過被廣泛接受使用。你可以使用這兩個命令來啟動和停止profiling。這樣有助你你在代碼中做精準(zhǔn)的profiling。而不依賴于手動的鼠標(biāo)點擊。你可以在瀏覽器控制臺Javacript Profiler中找到剛剛的profile。

5. console.count(“STUFF I COUNT”)
有時候為了記錄一個函數(shù)或則一段代碼重復(fù)執(zhí)行了多少次,可以使用console.count('?')來記錄。每一次執(zhí)行到該代碼,就會自動加1。

6. console.assert(false, “Log me!”)
你可以使用console.assert來在某些為假的條件下輸出消息,而不是用if-else。
注意:在Node.js下會報錯(Assertion Error)。

7. console.group(‘group') & console.groupEnd(‘group')
如果你想對打印的log做一個格式化的整理,可以使用console.group()和console.groupEnd() 。使用console.group可以將log聚合成組,并且形成嵌套的層級。
請看示例:

8. String substitutions
你可以使用console.log打印變量(%s = string, %i = integer, %o = object, %f = float)。

9. console.clear()
我們已經(jīng)在控制臺輸出了很多記錄,來使用console.clear()清空一下。

10. console.table()
最后一個壓軸的!你可以使用console.table()將對象以表格的形式打印出來。

總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(四):串(BF)
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(四):串(BF),串是由零個或多個字符組成的有限序列,又叫做字符串,本文著重講解了BF(Brute Force)算法,需要的朋友可以參考下2015-06-06
分享JavaScript獲取網(wǎng)頁關(guān)閉與取消關(guān)閉的事件
這篇文章主要介紹了JavaScript獲取網(wǎng)頁關(guān)閉與取消關(guān)閉的事件,有需要的朋友可以參考一下2013-12-12
javascript中Array數(shù)組的迭代方法實例分析
這篇文章主要介紹了javascript中Array數(shù)組的迭代方法,實例分析了Array數(shù)組的迭代方法定義與使用技巧,需要的朋友可以參考下2015-02-02
ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的簡單講解
大家心里是否產(chǎn)生過這樣的疑問,JS中既然已經(jīng)有對象這種數(shù)據(jù)結(jié)構(gòu),我們?yōu)槭裁催€要再單獨去使用Set或者M(jìn)ap呢?下面這篇文章主要給大家介紹了關(guān)于ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2022-08-08
Javascript中Fetch請求Coze API并流式展示請求結(jié)果
文章介紹了如何使用Fetch API處理CozeAPI返回的流式響應(yīng),并在前端進(jìn)行實時展示,文章提供了處理流式響應(yīng)的步驟和示例代碼,包括使用fetch發(fā)起POST請求、讀取響應(yīng)體流、逐步處理數(shù)據(jù)塊以及更新UI,感興趣的朋友一起看看吧2025-02-02
淺析微信小程序modal彈窗關(guān)閉默認(rèn)會執(zhí)行cancel問題
這篇文章主要介紹了小程序modal彈窗關(guān)閉默認(rèn)會執(zhí)行cancel方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10

