关于Chrome浏览器调试技巧

写在前面：本文包括浏览器调试，不包括web移动端调试。本文调试均在chrome浏览器进行。

alert

这个不用多说了，不言自明。

console

基本输出

想必大家都在用 console.log 在控制台输出点东西，其实console还有其它的方法：

console.log( "打印字符串" ); //在控制台打印自定义字符串  
console.error( "我是个错误" ); //在控制台打印自定义错误信息  
console.info( "我是个信息" ); //在控制台打印自定义信息  
console.warn( "我是个警告" ); //在控制台打印自定义警告信息  
console.debug( "我是个调试" ); //在控制台打印自定义调试信息  
cosole.clear(); //清空控制台（这个下方截图中没有） 

注意上面输出的error和throw出的error不一样，前者只是输出错误信息，无法捕获，不会冒泡，更不会中止程序运行。

格式化输出

除此以外，console还支持自定义样式和类似c语言的printf形式：

console.log("%s年" , 2016 ); //%s表示字符串  
console.log( "%d年%d月" , 2016 , 11 ); //%d表示整数  
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" );  

DOM输出

下面几个比较简单的，就不举例子了，简单说一下：

var  ul = document.getElementsByTagName( "ul" );  
console.dirxml(ul);  
//树形输出table节点，即<table>和它的innerHTML，由于document.getElementsByTagName是动态的，所以这个得到的结果肯定是动态的   

对象输出

var  o = { name: "Lily" ,    age:  18  };  
console.dir(obj); 
//显示对象自有属性和方法  

对于多个对象的集合，你可以这样，输出更清晰：

var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];  
console.log(stu);  
console.table(stu);  

成组输出

//建立一个参数组  
console.group("start"); //引号里是组名，自己起  
console.log("sub1");  
console.log("sub1");  
console.log("sub1");  
console.groupEnd("end");  

函数计数和跟踪

function fib(n){ //输出前n个斐波那契数列值 
  if(n == 0) return; 
  console.count("调用次数");//放在函数里，每当这句代码运行输出所在函数执行次数 
  console.trace();//显示函数调用轨迹(访问调用栈） 
  var a = arguments[1] || 1; 
  var b = arguments[2] || 1; 
  console.log("fib=" + a); 
  [a, b] = [b, a + b]; 
  fib(--n, a, b); 
} 
fib(6);  

注：Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。

（编辑：张掖站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!