你了解js调试工具console吗？

对于我个人而言，在开发过程中需要监测某些表达式或者变量的值的时候，习惯使用console.log()将值打印到控制台。但console对象除了console.log()这个常用方法外，还有很多其他的方法。灵活运用这些方法，可以给开发过程增添许多便利。

一、显示信息

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

控制台：

二、占位符

支持的占位符：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）。

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

控制台：

三、信息分组

console.group('第一组信息');
console.log('第一组第一条:我的博客(http://my.csdn.net/#M_more)');
console.log("第一组第二条:CSDN(http://my.csdn.net/#M_more)");
console.groupEnd();

console.group("第二组信息");
console.log("第二组第一条:程序爱好者QQ群：209119557");
console.log("第二组第二条:欢迎你加入");
console.groupEnd();

控制台：

四、查看对象的信息

console.dir( ) 可以显示一个对象所有的属性和方法。

var info = {
  blog: "http://www.hbzhouyj.com/blog",
  QQGroup: 209119557,
  message: "欢迎程序爱好者的加入"
}
console.dir(info);

控制台：

五、显示某个节点的内容

console.dirxml( ) 用来显示网页的某个节点所包含的html/xml代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="info">
    <h3>我的博客：http://www.hbzhouyj.com/blog</h3>
    <p>程序爱好者:209119557,欢迎你的加入</p>
</div>

<script>

    var info = document.getElementById('info');
    console.dirxml(info);

</script>
</body>
</html>

控制台：

六、判断变量是否为真

console.assert( ) 用来判断一个表达式或变量是否为真。为真，控制台不输出任何值；为否，在控制台输出一条相应信息，并抛出异常。

var result = 1;
console.assert( result );
var year = 2014;
console.assert(year == 2017);

控制台：

七、追踪函数的调用轨迹

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);}

控制台：

八、计时功能

console.time( ) console.timeEnd( )，用来显示代码的运行时间。

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

控制台：

九、记录调用次数

console.count( ) 以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。

(function() {
  for (var i = 0; i < 5; i++) {
    console.count('count');
  }
})();

控制台：

十、清空控制台

console.clear();

控制台：

参考：http://www.jb51.net/article/56504.htm

你了解js调试工具console吗？

猜你喜欢