使用chrome控制台调试js代码

1.打开控制台(空白页签即可)

2.将控制台在独立页打开(点击控制台右上角的三个点图标，然后点击如下图中的图标)

3.创建脚本编辑页面

4.页面区域说明

5.花键＋回车之行代码

6.常用命令介绍

6.1显示信息的命令

 console.log('hello');
 console.info('信息');
 console.error('错误');
 console.warn('警告');  

6.2占位符

 console.log("%d年%d月%d日",2011,3,26);  

6.3信息分组

 console.group("第一组信息");
 console.log("第一组第一条:我的XX(http://www.baidu.com)");
 console.log("第一组第二条:xxx(http://baidu.com)");
 console.groupEnd();
 console.group("第二组信息");
 console.log("第二组第一条:程序爱好者");
 console.log("第二组第二条:欢迎你");
 console.groupEnd();  

6.4查看对象的信息(注意区分和console.log())

 var p = {};
 p.age = 12;
 p.name = "张三";
 p.play = function(){console.log("i am playing")}
 console.dir(p);
 console.log(p);

6.5显示某个节点的内容

 console.dirxml(); //用来显示网页的某个节点（node）所包含的html/xml代码。
 var body = document.getElementsByTagName('body')[0];
 console.dirxml(body);

6.6断言

 var result = 1;
 console.assert( result );
 var year = 2015;
 console.assert(year == 2019 );

6.7追踪函数的调用轨迹

 function add(a,b){
   console.trace();
   return a+b;
 }
 var x = add3(1,1);
 function add3(a,b){return add2(a,b);}
 function add2(a,b){return add1(a,b);}
 function add1(a,b){return add(a,b);}

6.8计时器

 console.time("控制台计时器一");
 for(var i=0;i<1000;i++){
   for(var j=0;j<1000;j++){}
 }
 console.timeEnd("控制台计时器一");