使用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("控制台计时器一");