`
artdialog
  • 浏览: 105100 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Firebug & Chrome Console 控制台使用指南

阅读更多

 

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 控制台函数

    在FireBug中,控制台(Console)功能为网页提供了一个专门的日志记录环境,开发者可以通过一系列控制台函数来输出和管理日志信息。这些函数不仅可以帮助开发者记录程序运行时的状态,还能根据不同的日志级别进行筛选和...

    firefox firebug

    Console控制台** Console是开发者最常使用的部分,它显示了JavaScript的错误信息、警告以及输出语句。开发者可以通过console.log()等方法在代码中打印信息,方便调试。 **7. 插件兼容性** 尽管Firefox在后续版本中...

    firebug使用说明合集

    3. 控制台输出:通过console.log()等方法,可以在控制台输出信息,用于调试和日志记录。 四、网络性能分析 1. 网络面板:展示页面加载的所有资源,包括图片、脚本、样式表等,分析加载时间,找出性能瓶颈。 2. 时间...

    Firebug 入门指南

    ### Firebug 入门指南 #### 一、安装Firebug Firebug 是一款强大的网页调试工具,主要用于 Firefox 浏览器。它可以帮助开发者快速定位问题并优化网站性能。要使用 Firebug,首先需要确保安装了 Firefox 浏览器。...

    firebug-1.12.7-fx_82618

    4. 使用指南: 首先,确保使用的是Firefox浏览器。然后下载并安装"firebug-1.12.7-fx_82618.xpi"文件,安装完成后,在浏览器的工具栏上会看到Firebug的图标,点击即可开启或关闭工具。在网页上右键点击,选择“检查...

    firefox和firebug

    Firefox和Firebug是Web开发和调试的重要工具,尤其对于前端工程师来说,...尽管现在有更多先进的工具如Chrome DevTools,但理解Firefox和Firebug的历史和功能,对提升开发者技能和理解Web开发过程仍然是十分有益的。

    FireFox Chrome IE浏览器调试JavaScript

    1. **控制台(Console)** - 显示当前页面中的JavaScript错误和警告,包括出错的文件名和行号,这对于调试非常有帮助。 - 在控制台中可以查看变量内容,执行JavaScript语句甚至是运行完整的JavaScript程序,这对于...

    Javascript的调试利器Firebug使用详解

    JavaScript是Web开发中的核心语言,而Firebug是早期开发者们...虽然现在有更多现代的开发者工具,如Chrome DevTools和Firefox Developer Tools,但了解并掌握Firebug的使用方法,对于理解前端调试原理仍然大有裨益。

    Firebug使用详解

    3. **命令行API**:提供一系列命令行工具,如firebug.show()用于打开Firebug,firebug/console.*系列方法用于控制日志输出等。 尽管Firebug已经停止更新,但其功能和理念对现代浏览器的开发者工具影响深远。Firefox...

    firebug 1.8

    9. **插件扩展**:Firebug拥有丰富的第三方插件,如WebConsole和Console2,这些插件提供了更多的功能,如增强的日志记录和更强大的控制台。 10. **文档支持**:随同发布的"Readme-说明.htm"文件可能包含了关于如何...

    javascript判断firebug是否开启的方法

    例如,在Chrome浏览器中,开发者可以使用window.openDevTools()或者检查window.console是否存在等方法来判断调试工具是否打开。因此,作为开发者,我们应当根据不同浏览器的具体情况,灵活选择合适的方法。 最后,...

    利用Js的console对象,在控制台打印调式信息测试Js的实现

    结果显示,IE11、Firefox(需要加载Firebug插件)、Chrome等浏览器均支持log、info、warn、error、debug五个基本方法。但是,由于浏览器间的差异,为了编写兼容性更强的代码,开发者可以对console的支持进行检测,...

    利用火狐的插件Firebug调试js和css

    1. **控制台面板**(Console):显示JavaScript的错误信息和警告,以及你通过console.log()等函数打印的信息。 2. **脚本面板**(Scripts):展示网页加载的所有JS文件,你可以通过设置断点、单步执行、查看变量值来...

    firelogger.php:FireLoggerPHP库-集成到Firebug中的记录器控制台

    7. **兼容性**:尽管FireLogger最初是为Firebug设计的,但随着Firebug的退役,现在它已经兼容Firefox的Web Console和其他支持Chromebug的浏览器,如Chrome的Chromebug插件。 使用FireLoggerPHP时,确保浏览器安装了...

    js console.log打印对像与数组用法详解

    特别是在处理`iframe`时,Chrome的控制台可以让我们选择在哪个上下文中运行脚本,而Firebug可能无法做到这一点。 另一方面,Firefox的Firebug同样是一个强大的开发工具,它提供了`console.log()`的类似功能。在...

    ipad上借助firebug工具来进行页面调试

    这样,当页面加载时,Firebug Lite的控制台就会自动显示,提供类似于Firebug的调试功能,包括查看和记录`console.log`、`console.error`等信息,以及检查和修改DOM元素、CSS样式和JavaScript变量。 除了在iPad上...

    Mobile_Debugging_调试小结

    1. 对于Android设备,Google Chrome的开发者工具提供了强大的USB远程调试功能,包括实时查看网页源码、设置断点、性能分析等,具体操作可参考《使用chrome调试手机web程序》。 2. 对于iOS设备,iWebInspector允许...

    JavaScript中的console.trace()函数介绍

    在Firebug控制台中使用console.trace()时,开发者能够看到与console.log()类似的输出,但更进一步地,它还可以显示各个函数调用时具体的参数值。这大大增加了调试的便利性,因为调试人员可以直观地查看到函数被调用...

    谷歌浏览器调试插件

    火狐浏览器的Firebug曾是这一领域的先驱,但现在Chrome的开发者工具已经发展得相当成熟,成为了许多开发者的首选。 Chrome浏览器的调试插件主要包括以下几个核心知识点: 1. **Chrome DevTools**:这是谷歌浏览器...

Global site tag (gtag.js) - Google Analytics