`

firebug 的console调试对象API

阅读更多
Console API
当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它提供多种方法向控制台输出信息,供开发人员调试使用。下面是这些方法的一个简单介绍,适时地运用它们,对于提高开发效率很有帮助。
console.log(object[, object, ...])
使用频率最高的一条语句:向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然,也可以不使用格式化输出来达到同样的目的。下面两行代码执行的结果是相同的:
console.log(“The %s jumped over %d tall buildings”, animal, count);
console.log(“The”, animal, “jumped over”, count, “tall buildings”);
console.debug(object[, object, ...])
向控制台输出一条信息,它包括一个指向该行代码位置的超链接。
console.info(object[, object, ...])
向控制台输出一条信息,该信息包含一个表示“信息”的图标,和指向该行代码位置的超链接。
console.warn(object[, object, ...])
同 info。区别是图标与样式不同。
console.error(object[, object, ...])
同 info。区别是图标与样式不同。error 实际上和 throw new Error() 产生的效果相同,使用该语句时会向浏览器抛出一个 js 异常。
console.assert(expression[, object, ...])
断言,测试一条表达式是否为真,不为真时将抛出异常(断言失败)。
console.dir(object)
输出一个对象的全部属性(输出结果类似于 DOM 面板中的样式)。
console.dirxml(node)
输出一个 HTML 或者 XML 元素的结构树,点击结构树上面的节点进入到 HTML 面板。
console.trace()
输出 Javascript 执行时的堆栈追踪。
console.group(object[, object, ...])
输出消息的同时打开一个嵌套块,用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。
console.groupCollapsed()
同 console.group(); 区别在于嵌套块默认是收起的。
console.time(name)
计时器,当调用 console.timeEnd(name);并传递相同的 name 为参数时,计时停止,并输出执行两条语句之间代码所消耗的时间(毫秒)。
注:console.time(slugName) – console.timeEnd(slugName) – 记录某一个时间戳的执行时间,可用于优化循环语句
console.profile([title])
与 profileEnd() 结合使用,用来做性能测试,与 console 面板上 profile 按钮的功能完全相同。
console.count([title])
输出该行代码被执行的次数,参数 title 将在输出时作为输出结果的前缀使用。
console.clear()
清空控制台

命令行
控制台的输出面板右边,是控制台的输入面板(Chrome 调试工具对应为下方),在这里除了可以运行常规的 javascript 代码,还内置了相当数量的命令行可以辅助我们的调试工作,下面是一些常用命令行的简单介绍:
$(id)
返回一个给定 id 的元素。
$$(selector)
返回给定的 css 选择器匹配到的一组元素。
$x(xpath)
返回给定的 XPath 表达式匹配到的一组元素。
$0
在 HTML 面板中选中的元素。
$1
上一次在 HTML 面板中选中的元素。
$n(index)
访问最近 5 个被选中过的元素,index 的范围: 0 – 4。
dir(object)
同 console.dir(object)。
dirxml(node)
同 console.dirxml(node)。
clear()
同 console.clear()。
inspect(object[, tabName])()
在合适的(或一个指定的) tab 中检视一个对象。
keys(object)
返回一个对象的所有属性的键。
values(object)
返回一个对象的所有属性的值。
debug(fn)
在函数第一行添加一个断点,使用 undebug(fn) 移除断点。
monitor(fn)
开启一个函数的调用日志,使用 unmonitor(fn) 关闭该功能。非常有用的一个命令,但是它似乎并没有很好地工作。
monitorEvents(object[, types])
开启一个元素的某个事件(或所有事件)被触发时的日志记录。用例如下:
monitorEvents($0,['click'])
上面的命令行被执行后,将开启当前在 HTML 面板中被选中元素的 click 事件监控,一旦这个元素的 click 事件被触发,事件对象将会在控制台输出。如果不指定第二个参数,将对所有事件进行记录。
profile([title])
同 console.profile([title])
分享到:
评论

相关推荐

    firebug调试技巧

    - 示例:`console.warn("Deprecated API usage detected.");` - **console.error**:用于输出错误信息。 - 示例:`console.error("Critical error:", err);` - **console.debug**:用于输出调试信息。 - 示例:`...

    firebug怎么使用?.docx

    Firebug提供了丰富的console对象方法,如`console.debug()`, `console.info()`, `console.warning()`和`console.error()`,它们帮助开发者追踪代码中的各种信息。 8. **AJAX调试** Firebug对于AJAX请求的追踪非常...

    FireBug使用方法

    - 使用Command Line API执行JavaScript命令,获取对象信息,进行复杂的调试操作。 - 自定义快捷键,提高工作效率。 - 配合其他Firefox扩展,如Web Developer,实现更全面的开发辅助。 总的来说,Firebug是Web...

    Firebug 1.2 技巧手册

    Firebug 是一款功能强大的浏览器插件,专为 Firefox 设计,旨在帮助开发者轻松调试和优化网页性能。这款插件集成了丰富的工具,允许用户实时编辑 CSS、HTML 和 JavaScript,并进行调试与监控。对于前端开发者而言,...

    XMLHTTP API学习总结

    - **Firebug的使用**: 使用Firebug的`console.dir()`方法可以帮助开发者查看XMLHttpRequest对象的属性和方法。例如,通过`var xml = XMLHttpRequest.responseXML; console.dir(xml);`可以查看XML文档的结构。 - **...

    JavaScript中的console.group()函数详细介绍

    console.group()函数是Web控制台(Console)API的一部分,它可以创建一个新的可折叠的分组,从而使得输出的信息更加清晰有序。在分组中,开发者可以使用console.log()或其他控制台输出函数输出日志信息,这些信息...

    10个基于浏览器的JavaScript调试工具分享

    它能详细报告JavaScript错误,并且提供了类似Firebug的console API特性,使得开发者可以更有效地追踪和修正代码中的问题。 8. DebugBar–IEExtensionforWebDevelopers(IE浏览器扩展调试工具) DebugBar是一个IE...

    scrapy官方手册

    Firebug是一个流行的Web开发者工具,可用于调试网页抓取过程。 **4.8 Debugging memory leaks(调试内存泄漏)** 在长时间运行的爬虫中可能会遇到内存泄漏的问题,这部分内容介绍了如何定位和解决这类问题。 **...

    100道ajax面试题

    - 使用Console面板来输出调试信息。 #### 七、高级应用 1. **AJAX与WebSocket结合使用:** - WebSocket提供了双向通信通道,适用于实时数据传输。 - AJAX可以作为WebSocket连接建立之前的备用方案,或者用于...

    scrapy1.1 帮助文档

    - **使用Firebug进行抓取(Using Firebug for scraping)**:借助Firebug插件增强对网页动态内容的理解。 - **内存泄漏调试(Debugging memory leaks)**:探讨如何识别和修复Scrapy爬虫中的内存泄漏问题。 - **文件和...

    ext_core_中文手册

    使用Firebug工具的`console.dir`命令,可以查看`el`对象的所有属性和方法,进一步了解`Ext.Element`的细节。 #### 结论 ExtCore不仅提供了强大的DOM操作能力,还集成了Ajax、事件、动画等多种Web开发所需功能,...

    scrapy爬虫框架

    5. Using Firefox for scraping:使用Firefox进行网页抓取,Scrapy可以与Firefox以及Firefox的开发工具Firebug协同工作。 6. Debugging memory leaks:调试内存泄漏,这对于保持爬虫的稳定运行非常重要。 最后,...

    JavaScript基础重点归纳.docx

    - **Firebug工具**:是Firefox浏览器的一个插件,提供强大的JavaScript调试功能,可以查看和修改DOM,分析网络请求等。 2. **函数和window对象** - **系统函数**:JavaScript内置了很多常用函数,如`Math`对象的...

Global site tag (gtag.js) - Google Analytics