JS中的九个console命令以及用法

1、显示信息的命令 根据信息的不一样,console对象有四种显示信息的方法,分别是html

console.log('text'); 日志的输出node

console.info('信息'); 信息提示ajax

console.error('错误'); 错误信息bash

console.warn('警告'); 警告信息 效果:函数

其中console.log 最经常使用性能

二:占位符 console对象的五种方法均可以使用printf的风格的占位符,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)ui

console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);
复制代码

效果:spa

3、信息分组日志

console.group("第一组信息");        
    console.log("第一组第一条信息");
    console.log("第一组第二条信息");
    console.groupEnd();//第一组信息结束;能够开始第二条
    console.group("第二组信息");
    console.log("第二组第一条信息");
    console.log("第二组第二条信息");
    console.groupEnd();//第二组信息结束
复制代码

效果:code

4、查看对象的属性和方法 console.dir()能够显示一个对象全部的属性和方法。

var info = {
    name:"Bob",
    age:23,
    message:"今年大学毕业"
};
console.dir(info);
复制代码

效果:

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

var table = document.getElementById("table1");
console.dirxml(table);
复制代码

效果和上一个相似。

6、判断变量是不是真 console.assert()用来判断一个表达式或变量是否为真。若是结果为否,则在控制台输出一条相应信息,而且抛出一个异常。

var result = 1;  
console.assert(result);  
var year = 2018;  
console.assert(year == 2015);
var year = 2018;  
console.assert(year == 2018);
复制代码

1是非0值,是真;而第二个判断是假,在控制台显示错误信息 效果:

7、追踪函数的调用轨迹。 console.trace()用来追踪函数的调用轨迹。

/*函数是如何被调用的,在其中加入console.trace()方法就能够了*/   
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);
}
复制代码

效果:

8、计时功能 console.time()和console.timeEnd(),用来显示代码的运行时间。

console.time("控制台计时器");//计时开始  
for (var i = 0; i < 1000; i++) {&emsp;&emsp;&emsp;&emsp;
    for (var j = 0; j < 1000; j++) {}&emsp;&emsp;
}&emsp;&emsp;
console.timeEnd("控制台计时器");//计时结束
复制代码

运行时间是:4.843994140625s

9、console.profile()的性能分析 性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile() 假定有一个函数Foo(),里面调用了另外两个函数funcA()和funcB(),其中funcA()调用10次,funcB()调用1次。

&emsp;&emsp;function Foo(){
&emsp;&emsp;&emsp;&emsp;for(var i=0;i<10;i++){funcA(1000);}
&emsp;&emsp;&emsp;&emsp;funcB(10000);
&emsp;&emsp;}
&emsp;&emsp;function funcA(count){
&emsp;&emsp;&emsp;&emsp;for(var i=0;i<count;i++){}
&emsp;&emsp;}
&emsp;&emsp;function funcB(count){
&emsp;&emsp;&emsp;&emsp;for(var i=0;i<count;i++){}
&emsp;&emsp;}
复制代码

而后,就能够分析Foo()的运行性能了。

&emsp;&emsp;console.profile('性能分析器一');
&emsp;&emsp;Foo();
&emsp;&emsp;console.profileEnd();
复制代码

控制台会显示一张性能分析表,一共运行了12个函数,共耗时2.656毫秒。其中funcA()运行10次,耗时1.391毫秒,最短运行时间0.123毫秒,最长0.284毫秒,平均0.139毫秒;funcB()运行1次,耗时1.229ms毫秒。

除了使用console.profile()方法,firebug还提供了一个"概况"(Profiler)按钮。第一次点击该按钮,"性能分析" 开始,你能够对网页进行某种操做(好比ajax操做),而后第二次点击该按钮,"性能分析"结束,该操做引起的全部运算就会进行性能分析。

相关文章
相关标签/搜索