您的位置：首页 > Web前端 > JavaScript

Javascript的调试利器：Firebug使用详解

2010-07-28 11:13 806 查看
命令 说明

$(id)
通过id返回Element。
$$(selector)
通过CSS选择器返回Element数组。
$x(xpath)
通过xpath表达式返回Element数组。
dir(object)
列出对象的所有属性，和在DOM标签页查看该对象的是一样的。
dirxml(node)
列出节点的HTML或XML的源代码树，和在HTML标签页查看改节点一样。
cd(window)
默认情况下，命令行相关的是顶层window对象，使用该命令可切换到frame里的window独享。
clear()
清空信息显示区，和单击按钮Clear功能一样。
inspect(object[, tabName])
监视一个对象。tabName表示在那个标签页对该对象进行监视，可选值为“html”、“css”、“script”和“dom”。
keys(object)
返回由对象的属性名组成的数组。
values(object)
返回由对象的属性值组成的数组。
debug(fn)
在函数的第一行增加一个断点。
undebug(fn)
移除在函数第一行的断点。
monitor(fn)
跟踪函数fn的调用。
unmonitor(fn)
不跟踪函数fn的调用。
monitorEvents(object[, types])
跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。
unmonitorEvents(object[, types])
不跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。
profile([title])
开始对脚本进行性能测试，可选参数title将作为测试结果的标题。
profileEnd()
结束脚本性能测试。
表3
Firebug还有其它的一些调试函数，这里就不一一做介绍，有兴趣可以自己测试。表4是所有函数的列表：
函数

说明
console.log(object[, object, ...]) 向控制台输出一个信息。可以输入多个参数，输出将已空格分隔各参数输出。
第一参数可以包含格式化文本，例如：
console.log(‘这里有%d个%s’,count,apple);
字符串格式：
%s ：字符串。
%d, %i：数字。
%f： 浮点数。
%o -超链接对象。
console.debug(object[, object, ...])
向控制台输出一个信息，信息包含一个超链接链接到输出位置。
console.info(object[, object, ...])
向控制台输出一个带信息图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.warn(object[, object, ...])
向控制台输出一个带警告图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.error(object[, object, ...])
向控制台输出一个带错误图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.assert(expression[, object, ...])
测试一个表示是否为true，如果为false，提交一个例外信息到控制台。
console.dir(object)
列出对象的所有属性。
console.dirxml(node)
列出HTML或XML Element的XML源树。
console.trace()
输出堆栈的调用入口。
console.group(object[, object, ...])
将信息分组再输出到控制台。通过console.groupEnd()结束分组。
console.groupEnd()
结束分组输出。
console.time(name)
创建一个名称为name的计时器，计算代码的执行时间，调用console.timeEnd(name)停止计时器并输出执行时间。
console.timeEnd(name)
停止名称为name的计时器并输出执行时间。
console.profile([title])
开始对脚本进行性能测试，title为测试标题。
console.profileEnd()
结束性能测试。
console.count([title])
计算代码的执行次数。titile作为输出标题。
表4
12、 在IE中使用Firebug

Firebug是Firefox的一个扩展，但是我习惯在IE中调试我的页面怎么办？如果在页面脚本中加入console.log()将调试信息写到Friebug，在IE中肯定是提示错误的，怎么办？不用担心，Frirebug提供了Frirbug Lite脚本，可以插入页面中模仿Firebug控制台。
我们可以从一下地址下载firebug lite：
http://www.getfirebug.com/releases/firebuglite1.0-b1.zip

然后在页面中加入：

<script language="javascript" type="text/javascript" src="/路径/firebug.js"></script>
如果你不想在IE中模仿Friebug控制台，只是不希望console.log()脚本出现错误信息，那么在页面中加入一下语句：

<script language="javascript" type="text/javascript" src="/路径/firebugx.js"></script>
如果你不想安装Firebug Lite，只是想避免脚本错误，那么可以在脚本中加入以下语句：

if (!window.console || !console.firebug)
{
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

window.console = {};
for (var i = 0; i < names.length; ++i)
window.console[names[i]] = function() {}
}
我们将firebug.js加入到测试页面中，然后打开IE，加载页面。页面加载完成后，我们按下F12键就可以打开控制台了。每次页面刷新后，你都要按F12键打开控制台，是不是很烦？如果不想那么，就在html标签中加入“debug=’true’”，例如：

<html debug=
"true"
>

在Friebug Lite中也有命令行，但是功能没那么强。

13、 快捷键和鼠标操作
全局操作
打开Firebug窗口
F12
关闭Firebug窗口
F12
在新窗口打开Firebug
Ctrl+F12
往前切换标签
Ctrl+`
将光标移到命令行
Ctrl+Shift+L
将光标移到搜索框
Ctrl+Shift+K
进入Inspect模式
Ctrl+Shift+C
进行JavaScript性能测试
Ctrl+Shift+P
重新执行最后一条命令行命令
Ctrl+Shift+E
HTML标签
编辑属性
单击属性名或值
编辑文本节点
单击文本
编辑Element
双击Element标记
移到路径里的下一个节点
Ctrl+.
移到路径里的上一个节点
Ctrl+,
HTML编辑
完成编辑
Return
取消编辑
Esc
移到下一个区域
Tab
移到上一个区域
Shift+Tab
HTML Inspect 模式
取消Inspect
Esc
Inspect 父节点
Ctrl+Up
Inspect 子节点
Ctrl+Down
Script标签
继续运行
F5
Ctrl+/
单步执行（Step Over）
F10
Ctrl+'
单步执行（Step Into）
F11
Ctrl+;
退出函数（Step Out）
Shift+F11
Ctrl+Shift+;
设置断点
单击行号
禁止断点
在行号上Shift+Click
编辑断点条件
在行号上Right-Click
运行到当前行
在行号上Middle-Click
在行号上Ctrl+Click
移到堆栈中的下一个函数
Ctrl+.
移到堆栈中的上一个函数
Ctrl+,
将焦点切换到Scripts菜单
Ctrl+Space
将焦点切换到Watch编辑
Ctrl+Shift+N
DOM 标签
编辑属性
双击在空白
移到路径中下一个对象
Ctrl+.
移到路径中上一个对象
Ctrl+,
DOM 和Watch编辑
结束编辑
Return
取消编辑
Esc
自动完成下一个属性
Tab
自动完成上一个属性
Shift+Tab
CSS标签
编辑属性
单击属性
插入新属性
双击空白处
移动焦点到Style Sheets菜单
Ctrl+Space
CSS编辑
完成编辑
Return
取消编辑
Esc
移到下一个区域
Tab
移到上一个区域
Shift+Tab
按步长1增加数值
Up
按步长1减少数值
Down
按步长10增加数值
Page Up
按步长10减少数值
Page Down
自动完成下一个关键字
Up
自动完成上一个关键字
Down
Layout标签
编辑值
单击值
Layout编辑
完成编辑
Return
取消编辑
Esc
移到下一个区域
Tab
移到上一个区域
Shift+Tab
按步长1增加数值
Up
按步长1减少数值
Down
按步长10增加数值
Page Up
按步长10减少数值
Page Down
自动完成下一个关键字
Up
自动完成上一个关键字
Down
命令行 (小)
自动完成上一个属性
Tab
自动完成下一个属性
Shift+Tab
执行
Return
Inspect结果
Shift+Return
打开结果鼠标右键菜单
Ctrl+Return
命令行 (大)
执行
Ctrl+Return
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航