前言
作爲前端工程師,我們每天都離不開用控制檯調試代碼,console.log
也成了我們最常用的命令,那除了用console.log
,還有許多console的方法可以使用,熟練掌握它們,可以讓我們在控制檯看到的信息更美觀準確,也會大大提高我們的開發效率哦,下面就跟小肆一起來看看吧.
Chrome的控制檯
大部分常用瀏覽器都有各自的控制檯,不過小肆用着最習慣的還是Chrome的控制檯,打開chrome,win系統按F12,mac系統按command+option+J就可以呼出控制檯了,切換到Console標籤就能看到如下信息:
我們可以看到,baidu還在控制檯給我們留了個小彩蛋,我想這個彩蛋也是爲我們程序員同學留的吧。讓我們先學第一個命令清除控制檯來開始吧。
清除控制檯
在chorme下清除控制檯的方法有很多:
- 輸入
console.clear()
命令或clear()
命令 - 使用快捷鍵
Control + J
或Command + K
- 點擊控制檯左上角第二個圖標 🚫
顯示信息的命令
console.log('技術放肆聊') // 輸出普通信息
console.info('技術放肆聊') // 輸出提示信息
console.warn('技術放肆聊') // 輸出警告信息
console.error('技術放肆聊') // 輸出錯誤信息
console.debug('技術放肆聊') // 輸出調試信息
console.log
、console.info
、console.debug
這三個命令可以理解爲一個,我們只需要用console.log
就行,並且chrome還不支持console.debug
命令。
console.warn
命令輸出警告信息,信息前帶有黃色警告符號。console.error
輸出錯誤信息,信息前帶有紅色錯誤符號,表示出錯,同時會顯示錯誤發生的堆棧。
上段代碼在chrome控制檯輸出效果如下:
在safari輸出效果如下:
佔位符
console上述的命令支持printf的佔位符格式,支持的佔位符有:字符(%s)、整數(%d或%i)、浮點數(%f)和對象(%o):
佔位符 | 作用 |
---|---|
%s | 字符串 |
%d or %i | 整數 |
%f | 浮點數 |
%o | 可展開的DOM |
%O | 列出DOM的屬性 |
%c | 根據提供的css樣式格式化字符串 |
//字符(%s)
console.log("%s","技術放肆聊");
//整數(%d或%i)
console.log("%d年%d月%d日",2019,1,6);
//浮點數(%f)
console.log("PI=%f",3.1415926);
顯示效果如下:
%o、%O 都是用來輸出 Object 對象的,對普通的 Object 對象,兩者沒區別,但是打印dom節點時就不一樣了:
%c 佔位符是最常用的。使用 %c 佔位符時,對應的後面的參數必須是 CSS 語句,用來對輸出內容進行 CSS 渲染。常見的輸出方式有兩種:文字樣式、圖片輸出。
信息分組
console.group()
用於將顯示的信息分組,可以把信息進行摺疊和展開。console.groupEnd()
結束內聯分組
將對象以樹狀結構展現
console.dir()
可以顯示一個對象所有的屬性和方法.
顯示某個節點的內容
console.dirxml()
用來顯示網頁的某個節點(node)所包含的html/xml代碼
判斷變量是否是真
console.assert()
用來判斷一個表達式或變量是否爲真,
此方法接受兩個參數,第一個參數是表達式,第二個參數是字符串。只有當第一個參數爲false,纔會輸出第二個參數,否則不會有任何結果。
計時功能
console.time()
和console.timeEnd()
,用來顯示代碼的運行時間
console.time("控制檯計時器");
for(var i = 0; i < 10000; i++){
for(var j = 0; j < 10000; j++){}
}
console.timeEnd("控制檯計時器");
性能分析performance profile
console.profile()
和console.proileEnd()
用來分析程序各個部分的運行時間,找出瓶頸所在。
function All(){
for(var i = 0; i < 10; i++){
funcA(100);
}
funcB(1000);
}
function funcA(count){
for(var i = 0; i < count; i++){};
}
function funcB(count){
for(var i = 0; i < count; i++){};
}
console.profile("性能分析器");
All();
console.profileEnd();
詳細的信息在chrome控制檯裏的"profile"選項裏查看
console.count()統計代碼被執行的次數
function myFunction(){
console.count("myFunction 被執行的次數");
}
myFunction(); //myFunction 被執行的次數: 1
myFunction(); //myFunction 被執行的次數: 2
myFunction(); //myFunction 被執行的次數: 3
console.table表格顯示方法
總結
合理的利用console的各種方法,會使我們的調試過程更加愉悅,今天的分享就到這裏了,記得右下角點好看呦!
技術放肆聊公衆號,每日干貨,最前沿的技術知識,掃描下方二維碼關注: