Js調試中不得不知的Console


在js調試中,大部分的前端人員都是采用console.log()方法來打印出調試的數據,但是很多人都不知道console這個對象有很多很實在的方法,本文就來介紹一下這些方法的使用。

一、console.log()

console.log()這個方法是前端人員最熟悉的了,幾乎我們每天都會使用,除了簡單的打印對象功能,那么以下兩種使用方法你知道嗎?
1、多參數記錄

當我們要去比對兩個對象時,想讓這兩個對象整齊的在兩邊,這時console.log()就能幫上我們的忙。
2、格式化輸出
console.log(msg, values);這種跟C#的string.Format()有點像,console.log()能支持字符串、整數、浮點數、object對象以及css樣式的格式化輸出。占位符及其描述如下表。

占位符 描述
%s 字符串
%d/%i 整數
%f 浮點數
%o/%O object對象
%c css樣式

接下來我們來做一下舉例:
①、字符串格式化為在占位符的地方原樣輸出我們的值:
console.log()字符串格式化輸出
②、整數與浮點數一致我們這里就不過多舉例了:
console.log()整數格式化輸出
③、對於object對象的格式化輸出就有比較大區別了,當為%o時輸出和不使用格式化輸出打印出來的結果一樣,當為%O時,可以看到對象的各個屬性,比如我們打印一個DOM節點,%o打印的是此節點及其子節點,%O打印的是是該dom節點各個對象屬性。
console.log()對象格式化輸出
④、css樣式輸出,樣式會在%c后面都加上這個樣式
console.log()css樣式格式化輸出

二、console.dir()

這個方法在大部分時候都跟console.log()一致,但是還是略有不同。
console.dir()
在查詢DOM結構時,更能體現出兩者的不同。console.log(element)打印的dom結構,而console.dir(element)打印的則是整個dom對象。
console.dir()

三、console.table()

令人意外的是,很多人都不知道有這個方法,其作用是當我們想對一個復雜的對象進行輸出時,使用console.log()往往是輸出一些不能一目了然的數據,此時console.table()就能幫我們把這個對象整理成一個列表,以便於我們很清晰的看到數據。
console.table()

四、console.warn()

這個方法跟console.log()幾乎一致,唯一的區別就是瀏覽器會對其有不一樣的對待,會輸出一個警告。
console.warn()

五、console.assert()

assert函數是對輸入的值進行斷言,相信有寫過單元測試的讀者們都很熟悉了。當
console.assert()

六、console.count()

此方法是用來統計count被調用的次數。
console.count()

七、console.trace()

調試JavaScript程序時,有時需要打印函數調用的棧信息,這可以通過使用console.trace()來實現,此方法一般用來顯示當前執行的代碼在堆棧中的調用路徑,可清洗的看到被調用的過程。
console.trace()

八、console.time()與console.timeEnd()

console.time() 方法是作為計算器的起始方法。該方法一般用於測試程序執行的時長。
console.timeEnd() 方法為計算器的結束方法,並將執行時長顯示在控制台。如果一個頁面有多個地方需要使用到計算器,可以添加標簽參數來設置。
console.time()與console.timeEnd()

九、console.group()與console.groupEnd()

console.group() 方法用於設置分組信息的起始位置,該位置之后的所有信息將寫入分組。
console.groupEnd() 方法用於結束分組標簽。
使用 console. groupCollapsed() 方法來設置折疊的分組信息。
console.group()與console.groupEnd()

十、console.clear()

console.clear() 方法用於清除控制台所有信息。
console.clear() 方法在執行成功后,會在控制台輸出: "Console was cleared"。
console.clear()
console.clear()

總結

在js調試中,雖然console對象的有些方法我們也很少用到,但是我們不能單純只會一個console.log(),了解並學會使用其他方法,對我們在調試過程中起到了很關鍵的作用,使我們的效率能更高。關於此對象的所有用法,本文參考了菜鳥教程的部分文章,想深入學習的讀者可以繼續移步學習。
筆者水平有限,本文若有不對之處,請留言指正,不勝感激!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM