javascript console 函数详解 js开发调试的利器

Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中。

使用 alert 不是一样可以显示信息,调试程序吗?alert 弹出窗口会中断程序, 如果要在循环中显示信息,手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息,但很多功能支持都没有 console 好,看完后面 console 的介绍就知道了。

方法/步骤

  1.  

    控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。

    一、显示信息的命令

    Firebug内置一个console对象,提供5种方法,用来显示信息。

    最简单的方法是console.log(),可以用来取代alert()或document.write()。比如,在网页脚本中使用console.log("Hello World"),加载时控制台就会自动显示如下内容。

  2.  

    另外,根据信息的不同性质,console对象还有4种显示信息的方法,分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。

    比如,在网页脚本中插入下面四行:

      console.info("这是info");

      console.debug("这是debug");

      console.warn("这是warn");

      console.error("这是error");

  3.  

    占位符

    console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。

    比如,

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

      console.log("圆周率是%f",3.1415926);

    %o占位符,可以用来查看一个对象内部情况。比如,有这样一个对象:

      var dog = {} ;

      dog.name = "大毛" ;

      dog.color = "黄色";

    然后,对它使用o%占位符。

      console.log("%o",dog);

  4.  

    分组显示

    如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()。

      console.group("第一组信息");

        console.log("第一组第一条");

        console.log("第一组第二条");

      console.groupEnd();

      console.group("第二组信息");

        console.log("第二组第一条");

        console.log("第二组第二条");

      console.groupEnd();

  5.  

    console.dir()

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

    比如,现在为第二节的dog对象,添加一个bark()方法。

      dog.bark = function(){alert("汪汪汪");};

    然后,显示该对象的内容,

      console.dir(dog);

  6.  

    console.dirxml()

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

    比如,先获取一个表格节点,

      var table = document.getElementById("table1");

    然后,显示该节点包含的代码。

      console.dirxml(table);

  7.  

    console.trace()

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

    比如,有一个加法器函数。

      function add(a,b){

        return a+b;

      }

    我想知道这个函数是如何被调用的,在其中加入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);}

    运行后,会显示add()的调用轨迹,从上到下依次为add()、add1()、add2()、add3()。

  8.  

    计时功能

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

      console.time("计时器一");

      for(var i=0;i<1000;i++){

        for(var j=0;j<1000;j++){}

      }

      console.timeEnd("计时器一");

  9.  

    性能分析

    性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()。

    假定有一个函数Foo(),里面调用了另外两个函数funcA()和funcB(),其中funcA()调用10次,funcB()调用1次。

      function Foo(){

        for(var i=0;i<10;i++){funcA(1000);}

        funcB(10000);

      }

      function funcA(count){

        for(var i=0;i<count;i++){}

      }

      function funcB(count){

        for(var i=0;i<count;i++){}

      }

    然后,就可以分析Foo()的运行性能了。

      console.profile('性能分析器一');

      Foo();

      console.profileEnd();

    控制台会显示一张性能分析表,如下图。

     
     
    [转]http://jingyan.baidu.com/article/e75aca855c6419142edac6c1.html

[转]javascript console 函数详解 js开发调试的利器的更多相关文章

  1. javascript console 函数详解 js开发调试的利器

    Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中. 使用 alert 不是一样可以显示 ...

  2. javascript dom 操作详解 js加强

    js加强操作实现代码. 1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读 ...

  3. JavaScript valueOf() 函数详解

    valueOf()函数用于返回指定对象的原始值. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. 所有主流浏 ...

  4. JavaScript toString() 函数详解

    toString()函数用于将当前对象以字符串的形式返回. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. ...

  5. JavaScript hasOwnProperty() 函数详解

    hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性.如果有,返回true,否则返回false. 该方法属于Object对象,由于所有的对象都"继承 ...

  6. js调试工具Console命令详解

    这篇文章主要介绍了js调试工具Console命令详解,需要的朋友可以参考下   一.显示信息的命令 复制代码 代码如下: < !DOCTYPE html> < html> &l ...

  7. loadrunner 脚本开发- web_url函数详解

    脚本开发- web_url函数详解 by:授客 QQ:1033553122   加载指定url的web页面(GET请求) C语言函数 int web_url( const char *StepName ...

  8. javascript 函数详解2 -- arguments

    今天我们接着上篇文章来继续javascript函数这个主题.今天要讲的是函数对像中一个很重要的属性--arguments. 相关阅读: javascript 函数详解1 -- 概述 javascrip ...

  9. JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...

随机推荐

  1. RecursiveDirectoryIterator目录操作类

    /** * @author Funsion Wu * @abstract SPL使用案例,全国首发,技术分享,欢迎转帖 */ class Dir extends RecursiveDirectoryI ...

  2. EXTJS4.2 控件之Grid getRowClass 添加行背景色

    css 样式: /*交流管理系统 开始*/ tr.x-grid-record-blue .x-grid-td { background: #87CEFF; }/*grid 行颜色*/ tr.x-gri ...

  3. IOS项目集成ShareSDK实现第三方登录、分享、关注等功能(备用)

    (1)官方下载ShareSDK iOS 2.8.8,地址:http://sharesdk.cn/ (2)根据实际情况,引入相关的库,参考官方文档. (3)在项目的AppDelegate中一般情况下有三 ...

  4. mv 的使用

    Linux下目录的合并以及文件的覆盖案例 功能说明:将源文件重命名为目标文件,或将源文件移动至指定目录. 用法:mv [选项]... [-T] 源文件 目标文件 或:mv [选项]... 源文件... ...

  5. JS日期格式化(网上转载)

    JS日期格式化(网上转载) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  6. 算法导论_ch2

    Ch2算法基础 whowhoha@outlook.com 2.1 插入排序 输入:n个数的一个序列〈a1,a2,…,an〉. 输出:输入序列的一个排列〈a′1,a′2,…,a′n〉,满足a′1≤a′2 ...

  7. jmeter summariser(命令行执行时的输出) 、查看结果树等结果中文乱码

    在使用jmeter测试时,如果你的sampler名字为中文.或者输出的结果信息有中文,你会发现它们都是乱码,非常蛋碎!原因是:  jmeter的默认编码为:ISO-8859-1, 解决方案就是要修改它 ...

  8. sudo: ./sd_fusing.sh:找不到命令

    1. -----

  9. C#如何在派生类中不显示父类的一些属性以及TypeDescriptor使用

    public SonClass:FatherClass { 定义属性 .... } Type thisType = typeof(SonClass);方法一: PropertyInfo[] pis = ...

  10. sed找到重复的行

    sed之仅打印相邻重复的行 cat file  aaa bbb bbb ccc ddd eee eee fff   只显示重复的行: bbb bbb eee eee   sed -n ':a;N;/\ ...