由于工作中用到了fireBug。无意间看到别人翻译的这分FireBug的控制台函数说明。就转载过来。以后可以随时查阅,也给自己的blog里加点东西。
(原文地址:
http://www.nirvanastudio.org)
FireBug 控制台函数说明
Posted by Nicholas 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个等级。为了达到视觉分离的效果,这些函数与 log 不同的地方就是它们在被调用的时候会自动包含一个指向代码行数的链接。
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 a is true.
console.assertEquals(a, b, "message" [,objects]) - Asserts that a is equal to b.
console.assertNotEquals(a, b, "message" [,objects]) - Asserts that a is not equal to b.
console.assertGreater(a, b, "message" [,objects]) - Asserts that a is greater than b.
console.assertNotGreater(a, b, "message" [,objects]) - Asserts that a is not greater than b.
console.assertLess(a, b, "message" [,objects]) - Asserts that a is less than b.
console.assertNotLess(a, b, "message" [,objects]) - Asserts that a is not less than b.
console.assertContains(a, b, "message" [,objects]) - Asserts that a is in the array b.
console.assertNotContains(a, b, "message" [,objects]) - Asserts that a is not in the array b.
console.assertTrue(a, "message" [,objects]) - Asserts that a is equal to true.
console.assertFalse(a, "message" [,objects]) - Asserts that a is equal to false.
console.assertNull(a, "message" [,objects]) - Asserts that a is equal to null.
console.assertNotNull(a, "message" [,objects]) - Asserts that a is not equal to null.
console.assertUndefined(a, "message" [,objects]) - Asserts that a is equal to undefined.
console.assertNotUndefined(a, "message" [,objects]) - Asserts that a is not equal to undefined.
console.assertInstanceOf(a, b, "message" [,objects]) - Asserts that a is an instance of type b.
console.assertNotInstanceOf(a, b, "message" [,objects]) - Asserts that a is not an instance of type b.
console.assertTypeOf(a, b, "message" [,objects]) - Asserts that the type of a is equal to the string b.
console.assertNotTypeOf(a, b, "message" [,objects]) - Asserts that the type of a is not equal to the string b.
测量(Measurement)
下面的一些函数可以让你方便的测量你的一些代码。
console.trace() - 记录执行点的堆栈信息。
console.time("name") - 根据 name 创建一个唯一的计时器。
console.timeEnd("name") - 根据 name 停止计时器,并且记录消耗的时间,以毫秒为单位。
console.count("name") - 记录该行代码执行的次数。
String Formatting
所有 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控制台提供的这些函数极大地简化了前端开发中的调试工作,使得开发者能够更加高效地识别并解决问题。无论是基本的日志记录、复杂的断言测试还是性能测量,FireBug都能提供全面的支持。随着技术的发展,虽然...
Firebug 控制台详解 Firebug 控制台是网页开发的利器,能够极大地提升工作效率。控制台(Console)是 Firebug 的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。 一、显示信息的命令 ...
使用Firebug的Profiler功能,你可以分析JavaScript函数的执行时间,找出代码中的性能瓶颈。 6. **CSS与HTML调试** - **HTML调试**:在HTML面板中,可以查看和编辑页面的DOM结构。选中元素,可以看到对应的CSS样式...
3. **JavaScript调试**:Firebug的JavaScript控制台是其核心功能之一。在这里,你可以设置断点,单步执行代码,查看变量值,跟踪函数调用,以及检测错误。这对于理解代码逻辑,找出性能瓶颈,以及修复JavaScript问题...
例如,如果你想测试某个函数的行为,可以直接在控制台中输入该函数的名称并加上参数,例如: ```javascript myFunction(10); ``` 这会立即执行`myFunction`函数,并显示任何输出结果或错误信息。 ##### 2.4 脚本...
Firefox的内置开发者工具提供了类似Firebug的界面和功能,包括网络、元素、控制台、源代码、性能等面板,满足现代Web开发的需求。 6. **"解压即可用.txt"**: 这个文件可能是包含使用说明或者版本信息的文字文件,...
1. **快捷键**:熟悉Firebug的快捷键可以提高工作效率,例如F12开启/关闭Firebug,Ctrl+Shift+J打开控制台等。 2. **面板切换**:Firebug有多个面板,如HTML、CSS、脚本、网络等,可以通过顶部菜单栏或键盘快捷键在...
5. **性能分析**:使用Firebug的“Profiler”面板,开发者可以分析JavaScript函数的运行时间,找出性能瓶颈,提升网页性能。 6. **命令行工具**:Firebug的命令行提供了对JavaScript的直接交互,你可以在这里执行...
7. **命令行工具**:Firebug的命令行提供了一系列便捷的命令,如查找DOM元素、执行JavaScript函数等,提高了开发效率。 **二、安装与使用** 要使用Firebug,首先需要在Firefox浏览器中安装firebug-2.0.19-fx.xpi这...
4. **JavaScript调试**:Firebug的JavaScript控制台允许开发者运行单行JS代码,查看运行结果,设置断点,跟踪函数调用,检查变量值,以及理解代码执行流程。这对于查找和修复JavaScript错误至关重要。 5. **网络...
Console是Firebug中的一个功能强大的调试面板,允许开发者在浏览器控制台查看信息、执行JavaScript语句和命令,以及监控和分析页面中发生的各种事件和错误。Console命令行作为Console面板的核心组成部分,提供了一...
4. **JavaScript 控制台**:提供了一个交互式的 JavaScript 环境,可以测试代码、查看错误和警告,以及监控变量和函数调用。 5. **网络面板**:记录了页面加载时所有的网络请求,包括图片、脚本、样式表等,便于...
3. **JavaScript调试**:Firebug内置了强大的JavaScript调试器,包括断点设置、步进执行、查看变量值、控制台输出等功能。这使得追踪代码逻辑、查找错误和性能瓶颈变得简单。 4. **网络面板**:网络面板记录了页面...
5. **命令行工具**:Firebug内置的JavaScript控制台允许直接运行JS代码,查看变量值,或者测试新的函数和表达式,是进行快速测试的好帮手。 6. **错误检测**:当JavaScript出现错误时,Firebug会在控制台中显示错误...
7. **命令行API**:Firebug提供了一系列内置的API函数,如$(id)、$$(selector)、$x(xpath)等,使得开发者可以直接在控制台上进行DOM操作和数据查询。例如,`$(‘nameTextBox’) `会返回ID为"nameTextBox"的HTML元素...
3. **JavaScript调试**:Firebug内置了JavaScript控制台,可以设置断点、单步执行、查看变量值,以及分析函数调用堆栈,对于JavaScript代码的调试极为便利。 4. **网络监控**:它能够跟踪并分析页面加载时的HTTP...
综上所述,网页版FIREBUG是一个功能强大的网页调试工具,它通过动态加载脚本、DOM操作与分析、CSS样式检查与修改、JavaScript控制台、网络请求监控等功能,为开发者提供了一个全面的网页调试解决方案,尤其适用于...
JavaScript控制台是FireBug的核心部分之一,它允许开发者执行单行JS代码、查看错误信息、追踪函数调用栈。此外,它还能显示AJAX请求和响应,方便开发者调试异步代码。 **4. DOM操作** DOM面板让你可以直接查看和...