JavaScript中的console.time()函数详细介绍

如果需要在Web调试过程中知道代码执行的时间,那么可以通过在JavaScript代码中添加console.time()语句和console.timeEnd()语句来对程序的执行进行计时。以下面这个耗时较长的foo()函数为例:

复制代码 代码如下:

function foo(){
    var x = 4.237;
    var y = 0;
    for (var i=0; i<100000000; i++) {
        y = y + x*x;
    }
    return y;
}

如果需要知道函数执行过程中消耗了多长时间,可以在foo()函数调用之前插入console.time()语句,在其调用结束后插入console.timeEnd()语句:

复制代码 代码如下:

console.time("test");
foo();
console.timeEnd("test");

程序执行完毕后,控制台会显示此次计时的结果:”test: 1797ms”,显示的日志级别为info。

console.time()和console.timeEnd()接受一个字符串作为参数,该字符串相当于计时的id。浏览器会将拥有相同参数(id)的console.time()与console.timeEnd()进行配对,记录两者之间的时间差。因此,可以通过使用不同的id来对JavaScript程序中不同的地方进行计时。

浏览器支持

对于各个浏览器,console.time()计时的支持情况如下:

Firefox。10.0后原生支持。对于之前版本的Firefox,可以通过安装Firebug插件来实现。详见:https://developer.mozilla.org/en-US/docs/Web/API/console.time?redirectlocale=en-US&redirectslug=DOM%2Fconsole.time
Google Chrome。2.0后原生支持。详见:https://developers.google.com/chrome-developer-tools/docs/console-api#consoletimelabel
IE。IE11中原生支持。对于之前版本的IE,可以通过安装Firebug Lite来实现。详见:http://msdn.microsoft.com/en-us/library/ie/dn265071%28v=vs.85%29.aspx
Safari。4.0后原生支持。详见:https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html
Opera。支持。详见:http://www.opera.com/dragonfly/documentation/console/

时间: 2014-12-27

JS中捕获console.log()输出的方法

本文实例讲述了JS中捕获console.log()输出的方法.分享给大家供大家参考.具体分析如下: 我们知道console.log()可以将信息输出到debugger中供开发者查看.但如果我们想要在JS中获取console.log()的输出结果呢?其实不难,先将原本的console.log保存起来,然后替换成另外一个实现即可.代码如下: var lastLog; console.oldLog = console.log; console.log = function(str) { console

Javascript调试之console对象——你不知道的一些小技巧

前言 写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量. 但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法.由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示. 不同级别日志 通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示. 不同级别的日志

JavaScript中的console.profile()函数详细介绍

编写JavaScript程序时,如果需要知道某段代码的执行时间,可以使用console.time().不过,在分析逻辑较为复杂的JavaScript程序,试图从中找出性能瓶颈的时候,console.time()就不适用了 - 深入分析逻辑较为复杂的JavaScript程序的运行就意味着插入大量的console.time()语句,而这无疑是不可接受的.对于复杂逻辑的JavaScript程序调优,正确的方法是使用console.profile(). 浏览器支持 安装了Firebug插件的Firefo

JavaScript中的console.trace()函数介绍

调试JavaScript程序时,有时需要打印函数调用的栈信息,这可以通过使用console.trace()来实现.以下面的代码为例: 复制代码 代码如下: function doTask(){     doSubTask(1000,10000); }   function doSubTask(countX,countY){     for(var i=0;i<countX;i++){         for(var j=0;j<countY;j++){}     }     console.t

利用Js的console对象,在控制台打印调式信息测试Js的实现

一次偶然的机会,打开百度的时候按下了F12,然后就见控制台里面输出了百度的招聘广告,感觉挺帅气的,再然后就有了这篇博文. 既然可以这样在控制台输出信息,那以后再调试Js的时候不就可以省去很多麻烦了嘛!避免不误人子弟,特意使用for(var i in console)查看了下各种浏览器控制台对console的支持, 结果如下: IE 11 控制台 log , info , warn , error , debug , assert , time , timeEnd , group , groupC

JavaScript中的console.group()函数详细介绍

在使用console.log()或者其它日志级别的控制台输出功能时,日志输出是没有层级关系的.当程序中日志输出较多时,这一局限性将带来不小的麻烦.为了解决这一问题,可以使用console.group().以下面代码为例: 复制代码 代码如下: function doTask(){     doSubTaskA(1000);     doSubTaskA(100000);     console.log("Task Stage 1 is completed");     doSubTas

node.js中的console用法总结

复制代码 代码如下: //建立app.js页面 // 一:页面代码 console.log("log信息"); //在页面中执行(node app.js)这个文件会在控制台中看到log信息:"log信息" //换个方式执行:node app.js 1>info.txt(1代表重定向标准输出流); //这个时候会在app.js的同级目录下看到一个info.txt文件,里面还有"log信息". //二:依次序输出所有字符串 console.lo

JavaScript中的console.assert()函数介绍

在JavaScript程序的开发和维护过程中,Assert(断言)是一个很好的用于保证程序正确性的特性.在具备调试工具的浏览器上,这一特性可以通过调用console.assert()来实现.比如在以下代码中,console.assert()语句保证cat对象的score变量值长度为3: 复制代码 代码如下: function cat(name, age, score){     this.name = name;     this.age = age;     this.score = scor

JavaScript中的console.dir()函数介绍

在调试JavaScript程序时,有时需要dump某些对象的详细信息.通过手工编写JavaScript代码可以完成这一工作:针对对象的属性进行循环,将循环到的每一个属性值打印出来:可见,这一过程是比较繁琐的.在具备调试工具的浏览器上,这一工作可以通过console.dir()语句来方便的完成. console.dir()的使用 console.dir()的使用非常简单,直接将需要dump的对象传入该语句即可.比如以下的例子: 复制代码 代码如下: function cat(name, age,

JavaScript中的console.log()函数详细介绍

对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用:而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑. 什么是console.log()? 除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来

Javascript中的高阶函数介绍

这是一个有趣的东西,这或许也在说明Javascript对象的强大.我们要做的就是在上一篇说到的那样,输出一个Hello,World,而输入的东西是print('Hello')('World'),而这就是所谓的高阶函数. 高阶函数 高阶看上去就像是一种先进的编程技术的一个深奥术语,一开始我看到的时候我也这样认为的. Javascript的高阶函数 然而,高阶函数只是将函数作为参数或返回值的函数.以上面的Hello,World作为一个简单的例子. 复制代码 代码如下: var Moqi = func

JavaScript中重名的函数与对象示例详析

前言 本文主要给大家介绍了关于JavaScript中重名的函数与对象的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. JavaScript 允许重复声明变量,后声明的覆盖之前的. var a = 1; var a = 'x'; console.log(a); //输出'x' JavaScript允许重复定义函数. JavaScript没有重载这个概念,它仅依据函数名来区分函数. 后定义的同名函数覆盖之前的,与参数无关. function test() { consol

JavaScript中变量提升和函数提升的详解

第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函数提升 3. 为什么要进行提升 4. 最佳实践 那么,我们就开始进入主题吧. 1. 变量提升 通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理.(注:当前流行的JS引擎大都对源码进行了编译,由于引擎的不同,编译形式也会有