玩轉控制檯，看看那些你不知道的Console用法

前言

做爲前端工程師，咱們天天都離不開用控制檯調試代碼，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的各類方法，會使咱們的調試過程更加愉悅，今天的分享就到這裏了，記得右下角點好看呦！

技術放肆聊公衆號，每日干貨，最前沿的技術知識，掃描下方二維碼關注：