【转载】FireBug的控制台管理

在Firebug中使用调试工具很简单，比如可以这样：

你 首先在 FireFox 中运行你的程序，就是打开你要测试的页面，如果有错则可以直接在console窗口中所显示出来的错误文件链接处点击，这样你将跳入到相应的文件相应的 行。这里你可以看到Tab页已经在Debugger上了。如果没有错，你也可以切换到Debugger窗口，在窗口下面是一个当前文件的列表，可以看到 html文件，js文件等，这样你可以选择一个要调试的文件进行处理。

在代码窗口中，左边一列是行号。你可以使用鼠标在行号左侧单击，这样 会有一个红点，这样就加了一个断点。于是再刷新浏览器，程序将在这个地方停下来。代码窗口的右边是变量监控窗口，可以看到相关的变量信息。此时你可以使用 Firebug的所有功能来查看信息了。如在console进行代码测试，在Inspector查看元素属性，css，layout等信息，很方便。

除了这种方式，我更习惯的是加入print和日志之类的东西，方法是简单了些，不过我已经习惯了。你可能要说，浏览器怎么可能使用print的方法呢。的确是没有，一般的方法是使用alert()，但在Firebug上有这么几句话：

Web developers have suffered with "alert debugging" for centuries. If you enjoy clicking the "Ok" button 40,000 times a day, FireBug is not for you. Otherwise, you'll enjoy having the ability to log messages from JavaScript in your web page directly to the FireBug console.

翻译过来就是：

Web程序员已经忍受了"alert调试"几个世纪了。如果你乐于一天之中点击"OK"按钮4万次，FireBug不适合你。否则你将愉快地拥有记录日志的能力，它可以将你web页面上的JavaScript信息记录到FireBug的console上。

看 到了吧，我们完全可以在自已的Javascript代码中使用FireBug的命令行来输出一些日志信息，不用再使用alert了。为什么我现在才发现 它，而不是以前呢。因为我的确没有仔细看过Firebug的功能说明。今天在jQuery的邮件列表中，我偶然看到这么一行代码：

console.info("...")

我 看到很奇怪，我突然想到这会不会是FireBug提供的功能，在它的命令行上一试，果然。于是乎，找到FireBug的主页仔细研究起来，才发现这么好的 东西。那么下面介绍一下，除了前面说的断点，单步调试，Inspector功能之外，还可以使用console来做些什么。参考的文档就是Firebug 主页上的文档内容。

1. 多级别的日志输出

console.debug("message" [,objects]) - Logs a debug message. 
console.info("message" [,objects]) - Logs an informative message. 
console.warn("message" [,objects]) - Logs a warning. 
console.error("message" [,objects]) - Logs an error.

很简单就不多说了。它可以在命令行上根据级别不同显示不同的小图标，很有趣。这样，通过它，我们可以放弃alert了。

2. 断言

Firebug还提供了许多断言(assert)。assert在通常的编程中作为一种常见的调试方法，它用来保证某些处理或处理是预期的。不过Firebug的断言不支持表达式，它通过不同的断言函数来实现一定的表达式的功能，不过内容却很多，不再作介绍了。

3. 考量(Measurement)

提供了一些辅助功能，如：

console.trace() 提供了显示调用层次的信息，可以显示几个文件的先后调用次序及相应的行号。

console.time("name")和console.timeEnd("name") 用来记录执行时间。其中name是需要自已定义，用来区分不同的时间统计。这样你可以使用它来统计代码执行的时间。

console.count("name") 它可以用来记录此行代码(就是console.count("name")这行代码)被执行了几次。原来我还想，为什么是自已，而不能指定是哪个函数呢。其实你把它放到你的函数中，与指定函数是一样的。毕竟这种方法是最简单的实现。不同的计数需要不同的name。

4. 格式化对象的功能

它可以把一个对象按指定的格式进行处理后输出。如：

console.info("%d", 5) 输出一个数值
console.info("%.o", [1,2,3]) 输出一个数组，结果是["1", "2", "3"]

等等，有许多这样的功能

5. 在命令行还提供了一些函数，如：

$()相当于document.getElementById()(不知道这一点是不是从prototype.js学来的)
$$("css") 以CSS的selector方式来选择对象(更象是prototype.js了)，返回一个数组
$x("xpath")以XPath语法来选择对象，返回一个数组(不知道是不是学jQuery的)
dir(object)可以列出对象的属性
clear()可以清除命令行的信息

还有几个其它的命令，有兴趣自已看吧。

Firebug console 文档

FireBug 控制台函数说明

Posted by Nicholas Ding on 九月 20th, 2006

原文地址：http://www.joehewitt.com/software/firebug/docs.php

FireBug 是一个非常实用的JavaScript以及DOM查看调试工具，是 Firefox 的一个插件。使用 FireBug 调试 AJAX 应用非常方便，终于可以告别 alert 时代了！

Console Logging 函数

FireBug 为所有 Web 页面提供了一个 console 对象。这个对象有以下函数：

Logging 基础

console.log("message" [,objects]) - 将一个字符串打印到控制台。字符串可以包含任何“String Formatting”小节描述的模式。字符串后面的对象应该用来取代之前字符串中的模式。（译者注：大家用过C里面 printf 吧，效果基本是一样的。）

Logging 等级

通常根据不同的等级来区分Logging的严重程度是很有帮助的。FireBug 提供了4个等级。为了达到视觉分离的效果，这些函数与 de>logde> 不同的地方就是它们在被调用的时候会自动包含一个指向代码行数的链接。

console.debug("message" [,objects]) - 记录一个 debug 消息。

console.info("message" [,objects]) - 记录一个信息.

console.warn("message" [,objects]) - 记录一个警告.

console.error("message" [,objects]) - 记录一个错误.

断言

断言是一条确保代码规则的非常好的途径。console 对象包含了一系列各种类型的断言函数，并且允许你编写自己的断言函数。

console.assert(a, "message" [,objects]) - Asserts that an de>ade> is true.

console.assertEquals(a, b, "message" [,objects]) - Asserts that de>ade> is equal to de>bde>.

console.assertNotEquals(a, b, "message" [,objects]) - Asserts that de>ade> is not equal to de>bde>.

console.assertGreater(a, b, "message" [,objects]) - Asserts that de>ade> is greater than de>bde>.

console.assertNotGreater(a, b, "message" [,objects]) - Asserts that de>ade> is not greater than de>bde>.

console.assertLess(a, b, "message" [,objects]) - Asserts that de>ade> is less than de>bde>.

console.assertNotLess(a, b, "message" [,objects]) - Asserts that de>ade> is not less than de>bde>.

console.assertContains(a, b, "message" [,objects]) - Asserts that de>ade> is in the array de>bde>.

console.assertNotContains(a, b, "message" [,objects]) - Asserts that de>ade> is not in the array de>bde>.

console.assertTrue(a, "message" [,objects]) - Asserts that de>ade> is equal to de>truede>.

console.assertFalse(a, "message" [,objects]) - Asserts that de>ade> is equal to de>falsede>.

console.assertNull(a, "message" [,objects]) - Asserts that de>ade> is equal to de>nullde>.

console.assertNotNull(a, "message" [,objects]) - Asserts that de>ade> is not equal to de>nullde>.

console.assertUndefined(a, "message" [,objects]) - Asserts that de>ade> is equal to de>undefinedde>.

console.assertNotUndefined(a, "message" [,objects]) - Asserts that de>ade> is not equal to de>undefinedde>.

console.assertInstanceOf(a, b, "message" [,objects]) - Asserts that de>ade> is an instance of type de>bde>.

console.assertNotInstanceOf(a, b, "message" [,objects]) - Asserts that de>ade> is not an instance of type de>bde>.

console.assertTypeOf(a, b, "message" [,objects]) - Asserts that the type of de>ade> is equal to the stringde>bde>.

console.assertNotTypeOf(a, b, "message" [,objects]) - Asserts that the type of de>ade> is not equal to the string de>bde>.

测量（Measurement）

下面的一些函数可以让你方便的测量你的一些代码。

console.trace() - 记录执行点的堆栈信息。

console.time("name") - 根据 name 创建一个唯一的计时器。

console.timeEnd("name") - 根据 name 停止计时器，并且记录消耗的时间，以毫秒为单位。

console.count("name") - 记录该行代码执行的次数。

字符串格式化

所有 console 的 logging 函数都可以通过以下模式格式化字符串：

%s - 将对象格式化为字符串。

%d, %i, %l, %f - 将对象格式化为数字。

%o - 将对象格式化成一个指向 inspector 的超链接。

%1.o, %2.0, etc.. - 将对象格式化成包含自己属性的可交互的表格。

%.o - 将对象格式化成具有自身属性的一个数组。

%x - 将对象格式化成一个可交互的 XML 树形结构。

%1.x, %2.x, etc.. - 将对象格式化成一个可交互的 XML 数型结构，并且展开 n 层节点。

如果你需要一个真实的 % 符号，你可以通过一个转移符号就像这样 "\%"。

命令行函数

内建的命令行函数可以通过以下命令行使用：

$("id") - document.getElementById() 的简写。（译者注：跟 prototype.js 学来的吧？）

$$("css") - 返回一个符合 CSS 选择器的元素数组。

$x("xpath") - 返回一个符合 XPath 选择器的元素数组。

$0 - 返回最近被检查（inspected）的对象。

$1 - 返回最近被检查（inspected）的下一个对象。

$n(5) - 返回最近被检查的第n个对象。

inspect(object) - 将对象显示在 Inspector 中。

dir(object) - 返回一个对象的属性名数组。（译者注：跟 Python 学的？）

clear() - 清除控制台信息。