Web控制台是現代浏覽器中的内置調試器。熟練的Web開發人員會經常使用 console.log() 在其代碼中打印消息和調試問題。該工具實際上還有很多很有用的功能和技巧,善用之可以極大提高Web開發,網站調優的效率,本文蟲蟲就來給大家普及一下這個工具。
打開一個浏覽器,F12打開開發者模式,點擊console頁簽,并輸入命令(支持補全):
console.log(console)
如上截圖中所示, console 對象提供了大量的方法可供使用,而非我們最常用console.log() 一個函數。為了演示,首先創建一個測試對象作為示例:
const Chongchong={name:'example',page:30,contens:['program','database','security']}
我們用console.log()調用該對象Chonghchong:
console.log() 以字符串表示形式打印對象,console.dir()将對象識别為對象并以比較清晰的對象結構擴展列表的形式打印:
用console.assert(),可以通過屬性做條件篩選,隻有在條件不不成立時候才打印設置的消息,代碼調試必備。
console.count() 用來來進行計數相關的工作,打印時候支持自定義标簽,并且每次調用時計數器值都會增加1,可以結合forEach打印列表:
最棒的一個函數,可以用來将對象打印為成漂亮的表格形式,每個對象的屬性帶有标記的行:
是一組非常有用的時間函數。console.time()啟動計時器。然後,每次調用 console.timeLog()時,都會打印自計時器啟動3後的時間。
完成後,調用 console.timeEnd()打印總時間:
另一個非常有用的函數,用來調試深度嵌套的對象或函數時,需要打印代碼的堆棧跟蹤。調用 console.trace() 可以調用堆棧頂部所需的函數,查看調用它的代碼确切位置:
用來對消息進行分組以避免混亂,所示:
提示:可以使用 console.groupCollapsed()來代替console.group() ,這樣默認情況下該組會被折疊。
控制台的 CSS 樣式在控制台,可以自定義日志的顯示方式,可以使使用“%c”并傳遞一個CSS 樣式,比如:
console.log('%c Hello,蟲蟲!','font-weight:bold;background-color:cyan;color:red;padding:30px;')
Web控制台是個非常有用的工具,有很多很有用的工具幫助我們實現高效的Web内容調試和内容處理。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!