Console API
当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它提供多种方法向控制台输出信息,供开发人员调试使用。下面是这些方法的一个简单介绍,适时地运用它们,对于提高开发效率很有帮助。
console.log(object[, object, ...])
使用频率最高的一条语句:向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然,也可以不使用格式化输出来达到同样的目的:
var animal='frog', count=10;
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.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)功能为网页提供了一个专门的日志记录环境,开发者可以通过一系列控制台函数来输出和管理日志信息。这些函数不仅可以帮助开发者记录程序运行时的状态,还能根据不同的日志级别进行筛选和...
### Firebug 入门指南 #### 一、安装Firebug Firebug 是一款强大的网页调试工具,主要用于 Firefox 浏览器。它可以帮助开发者快速定位问题并优化网站性能。要使用 Firebug,首先需要确保安装了 Firefox 浏览器。...
Console控制台** Console是开发者最常使用的部分,它显示了JavaScript的错误信息、警告以及输出语句。开发者可以通过console.log()等方法在代码中打印信息,方便调试。 **7. 插件兼容性** 尽管Firefox在后续版本中...
3. 控制台输出:通过console.log()等方法,可以在控制台输出信息,用于调试和日志记录。 四、网络性能分析 1. 网络面板:展示页面加载的所有资源,包括图片、脚本、样式表等,分析加载时间,找出性能瓶颈。 2. 时间...
4. 使用指南: 首先,确保使用的是Firefox浏览器。然后下载并安装"firebug-1.12.7-fx_82618.xpi"文件,安装完成后,在浏览器的工具栏上会看到Firebug的图标,点击即可开启或关闭工具。在网页上右键点击,选择“检查...
Firefox和Firebug是Web开发和调试的重要工具,尤其对于前端工程师来说,...尽管现在有更多先进的工具如Chrome DevTools,但理解Firefox和Firebug的历史和功能,对提升开发者技能和理解Web开发过程仍然是十分有益的。
1. **控制台(Console)** - 显示当前页面中的JavaScript错误和警告,包括出错的文件名和行号,这对于调试非常有帮助。 - 在控制台中可以查看变量内容,执行JavaScript语句甚至是运行完整的JavaScript程序,这对于...
JavaScript是Web开发中的核心语言,而Firebug是早期开发者们...虽然现在有更多现代的开发者工具,如Chrome DevTools和Firefox Developer Tools,但了解并掌握Firebug的使用方法,对于理解前端调试原理仍然大有裨益。
3. **命令行API**:提供一系列命令行工具,如firebug.show()用于打开Firebug,firebug/console.*系列方法用于控制日志输出等。 尽管Firebug已经停止更新,但其功能和理念对现代浏览器的开发者工具影响深远。Firefox...
9. **插件扩展**:Firebug拥有丰富的第三方插件,如WebConsole和Console2,这些插件提供了更多的功能,如增强的日志记录和更强大的控制台。 10. **文档支持**:随同发布的"Readme-说明.htm"文件可能包含了关于如何...
例如,在Chrome浏览器中,开发者可以使用window.openDevTools()或者检查window.console是否存在等方法来判断调试工具是否打开。因此,作为开发者,我们应当根据不同浏览器的具体情况,灵活选择合适的方法。 最后,...
结果显示,IE11、Firefox(需要加载Firebug插件)、Chrome等浏览器均支持log、info、warn、error、debug五个基本方法。但是,由于浏览器间的差异,为了编写兼容性更强的代码,开发者可以对console的支持进行检测,...
1. **控制台面板**(Console):显示JavaScript的错误信息和警告,以及你通过console.log()等函数打印的信息。 2. **脚本面板**(Scripts):展示网页加载的所有JS文件,你可以通过设置断点、单步执行、查看变量值来...
7. **兼容性**:尽管FireLogger最初是为Firebug设计的,但随着Firebug的退役,现在它已经兼容Firefox的Web Console和其他支持Chromebug的浏览器,如Chrome的Chromebug插件。 使用FireLoggerPHP时,确保浏览器安装了...
特别是在处理`iframe`时,Chrome的控制台可以让我们选择在哪个上下文中运行脚本,而Firebug可能无法做到这一点。 另一方面,Firefox的Firebug同样是一个强大的开发工具,它提供了`console.log()`的类似功能。在...
这样,当页面加载时,Firebug Lite的控制台就会自动显示,提供类似于Firebug的调试功能,包括查看和记录`console.log`、`console.error`等信息,以及检查和修改DOM元素、CSS样式和JavaScript变量。 除了在iPad上...
1. 对于Android设备,Google Chrome的开发者工具提供了强大的USB远程调试功能,包括实时查看网页源码、设置断点、性能分析等,具体操作可参考《使用chrome调试手机web程序》。 2. 对于iOS设备,iWebInspector允许...
在Firebug控制台中使用console.trace()时,开发者能够看到与console.log()类似的输出,但更进一步地,它还可以显示各个函数调用时具体的参数值。这大大增加了调试的便利性,因为调试人员可以直观地查看到函数被调用...
火狐浏览器的Firebug曾是这一领域的先驱,但现在Chrome的开发者工具已经发展得相当成熟,成为了许多开发者的首选。 Chrome浏览器的调试插件主要包括以下几个核心知识点: 1. **Chrome DevTools**:这是谷歌浏览器...