firebug使用说明.docx
- 文档编号:4570457
- 上传时间:2022-12-06
- 格式:DOCX
- 页数:10
- 大小:69.82KB
firebug使用说明.docx
《firebug使用说明.docx》由会员分享,可在线阅读,更多相关《firebug使用说明.docx(10页珍藏版)》请在冰豆网上搜索。
firebug使用说明
命令行的所有特殊函数请看表3:
命令
说明
$(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
命令行有命令记忆功能,可通过上、下箭头键选择已经输入过的命令。
11、 在脚本文件中加入调试命令
有没有对脚本调试中经常需要alert感到厌烦?
有了Firebug,你就可以放下alert了,因为Firebug有功能比alert更强大的console.log。
先让我们来认识一下console.log,在测试文件脚本区域我们输入一下代码:
console.log('Hello');
刷新一下页面,将firebug切换到“console”标签看看(图11-1),在信息区显示出了我们要输出的信息“Hello”。
当然了,单凭这个就说console.log有点夸大,我们修改一下test函数,把“document.getElementById('div2').innerHTML=i;”修改为:
console.log('当前的参数是:
%d',i);
图11-1
刷新页面后看看结果(图11-2)。
是不是挺不错的?
console.log可以象c语言的printf一样实现格式化输出。
我们再在脚本区加入一个语句:
console.log(2,4,window,test,document);
图11-2
刷新页面后看看结果(图11-3)。
console.log可以连续输出多个对象,而且如果对象是DOM、函数,还可以直接点击去到该对象。
图11-3
如果你觉得console.log输出的文本太单调,不能表示出不同的信息,那么你可以通过console.debug、console.info、 console.warn和console.error来代替console.log,这些函数分别会用不同的背景颜色和文字颜色来显示信息。
我们来看看测试一下这些函数的输出,在脚本中加入:
console.debug('Thisisconsole.debug!
');
console.info('Thisisconsole.info!
');
console.warn('Thisisconsole.warn!
');
console.error('Thisisconsole.error!
');
刷新页面看看结果(图11-4)。
图11-4
有时候,为了更清楚方便的查看输出信息,我们可能需要将一些调试信息进行分组输出,那么可以使用console.group来对信息进行分组,在组信息输出完成后用console.groupEnd结束分组。
我们测试一下把刚才的4个输出作为一个分组输出,修改代码为:
console.group('开始分组:
');
console.debug('Thisisconsole.debug!
');
console.info('Thisisconsole.info!
');
console.warn('Thisisconsole.warn!
');
console.error('Thisisconsole.error!
');
console.groupEnd();
刷新页面看看结果(图11-5)。
在console.group中,我们还可以加入一个组标题“开始分组:
”。
如果需要,我们还可以通过嵌套的方式,在组内再分组。
图11-5
有时候,我们需要写一个for循环列出一个对象的所有属性或者某个HTMLElement下的所有节点,有了firebug后,我们不需要再写这个for循环了,我们只需要使用console.dir(object)或console.dirxml(element)就可以了。
在测试页中加入代码测试一下:
console.dir(document.getElementById('div1'));
console.dirxml(document.getElementById('div1'));
结果请看图11-6和图11-7。
图11-6
图11-7
是否想知道代码的运行速度?
很简单,使用console.time和console.timeEnd就可以。
修改一下test函数的代码,测试一下运行1000次循环需要多少时间:
functiontest(){
console.time('test');
for(vari=0;i<1000;i++){
document.getElementById('div2').innerHTML=i;
//console.log('当前的参数是:
%d',i);
}
console.timeEnd('test');
}
刷新页面,单击“方块二”,看看结果(图11-8)。
在这里要注意的是console.time和console.timeEnd里的参数要一致才会有正确的输出,而该参数就是信息的标题。
图11-8
是否想知道某个函数是从哪里调用的?
console..trace可帮助我们进行追踪。
在test函数的结尾加入:
console.trace();
刷新页面,单击“方块二”,看看结果(图11-9)。
结果显示是在坐标(97,187)的鼠标单击事件执行了test函数,而调用的脚本是在simple.html文件里的第1行。
因为是在HTML里面的事件调用了test函数,所以显示的行号是第1行。
如果是脚本,则会显示调用脚本的行号,通过单击可以直接去到调用行。
图11-9
如果想在脚本某个位置设置断点,可以在脚本中输入“debugger”作为一行。
当脚本执行到这一行时会停止执行等待用户操作,这时候可以通过切换到“Script”标签对脚本进行调试。
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或XMLElement的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提供了FrirbugLite脚本,可以插入页面中模仿Firebug控制台。
我们可以从一下地址下载firebuglite:
然后在页面中加入:
如果你不想在IE中模仿Friebug控制台,只是不希望console.log()脚本出现错误信息,那么在页面中加入一下语句:
如果你不想安装FirebugLite,只是想避免脚本错误,那么可以在脚本中加入以下语句:
if(!
window.console||!
console.firebug)
{
varnames=["log","debug","info","warn","error","assert","dir","dirxml",
"group","groupEnd","time","timeEnd","count","trace","profile","profileEnd"];
window.console={};
for(vari=0;i window.console[names[i]]=function(){} } 我们将firebug.js加入到测试页面中,然后打开IE,加载页面。 页面加载完成后,我们按下F12键就可以打开控制台了。 每次页面刷新后,你都要按F12键打开控制台,是不是很烦? 如果不想那么,就在html标签中加入“debug=’true’”,例如: 在FriebugLite中也有命令行,但是功能没那么强。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- firebug 使用说明