调试 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");