关闭搜索(ESC)
搜索标签:

你不知道的Console

2015-02-26 浏览:832 标签: javascript console

描述

Console在JS调试里,是经常用的,我们用的最多的是console.log('is it?'),以及下面最常出现的几个:

console.info('show info');
console.debug('show debug');
console.warn('show warn');
console.error('show error');

显示效果如下:

console

以上都是常见的console功能,现在会讨论一些有趣的功能。

占位符

console也有类似printf风格的占位符。有四种方法,比如字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)。

举个例子:

console.log("今年%d岁,身高%f米,体重%fKG",24,1.80,180.0);

显示效果如下:

console

分组显示

有时候,信息太多了,所以我们可以分一个组。主要用到console.group()和console.groupEnd()

console.group('the first group');
    console.log("right");
    console.log("wrong");
console.groupEnd()

显示的效果如下:

tupian

console.dir 显示对象所有的属性和方法

举个例子:

function holiday() {
}
holiday.day = "2015-12-16";
holiday.activity = "play";
holiday.dinner = "cake";
console.dir(holiday);

显示效果如下:

console.dirxml()

显示网页某个节点所包含的html/xml代码。

这个功能特别好,可以直接显示代码,但是如果直接在控制台,也差不多可以直接看了。

console.assert()

判断表达式或者变量是否为真。

console.trace()

用来追踪函数的调用轨迹。

举例代码如下:

function add(a,b) {
   console.trace();
   return a+b; 
}

function add3(a,b) {
   return add2(a,b);
}

function add2(a,b) {
   return add1(a,b);
}

function add1(a,b) {
   return add(a,b);
}
var x = add3(1,1);

效果如下:

即时功能

最喜欢的是这个即时功能。console.time()console.timeEnd(),用来显示代码的运行时间。

console.time('计时器')
for(var i=0;i<1000;i++) {
  // do something
}
console.timeEnd('计时器')

显示效果如下:

性能分析

性能分析就是分析程序各个部分的运行时间。使用的方法是console.profile,和console.time的用法一样,将执行的函数放置在profile中间。

console.profile('性能分析');
foo();
console.profileEnd();

点击概况就可以显示性能分析了。

添加评论