你不知道的console，讓js調試更簡單

對於前端的各位工程師，確定不會對console陌生，可是，你又能瞭解多少呢，今天就讓小鵬來一窺大前世界。

Chrome控制檯-開發者工具

windows按F12， MAC按Command + Option + C或Command + Option + J, 便可打開控制檯

1. 向 Web 控制檯輸出一條消息

console.log('Hello world!');
console.info('Hello world!');
console.warn('Hello world!');
console.error('Hello world!');
console.debug('Hello world!');

2. console.dir() 顯示一個對象對全部屬性和方法

console.dir(document);

3. console.table() 將數據以表格的形式顯示

這個方法須要一個必須參數data，data必須是一個數組或者一個對象

var names = [
    {
        name: "小明",
        age: 20,
        gender: '男'
    },
    {
        name: "小紅",
        age: 18,
        gender: '女'
    },
    {
        name: "小李",
        age: 22,
        gender: '男'
    }
]

console.table(names)

4. 計算操做佔用的時常

注意：每個定時器必須擁有惟一的名字

console.time('本次代碼運行時間');
let count = 0;
for (let i=0; i<100; i++) {
    count++;
}
console.timeEnd('本次代碼運行時間');

5. 輸出被調用的次數

console.count() 此函數接受一個可選參數 label

let user = "";
function greate () {
    console.count(user);
    return 'hi' + user;
}

user = 'Bob';
// 此時的lable是Bob
greate();

user = 'John';
// 此時的lable是John
greate();
greate();
console.count('John');

6. 判斷斷言是否爲真

console.assert() 若是斷言爲false，則將一個錯誤消息寫入控制檯，若是斷言爲true。則沒有任何反應

console.assert(1==1, 'Success');
console.assert(1==2, 'Error');

7. 分組

console.group()在控制檯建立一個分組，直到調用console.groupEnd()以後分組結束

console.group('今日事項');
    console.log('吃飯');
    console.log('睡覺');
    console.log('打豆豆');
console.groupEnd();

console.group('明日事項');
    console.log('賞花');
    console.log('賞月');
    console.log('賞秋香');
console.groupEnd();

喜歡就點贊收藏一下咯

參考文獻：

MDN: https://developer.mozilla.org...