前言

寫過前端Javascript代碼的同學肯定不會對console對象感到陌生，在調試的過程中我們經常會用console對象在控制臺輸出一些常量或者變量。

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

Javascript

不同級別日志

通過console對象的不同方法，可以在控制臺上輸出不同級別的日志信息，它們會采用不同的標志來展示，如下圖所示。

不同級別的日志

包含占位符

在輸出信息時可以通過%占位符來指定對應的值，而不用總是采用拼接字符串的方法。支持的占位符包括以下幾種。

• %s - 字符

• %d - 整數

• %f - 浮點數

• %o - 對象
  

通過以下一個簡單的例子可以看出其用法。

包含占位符

打印分組信息

通過group()方法可以以分組的形式展示出信息，類似于列表結構。

打印分組信息

表達式判斷

在一些測試框架中，經常會用assert斷言來判斷一個表達式的值是否為真。同樣在console對象中也有assert方法，在斷言為真時并不會輸出任何信息，而在斷言為false時，直接拋出異常。

表達式判斷

上述代碼中前兩條語句判斷結果都為true，所以沒有輸出任何信息，第三條語句判斷結果為false，所以會直接拋出異常。

表格打印

console對象有個table方法，可以直接將對象類型的數據以表格展示。

表格打印

函數調用棧信息

通過console.trace()方法可以展示出函數調用棧的信息，來查看函數調用過程，一般會選擇將這個方法放在最后執行的函數的方法體中。

函數調用棧信息

由于棧是先進后出機制，所以先執行的方法會在后面輸出，因此上述代碼結果會按照sum, f2, f1的順序輸出。

計時

一般統計一段代碼執行耗時，方法會是通過Date對象獲取毫秒數，然后將兩個毫秒數進行相減。

一般計時方法

在上述代碼中通過endTime和startTime兩個變量的差值來計算出中間執行代碼的耗時，我們可以看出往一個數組中添加100000個字符串耗時為15毫秒。

同樣可以通過console對象的time()和timeEnd()方法來統計代碼段的執行耗時。time()和timeEnd()可以接收一個字符串作為標識，而且兩個方法接收的字符串必須一樣，如果沒有傳入字符串則默認為‘default’字符串。

console對象計時方法

上述代碼執行結果為16毫秒，與之前那個方法產生的結果大致一樣。

性能分析

通過console.profile()和console.profileEnd()方法，可以展示出代碼中各個函數執行所消耗的時間，可以用來評估代碼性能。

我們使用以下測試代碼來進行說明。

打開chrome瀏覽器的控制臺會有一個Javascript Profile菜單欄，如果默認情況下沒有的話，可以按照以下方法打開。

Javascript Profile

打開這個菜單選項后，我們可以看出每個方法執行消耗的時間。

時間消耗

結束語

今天這篇文章主要總結了下console對象的一些有用的方法，大家都掌握了嗎？

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的Javascript调试之console对象，它的一些小技巧你都知道吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。