Firefox最牛的插件Firebug(三):控制台记录日志

[ad#content]这次主要介绍一下firebug控制台的记录日志,上次有位访客对console.log很感兴趣,其实console确实为我们代码的调试带来了很多方便,以前总是习惯用alert来测试Javascript的信息,但是有些情况通过alert是有误差的,如果说一些AJAX的程序,因为alert的延迟会得到不同的结果,而且使用console也为我们省去去点击alert窗口的麻烦。以下的介绍都是以最新版Firebug 1.5.2为例子来演示,大家如果有什么需要问题,可以给我留言一起探讨。

Firebug提供如下几个记录日志的函数:
Console.log: 简单的记录日志。
Console.debug: 记录调试信息,并且附上行号的超链接。
Console.error: 在消息前显示错误图标,并且附上行号的超链接。
Console.info: 在消息前显示信息图标,并且附上行号的超链接。
Console.warn: 在消息前显示警告图标,并且附上行号的超链接。
在空白的html页面中,向<body>标签里加入<script>标签,代码如下:

  1. <script type="text/javascript">
  2. console.log('这个是日志消息');
  3. console.debug('这个是调试消息');
  4. console.error('这个是错误消息');
  5. console.info('这个是信息消息');
  6. console.warn('这个是警告消息');
  7. </script>

执行代码后可以在Firebug中看到图中所示的效果。

格式代字符串输出和多变量输出
这个功能类似于C语言中的语法,可以在console记录日志的方法里使用。
%s: 字符串。
%d, %i: 整型(尚不支持数字格式)。
%f: 浮点型(尚不支持数字格式)。
%0: 链接对象。
同时,这几个函数支持多个变量。代码如下:

  1. <script type="text/javascript">
  2. var date = '周六', index = '6';
  3. var yesterday = '周五', tomorrow='周日';
  4. console.log("今天是%s,是一周的第%d天",date,index);
  5. console.log("%s的前后两天是",date,yesterday,tomorrow);
  6. </script>

运行代码后,效果如图所示:

Firebug控制台还提供了其他功能,例如检测函数执行时间、消息分组、测试驱动、跟踪、计数以及查看JavaScript概况等。更多资料可以访问网址:http://getfirebug.com

最后介绍一下面板顶部概况

Firebug面板顶部的一排内容,如图所示:

“清除”菜单用天清除控制台中的内容。
“保持”菜单用于当重新载入页面时保存控制台中的历史内容。
“概况”菜单用于查看函数的性能。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>