`
woxiaoe
  • 浏览: 283147 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

【转载】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() - 清除控制台信息。

 

分享到:
评论

相关推荐

    Firebug控制台详解,让调试js代码变得更简单

    **Firebug控制台详解** Firebug是一款非常强大的Web开发和调试工具,尤其在JavaScript的调试方面,它提供了直观且高效的功能。Firebug是Firefox浏览器的一个扩展插件,它允许开发者实时查看、修改和分析HTML、CSS、...

    Firebug控制台动态加载jquery脚本并执行jquery代码

    本文将深入探讨如何利用Firebug控制台动态加载jQuery脚本,并执行jQuery代码,这对于开发者进行网页调试和增强网页功能极具价值。 首先,让我们了解Firebug。Firebug是Firefox浏览器的一个扩展,它提供了一个强大的...

    FireBug 控制台函数

    FireBug控制台提供的这些函数极大地简化了前端开发中的调试工作,使得开发者能够更加高效地识别并解决问题。无论是基本的日志记录、复杂的断言测试还是性能测量,FireBug都能提供全面的支持。随着技术的发展,虽然...

    Firebug入门与控制台详解

    fireBug入门及fireBug控制台详解,主要讲解安装Firebug等

    console控制台.docx

    Firebug 控制台详解 Firebug 控制台是网页开发的利器,能够极大地提升工作效率。控制台(Console)是 Firebug 的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。 一、显示信息的命令 ...

    firebug1.12-firebug1.11-firebug1.10-firebug1.9-firebug1.8-firebug1.7

    - 引入了对HTML5 History API的支持,便于开发者调试基于URL状态的历史管理。 - 资源面板改进,能够显示并分析网络请求的时间线,包括DNS解析、TCP连接、请求和响应时间。 - JavaScript性能分析器提供了更深入的...

    Firebug中文 web_develope中 火狐2.0.0.14.rar

    到Firebug控制台查看详细,很强大很脑残的说:太方便了(对于扒客一族,扒模版更显神通,我们建议你只拿作技术参考,不要扒得一模一样) 下面我们用web_developer查看一下火狐官网的CSS样式并通过W3C检验下: ...

    firebug各个版本安装包

    Firebug-1.7.3是Firebug系列的一个早期版本,它引入了许多功能,如DOM检查器、CSS编辑器、JavaScript控制台和网络面板。在这个版本中,开发者可以实时查看和修改页面元素,调试JavaScript代码,并追踪HTTP请求。这...

    最新版fireBug插件

    3. **控制台输出**:FireBug的控制台面板可以显示JavaScript的运行日志,包括警告、错误信息以及自定义的console.log()输出。这对于跟踪代码执行过程和调试错误非常有帮助。 4. **DOM查看**:通过DOM面板,你可以...

    Firefox最牛的插件-Firebug使用详解.pdf

    开启Firebug后,浏览器窗口会被分割为上下两部分,上面是正在浏览的网页,下面是Firebug的控制台。用户可以在控制台中查看HTML结构、CSS样式和JavaScript代码,并进行编辑和调试。控制台分为多个标签页,如HTML、CSS...

    firebug 1.7

    3. JavaScript调试:Firebug提供了JavaScript控制台,用于查看和执行JavaScript代码,包括断点、步进执行、查看变量值等功能,使得JavaScript调试变得直观且高效。 二、网络面板 Firebug 1.7中的网络面板能够追踪和...

    firebug及其安装方法

    1. **快捷键**:熟悉Firebug的快捷键可以提高工作效率,例如F12开启/关闭Firebug,Ctrl+Shift+J打开控制台等。 2. **面板切换**:Firebug有多个面板,如HTML、CSS、脚本、网络等,可以通过顶部菜单栏或键盘快捷键在...

    firebug插件

    3. **JavaScript控制台**:JavaScript控制台可以打印出脚本中的错误信息,同时支持直接执行JavaScript代码,便于测试和调试脚本逻辑。 4. **网络监控**:Firebug的网络面板可以记录页面加载时的所有HTTP请求,包括...

    safari浏览器的firebug

    3. **JavaScript控制台**:在这里,你可以查看JavaScript错误,运行单行代码,以及检查变量的值。这对于调试JavaScript代码非常有用。 4. **网络面板**:Firebug Lite可以跟踪页面加载时的网络请求,包括HTTP请求的...

    firefox_firebug

    7. **命令行**:提供一个交互式的JavaScript控制台,可以运行JavaScript代码并查看结果。 **Firefox + Firebug的结合使用:** 当Firefox与Firebug结合使用时,开发者可以实现以下目标: 1. **问题排查**:在实际...

    firebug 1.2中文版

    查看元素的计算样式,快速定位样式问题,甚至可以在控制台即时调整CSS规则,观察效果。 3. **JavaScript调试**:Firebug的JavaScript调试器是其一大亮点。你可以设置断点,逐行执行代码,查看变量值,分析调用堆栈...

    firebug.7z

    - **JavaScript控制台**:提供了一套强大的JavaScript调试工具,包括断点设置、调用堆栈查看、变量监视等,便于调试脚本错误。 - **网络面板**:显示页面加载时的所有HTTP/HTTPS请求,分析资源加载时间和性能瓶颈...

Global site tag (gtag.js) - Google Analytics