Javascript調試命令——你只會Console.log() ?

Javascript調試命令——你只會Console.log() ?

Console 對象提供對瀏覽器控制檯的接入（如：Firefox 的 Web Console）。不一樣瀏覽器上它的工做方式是不同的，但這裏會介紹一些大都會提供的接口特性。
Console對象能夠在任何全局對象中訪問，如 Window，WorkerGlobalScope 以及經過屬性工做臺提供的特殊定義。
它被瀏覽器定義爲 Window.Console，也可被簡單的 Console 調用。

最經常使用的方法就是Console.log(),就是在控制檯輸出內容。剛開始學前端的時候看到你們都是用的Console.log(),幾乎沒有見過Console的其餘用法，難道Console真的沒有別的用法了？查了一下後發現Console仍是很是強大的，至於爲何不多看到有人用多是由於用過都刪掉了吧。在此記錄一下Console的其餘用法。

注意：由於Console 對象提供對瀏覽器控制檯的接入 因此在不一樣瀏覽器中的支持及表現形式可能不太同樣，可是調試內容只有咱們開發者會看，因此保證開發環境能用這些方法就能夠了，下面演示所有都爲Chrome上面的效果。

分類輸出

不一樣類別信息的輸出

console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('錯誤信息');

分組輸出

使用Console.group()和Console.groupEnd()包裹分組內容。

還可使用Console.groupCollapsed()來代替Console.group()生成摺疊的分組。

console.group('第一個組');
    console.log("1-1");
    console.log("1-2");
    console.log("1-3");
console.groupEnd();

console.group('第二個組');
    console.log("2-1");
    console.log("2-2");
    console.log("2-3");
console.groupEnd();

Console.group()還能夠嵌套使用

console.group('第一個組');
    console.group("1-1");
        console.group("1-1-1");
            console.log('內容');
        console.groupEnd();
    console.groupEnd();
    console.group("1-2");
        console.log('內容');
        console.log('內容');
        console.log('內容');
    console.groupEnd();
console.groupEnd();

console.groupCollapsed('第二個組');
    console.group("2-1");
    console.groupEnd();
    console.group("2-2");
    console.groupEnd();
console.groupEnd();

表格輸出

使用console.table()能夠將傳入的對象，或數組以表格形式輸出。適合排列整齊的元素

var Obj = {
    Obj1: {
        a: "aaa",
        b: "bbb",
        c: "ccc"
    },
    Obj2: {
        a: "aaa",
        b: "bbb",
        c: "ccc"
    },
    Obj3: {
        a: "aaa",
        b: "bbb",
        c: "ccc"
    },
    Obj4: {
        a: "aaa",
        b: "bbb",
        c: "ccc"
    }
}

console.table(Obj);

var Arr = [
    ["aa","bb","cc"],
    ["dd","ee","ff"],
    ["gg","hh","ii"],
]

console.table(Arr);

查看對象

使用Console.dir()顯示一個對象的全部屬性和方法
在Chrome中Console.dir()和Console.log()效果相同

var CodeDeer = {
    nema: 'CodeDeer',
    blog: 'www.xluos.com',
        
}
console.log("console.dir(CodeDeer)");
console.dir(CodeDeer);

console.log("console.log(CodeDeer)");
console.log(CodeDeer);

查看節點

使用Console.dirxml()顯示一個對象的全部屬性和方法
在Chrome中Console.dirxml()和Console.log()效果相同

百度首頁logo的節點信息

條件輸出

利用console.assert(),能夠進行條件輸出。

• 當第一個參數或返回值爲真時，不輸出內容
• 當第一個參數或返回值爲假時，輸出後面的內容並拋出異常

console.assert(true, "你永遠看不見我");
console.assert((function() { return true;})(), "你永遠看不見我");

console.assert(false, "你看得見我");
console.assert((function() { return false;})(), "你看得見我");

計次輸出

使用Console.count()輸出內容和被調用的次數

(function () {
    for(var i = 0; i < 3; i++){
        console.count("運行次數：");
    }
})()

追蹤調用堆棧

使用Console.trace()來追蹤函數被調用的過程，在複雜項目時調用過程很是多，用這個命令來幫你縷清。

function add(a, b) {
    console.trace("Add function");
    return a + b;
}

function add3(a, b) {
    return add2(a, b);
}

function add2(a, b) {
    return add1(a, b);
}

function add1(a, b) {
    return add(a, b);
}

var x = add3(1, 1);

計時功能

使用Console.time()和Console.timeEnd()包裹須要計時的代碼片斷，輸出運行這段代碼的事件。

• Console.time()中的參數做爲計時器的標識，具備惟一性。
• Console.timeEnd()中的參數來結束此標識的計時器，並以毫秒爲單位返回運行時間。
• 最多同時運行10000個計時器。
•  

console.time("Chrome中循環1000次的時間");
for(var i = 0; i < 1000; i++)
{

}
console.timeEnd("Chrome中循環1000次的時間");

性能分析

使用Console.profile()和Console.profile()進行性能分析，查看代碼各部分運行消耗的時間，可是我在Chrome自帶的調試工具中並無找到在哪裏查看這兩個方法生成的分析報告。應該須要其餘的調試工具。

具體參考這裏：
www.oschina.net/transl...

有趣的Console.log()

最後再來介紹一下強大的Console.log(),這個方法有不少的用法（其餘輸出方法的用法，如error()等，能夠參照log()使用）。

1、提示輸出

能夠再輸出的對象、變量前加上提示信息，增長辨識度

var ans = 12345;
console.log("這是臨時變量ans的值：",ans);

2、格式化輸出

佔位符	含義
%s	字符串輸出
%d or %i	整數輸出
%f	浮點數輸出
%o	打印javascript對象，能夠是整數、字符串以及JSON數據

樣例：

var arr = ["小明", "小紅"];

console.log("歡迎%s和%s兩位新同窗",arr[0],arr[1]);

console.log("圓周率整數部分：%d，帶上小數是：%f",3.1415,3.1415);

3、自定義樣式

使用%c爲打印內容定義樣式,再輸出信息前加上%c，後面寫上標準的css樣式，就能夠爲輸出的信息添加樣式了

console.log("%cMy stylish message", "color: red; font-style: italic");

console.log("%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");

console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');

總結

Console的用法不少，有些再調試過程當中很是實用，能夠節省不少時間。固然我知道debug仍是用斷點調試的方法比較好，可是小問題用「printf大法」也是很好用的（滑稽臉）。