調試 console

1, debugger方式    這個這裏不提

2. console 說下

分類輸出：

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

分組輸出：

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.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.assert

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

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

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

追蹤調用堆棧   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);

 

有趣的log

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

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

//自定義樣式
console.log("%cMy stylish message", "color: red; font-style: italic");