Console

我們經(jīng)常會在瀏覽器中使用console.log來進(jìn)行調(diào)試和參數(shù)的輸出查看细疚，但是console其實是一個非常豐富的封裝，其中還有很多的方法，今天就來介紹一下达皿。
首先姐刁，我們先看一下console的代碼

console結(jié)構(gòu)

下面就介紹一下芥牌，我們會用到的可以提高我們開發(fā)效率，調(diào)試效率的方法聂使。

1. console.log()

//平時我們使用的時候會這樣
console.log("測試內(nèi)容不要當(dāng)真");
//或者這樣
console.log(1,2,3,4)
//或者這樣
console.log({name:1})

上面我們使用的格式為console.log(object),console.log(object, otherObject, string)
除了這些基礎(chǔ)用法還有比較好玩的用法
console.log(msg, values),這個格式的用法有點像C++的printf,C#的Console.Write()等
那么我們來看看怎么使用

//首先我們使用了3種占位符
console.log("我今天吃了%o,你吃了%d頓,你叫%s.", "Skittles", 22,"Kalan");

//%o的復(fù)雜傳值
console.log("abc %o",{name:1})

效果

效果2

我們看一下效果
可以看到%o這個是對象占位符,%s這個是字符串占位符,%d這個是數(shù)字占位符

下面我們講解一個更好玩的占位符%c壁拉，先上代碼

console.log(
    "我愛你 %c路西" one day,
    "color: Red; background-color: orange; padding: 2px 5px; border-radius: 2px"
);

圖片.png

2. console.dir()

//直接上例子
console.dir(document.getElementsByClassName("full")[0])
console.log(document.getElementsByClassName("full")[0])

結(jié)果

圖片.png

我們看到結(jié)果console.log直接輸出的html溃论，而console.dir輸出的是DOM結(jié)構(gòu)樹對象

3. console.warn()

圖片.png

這個函數(shù)直接會輸出一個警告框，可以定位到輸出位置

4. console.table()

這個函數(shù)能更好的顯示列表型數(shù)據(jù)案铺，我們用console.log顯示對比一下

console.table([1,2,3],[2,3,4])
console.table({name:1,age:2},{name:11,age:22},{name:11,age:22})

對比圖

圖片.png

5. console.assert()

圖片.png

圖片.png

可以傳遞2個參數(shù)：如果為false會輸出Assertion failed和第二個參數(shù)（如上圖所示）

6.console.count

count只是作為一個計數(shù)器蔬芥，或者作為一個命名計數(shù)器，可以統(tǒng)計代碼被執(zhí)行的次數(shù)控汉。

for (let i = 0; i < 10000; i++) {
    if (i % 2) {
        console.count("odds");
    }
    if (!(i % 5)) {
        console.count("multiplesOfFive");
    }
    if (isPrime(i)) {
        console.count("prime");
    }
}

7.console.trace()

trace 可以調(diào)試模塊之間的調(diào)用

export default class CupcakeService {

  constructor(dataLib) {
    this.dataLib = dataLib;
    if(typeof dataLib !== 'object') {
      console.log(dataLib);
      console.trace();
    }
  }
  ...
}

這里使用 console.log()僅告訴我們傳遞數(shù)據(jù)dataLib是什么 笔诵，而沒有具體的傳遞的路徑。不過姑子，console.trace()會非常清楚地告訴我們問題出在 Dashboard.js乎婿，我們可以看到是 new CupcakeService(false)導(dǎo)致錯誤。

8.console.time()

console.time() 是一個用于跟蹤操作時間的專用函數(shù)街佑，它是跟蹤 JavaScript 執(zhí)行時間的好方法谢翎。

function slowFunction(number) {
    var functionTimerStart = new Date().getTime();
    // something slow or complex with the numbers.
    // Factorials, or whatever.
    var functionTime = new Date().getTime() - functionTimerStart;
    console.log(`Function time: ${functionTime}`);
}
var start = new Date().getTime();

for (i = 0; i < 100000; ++i) {
    slowFunction(i);
}

var time = new Date().getTime() - start;
console.log(`Execution time: ${time}`);

這是一種老派的做法，我們使用 console.time()來簡化以上代碼沐旨。

const slowFunction = number => {
    console.time("slowFunction");
    // something slow or complex with the numbers.
    // Factorials, or whatever.
    console.timeEnd("slowFunction");
};
console.time();

for (i = 0; i < 100000; ++i) {
    slowFunction(i);
}
console.timeEnd();

9.console.group()

// this is the global scope
let number = 1;
console.group("OutsideLoop");
console.log(number);
console.group("Loop");
for (let i = 0; i < 5; i++) {
    number = i + number;
    console.log(number);
}
console.groupEnd();
console.log(number);
console.groupEnd();
console.log("All done now");

輸出如下：

image

class MyClass {
    constructor(dataAccess) {
        console.group("Constructor");
        console.log("Constructor executed");
        console.assert(
            typeof dataAccess === "object",
            "Potentially incorrect dataAccess object"
        );
        this.initializeEvents();
        console.groupEnd();
    }
    initializeEvents() {
        console.group("events");
        console.log("Initialising events");
        console.groupEnd();
    }
}
let myClass = new MyClass(false);