前端开发——Chrome浏览器调试

1、alert

        弹出框警告

2、console

console.log("normal");           // 用于输出普通信息

console.info("information");     // 用于输出提示性信息

console.error("error");          // 用于输出错误信息

console.warn("warn");            // 用于输出警示信息

console.clear();       //清空控制台

 

3、格式化输出

console.log("%s","string");                  //字符(%s)

console.log("%d年%d月%d日",2016,8,29);       //整数(%d或%i)

console.log("圆周率是%f",3.1415926);         //浮点数(%f)

console.log("%o",console)                    //对象(%o)

console.log("%c自定义样式","font-size:30px;color:#00f");

console.log("%c我是%c自定义样式","font-size:20px;color:green","font-size:10px;color:red");

 

4、DOM输出

var nodes = document.getElementsByTagName("ul");

console.dirxml(nodes);

 

5、对象输出

var obj = {

    name: 'dog',

    age: 1

};

console.dir(obj);

 

6、判断变量是否为真（只有为假时抛出异常）

var testObj = false;

console.assert(testObj, '当testObj为false时才输出！');

 

7、计时（console.time()和console.timeEnd()用来显示代码运行时间）

console.time("控制台计时器");

for(var i = 0; i < 10000; i++){

    for(var j = 0; j < 10000; j++){}       

}

console.timeEnd("控制台计时器");

 

8、函数计数和跟踪（console.count()、console.trace()）

function fib(n) {

    if(n == 0) return;

    console.count("调用次数");  // 输出所在函数的执行次数

    console.trace(); // 显示函数调用轨迹（访问调用栈）

    console.log("fib=" + n);

    fib(--n);

}

fib(6);

 

9、键和值，keys、values

 

10、表格显示（console.table）

var mytable = [

    {

        name: "Alan",

        sex : "man",

        age : "27"

    },

    {

        name: "Wu",

        sex : "gril",

        age : "28"

    },

    {

        name: "Tao",

        sex : "man and gril",

        age : "29"

    }

]

console.table(mytable);

 

11、分组输出（console.group(),console.groupEnd()）

console.group("1：爸爸");

    console.log("1-1：儿子");

    console.log("1-2：女儿");

console.groupEnd();

 

console.group("2：妈妈");

    console.log("2-1：儿子");

    console.log("2-2：女儿");

 

12、性能分析（分析程序各个部分的运行时间，console.profile()、console.profileEnd()）

function All(){

    // alert(11);

    for(var i = 0; i < 10; i++){

        funcA(100);

    }

    funcB(1000);

}

function funcA(count){

    for(var i = 0; i < count; i++){};

}

function funcB(count){

    for(var i = 0; i < count; i++){};

}

console.profile("性能分析器");

All();

console.profileEnd();

 

13、 $0返回近一次表达式执行的结果，$0-$4代表了近5个你选择过的DOM节点

 

 

14、debugger（断点单步调试）

step 快捷键：F9 单步执行

step into 快捷键：F11 全称：step into next function 

    单步执行，遇到子函数就进去继续单步执行

step over 快捷键：F10 全称：step over next function 

    单步执行，遇到子函数并不进去，将子函数执行完并将其作为一个单步

step out 快捷键：Shift + F11 全称：step out of current function 

    直接跳出当前的函数，返回父级函数