【JS調試】Console使用詳解

1.凡人視角

打印字符串

代碼：

console.log("I am a 凡人");

打印提示消息

代碼：

console.info("Yes, you arm a 凡人");

打印警告消息

代碼：

console.warn("凡人你竟然敢窺視我");

打印錯誤消息

代碼：

console.error("天兵天將，把這個凡人給我打入地獄");

打印調試信息

console.debug("我就是傳說中的debug");

2.上帝視角

查看全部方法

console 除了上面的幾個方法還有什麼方法呢？log 除了能打印字符串外，還能打印出對象，咱們能夠利用 console.log 打印本身。

代碼：

console.log(console);

輸出：

Object {
    assert: ...,
    clear: ...,
    count: ...,
    debug: ...,
    dir: ...,
    dirxml: ...,
    error: ...,
    group: ...,
    groupCollapsed: ...,
    groupEnd: ...,
    info: ...,
    log: ...,
    markTimeline: ...,
    profile: ...,
    profileEnd: ...,
    table: ...,
    time: ...,
    timeEnd: ...,
    timeStamp: ...,
    timeline: ...,
    timelineEnd: ...,
    trace: ...,
    warn: ...
}

啊咧咧？怎麼這麼多方法。其實上面的 console 方法 不必定每一個瀏覽器 都有實現，我這邊使用的是 chrome瀏覽器 。因此說，這個特性是非標準的，請儘可能不要在 生產環境 中使用它。

可是咱們能夠在 開發環境 中，合理的利用 這些方法來幫助咱們開發。

清理控制檯

若是咱們在控制檯調試的時候，不免 強迫症 發做想清理掉已經亂七八糟的控制檯。瀏覽器和命令行 clear 同樣提供了一個清理函數

console.clear()

固然咱們也能夠用 chrome 的 command line api 來清理控制檯。

clear()

又或者可使用按鍵Mac上 cmd + k ，Win ctrl + l（我用的是chrome瀏覽器）。

分組

當代碼很是長，或者咱們須要把一個函數，或者一個文件中的函數等區分出來。咱們可使用分組來實現。

代碼：

console.group('凡人');
console.log("手");
console.log("腳");
console.groupEnd();

console.group('神');
console.log("法力無邊");
console.log("騰雲架霧");
console.groupEnd();

輸出：

若是想要輸出爲摺疊，咱們可使用

console.groupCollapsed

，用法和 console.group 相似。

查看對象信息

有時候咱們須要打印出對象信息,可使用 console.log 來進行簡單的輸出。

代碼：

var person = {
    head: 1,
    hand: 2,
    leg: 2
};

console.log(person);

嗚嗚，但是這個顯示得好醜，咱們這個時候就可使用傳說中的神器 console.table 來幫助咱們清楚的顯示 關聯數組信息。

var data = [
    {
        '姓名': '幼兒園', 
        '性別': '女'
    },
    {
        '姓名': '李狗嗨',
        '數量': 1
    }
];

console.table(data);

可是若是想要看詳細的對象信息，咱們可使用 console.dir，將一個 JavaScript 對象的全部屬性和屬性值顯示成一個可交互的列表，它還能打印出函數等。

console.dir(clear);

什麼？你想看某個節點中的html代碼？沒事，咱們能夠用 console.dirxml 來查看頁面中對應元素的 html/xml 內容。

html代碼：

<div id='person'>
    <p>I am a 凡人</p>
</div>

javascirpt代碼：

var person = document.getElementById('person');
console.dirxml(person)；

性能測試

雷軍粑粑總是喜歡說：「不服？跑個分。」有時候，咱們也須要對代碼跑個分。這個時候，咱們可使用console.time和console.timeEnd，他們能夠記錄代碼運行所花費的時間。

console.time("足智多謀");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.timeEnd("足智多謀");

啊咧咧？你這個頂多就是 計時器 怎麼能說是 性能測試 。客官別急，咱們這還有一個叫作 console.profile 和 console.profileEnd 姐妹呢~~

console.profile("足智多謀");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.profileEnd("足智多謀");

輸出會顯示在 profile

什麼仍是不夠？你還想知道運行時的結果棧？能夠能夠，咱們這還有一位 console.trace 哦。他能夠看透大爺你的一局一動哦。 代碼：

function add(num) {
    if (0 < num) {
        console.trace("如今num的值爲", num);
        return num + add(num - 1);
    } else {
        return 0;
    }
}

var a =3;
add(3);

判斷真假

平時咱們在寫代碼是時候，常常須要判斷一下當前值的真假狀況，使用if或者三元表達式來達到目的。咱們如今也可使用 console.assert 來判斷，該方法會在條件爲錯誤時，返回一個 console.error 的輸出。 斷言

console.assert(1 == 1);
console.assert(1 == 0);
console.assert(!(1 == 0));

####統計次數

有時候咱們須要統計一個函數或者被調用了幾回，咱們一般會增長一個變量 count 來記錄，而後在控制檯中查看。這樣至關的麻煩，咱們可使用 console.count 函數來幫忙咱們記錄次數，並輸出。

function hi(name) {
    console.count(name);
    return "hi " + name;
}

for(var i = 0; i < 10; i++) {
    if(i < 4) {
        hi("person");
    } else {
        hi("god");
    }
}

總結

console 中有不少對咱們調試代碼有幫助的函數，咱們能夠在開發環境中配合 console 來調試代碼，使得咱們測試更加便利。