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

2025-06-19 08:23:23

1、控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。一、显示信息的命令Firebug内置一个console对象,提供5种方法,用来显示信息。最简单的方法是console.log(),可以用来取代alert()或document.write()。比如,在网页脚本中使用console.log("Hello World"),加载时控制台就会自动显示如下内容。

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

2、另外,根据信息的不同性质,console对象还有4种显示信息的方法,分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。比如,在网页脚本中插入下面四行:  console.info("这是info");  console.debug("这是debug");  console.warn("这是warn");  console.error("这是error");

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

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);

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

4、分组显示如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()。  console.group("第一组信息");    console.log("第一组第一条");    console.log("第一组第二条");  console.groupEnd();  console.group("第二组信息");    console.log("第二组第一条");    console.log("第二组第二条");  console.groupEnd();

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

5、console.dir()console.dir()可以显示一个对象所有的属性和方法。比如,现在为第二节的dog对象,添加一个bark()方法。  dog.bark = function(){alert("汪汪汪");};然后,显示该对象的内容,  console.dir(dog);

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

6、console.dirxml()console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。比如,先获取一个表格节点,  var table = document.getElementById("table1");然后,显示该节点包含的代码。  console.dirxml(table);

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

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()。

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

8、计时功能console.time()和console.timeEnd(),用来显示代码的运行时间。  console.time("计时器一");  for(var i=0;i<1000;i++){    for(var j=0;j<1000;j++){}  }  console.timeEnd("计时器一");

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

9、性能分析性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profil髫潋啜缅e()。假定有一个函数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();控制台会显示一张性能分析表,如下图。

javascript console 函数详解 js开发调试的利器
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢