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. MySQL存储引擎 InnoDB/ MyISAM/ MERGE/ BDB 的区别

    MyISAM:默认的MySQL插件式存储引擎,它是在Web.数据仓储和其他应用环境下最常使用的存储引擎之一.注意,通过更改 STORAGE_ENGINE 配置变量,能够方便地更改MySQL服务器的默认 ...

  2. showModalDialog 超过问题

    a.aspx页面打开一个弹出模式对话框b.aspx. a.aspx 页面页面代码: function SetPlay() { window.showModalDialog('SetAdvertisin ...

  3. WDC2106 iOS10新特性及开发者要注意什么

    昨晚苹果在旧金山召开了WWDC,看了WWDC2016直播,我们发现变得谨慎而开放的苹果在新一版四大平台系统中展示了很多变化,当然重中之重还是伟大的iOS.通过试用iOS10beta版,除了长大了的更强 ...

  4. Xcode6中autolayout和sizeclass的使用

    一.关于自动布局(Autolayout) 在Xcode中,自动布局看似是一个很复杂的系统,在真正使用它之前,我也是这么认为的,不过事实并非如此. 我们知道,一款iOS应用,其主要UI组件是由一个个相对 ...

  5. 微软Hololens学院教程-Hologram 230-空间场景建模(Spatial mapping )【微软教程已经更新,本文是老版本】

    这是老版本的教程,为了不耽误大家的时间,请直接看原文,本文仅供参考哦!原文链接:https://developer.microsoft.com/EN-US/WINDOWS/HOLOGRAPHIC/ho ...

  6. poj 2060 Taxi Cab Scheme (最小路径覆盖)

    http://poj.org/problem?id=2060 Taxi Cab Scheme Time Limit: 1000MS   Memory Limit: 30000K Total Submi ...

  7. wordpress换域名后无法登陆的解决方案

    第一步:登录到你的数据库管理页面,找到wp_options表: 第二步:将表中的siteurl和home字段的值修改为当前的新域名,siteurl值的修改和home值的修改同理.如下图:

  8. 5.2:缓存中获取单例bean

    5.2  缓存中获取单例bean 介绍过FactoryBean的用法后,我们就可以了解bean加载的过程了.前面已经提到过,单例在Spring的同一个容器内只会被创建一次,后续再获取bean直接从单例 ...

  9. 【概率】COGS 1487:麻球繁衍

    Description 万有引力定律: “使物体相互靠近的力的大小与物体的质量成正比——而物体的质量又由同一种力决定.这是一个有趣并且有益的例子,说明了科学是如何用A证明B,再用B证明A的.”——安布 ...

  10. The 9th Zhejiang Provincial Collegiate Programming Contest->Problem D:D - Draw Something Cheat

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3603 题意:在给出的字符串中找出每行都出现的字母按字典序排序. #incl ...