建设部或国土资源管理局的网站,企业信用信息公示系统河南,有个网站经常换域名,杭州网站建设公司哪家好Javascript
的调试#xff0c;是开发
Web
应用尤其是
AJAX
应用很重要的一环#xff0c;目前对
Javascript
进行调试的工具很多#xff0c;我比较喜欢使用的是
Firebug
。
Firebug
是
Joe Hewitt
开发的一套与
Firefox
集成在一起的功能强大的
web
开发工具…Javascript
的调试是开发
Web
应用尤其是
AJAX
应用很重要的一环目前对
Javascript
进行调试的工具很多我比较喜欢使用的是
Firebug
。
Firebug
是
Joe Hewitt
开发的一套与
Firefox
集成在一起的功能强大的
web
开发工具可以实时编辑、调试和监测任何页面的
CSS
、
HTML
和
JavaScript
。
本文主要是为初学者介绍一下Firebug的基本功能与如何使用Firebug。由于本人水平与能力有限在文章中的可能会有很多错误与遗漏希望大家能谅解和指正 1、 安装
Firebug是与Firefox集成的所以我们首先要安装的事Firefox浏览器。安装好浏览器后打开浏览器选择菜单栏上的“工具”菜单选择“附加软件”在弹出窗口中点击右下角的“获取扩展”链接。在打开的页面的search输入框中输入“firebug”。等搜索结果出来后点击Firbug链接图1-1红色圈住部分进入Firebug的下载安装页面。 图1-1 在页面中点击Install Now图1-2按钮。 图1-2 在弹出窗口图1-3中等待3秒后单击“立即安装”按钮。 图1-3 等待安装完成后会单击窗口图1-4中的“重启 Firefox”按钮重新启动Firefox。 图1-4 当Firefox重启完后我们可以在状态栏最右边发现一个灰色圆形图标这就表示Firebug已经安装好了。灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。而绿色则表示Firebug已开启对当前网站进行编辑、调试和监测的功能。而红色图标表示已开启对当前网站进行编辑、调试和监测的功能而且检查到当前页面有错误当前图标表示有5个错误。 2、 开启或关闭Firebug
单击Firebug的图标或者按F12键你会发现页面窗口被分成了两部分上半部分是浏览的页面下半部分则是Firebug的控制窗口图2-1。如果你不喜欢这样可以按CTRLF12或在前面操作后单击右上角的上箭头按钮弹出一个新窗口作为Firebug的控制窗口。 图2-1 从图2-1中我们可以看到因为我们开启Firebug的编辑、调试和监测功能所以目前只有两个可以选择的链接“Enable Firebug”与“Enable Firebug for this web site”。如果你想对所有的网站进行编辑、调试和检测你可以点击“Enable Firebug”开启Firebug则以后无论浏览任何网站Firebug都处于活动状态随时可以进行编辑、调试和检测。不过一般的习惯我们只是对自己开发的网站进行编辑、调试和检测所以我们只单击“Enable Firebug for this web site”开启Firebug就行了。
开启Firebug窗口图2-2后我们可以看到窗口主要有两个区域一个是功能区一个是信息区。选择功能区第二行的不同标签信息区的显示会有不同Options的选项也会不同搜索框的搜索方式也会不同。 图2-2 要关闭Firebug控制窗口单击功能区最右边的关闭图标或按F12键就行了。如果要关闭Firebug的编辑、调试和监测功能则需要单击功能区最左边的臭虫图标打开主菜单选择“Disable Firebug”或“Disable Firebug for xxxxx”。 3、 Firebug主菜单 单击功能区最左边的臭虫图标可打开主菜单图3-1其主要功能描述请看表1。 图3-1 菜单选项 说明 Disable Firebug 关闭/开启Firebug对所有网页的编辑、调试和检测功能 Disable Firebug for xxxxx 关闭/开启Firebug对xxxxx网站的编辑、调试和检测功能 Allowed Sites 设置允许编辑、调试和检测的网站 Text SizeIncrease text size 增大信息区域显示文本的字号 Text SizeDecrease text size 减少信息区域显示文本的字号 Text SizeNormal text size 信息区域以正常字体显示 OptionsAlways Open in New Window 设置Firebug控制窗口永远在新窗口打开 Show Preview tooltips 设置是否显示预览提示。 Shade Box Model 当前查看状态为HTML鼠标在HTML element标签上移动时页面会相应在当前标签显示位置显示一个边框表示该标签范围。这个选项的作用是设置是否用不同颜色背景表示标签范围。 Firebug Website.. 打开Firebug主页。 Documentation.. 打开Firebug文档页。 Discussion Group 打开Firebug讨论组。 Contribute 打开捐助Firebug 页面。 表1 4、 控制台Console
单击功能区第二栏的“Console”标签可切换到控制台图4-1。控制台的作用是显示各种错误信息可在Options里定义显示脚本代码中内嵌的控制台调试信息通过命令行对脚本进行调试通过单击Profile对脚本进行性能测试。 控制台分两个区域一个是信息区一个是命令行通过Options菜单的“Larger Command Line”可改变命令行位置。 图4-1 Options菜单的选项请看表2。 菜单选项 说明 Show JavaScript Errors显示脚本错误。 Show JavaScript Warnings 显示脚本警告。 Show CSS Errors 显示CSS错误。 Show XML Errors 显示XML错误。 Show XMLHttpRequests 显示XMLHttpRequests。 Larger Command Line 将命令行显示从控制窗口底部移动右边扩大输入区域。 表2 单击“Clear”按钮可清除控制台的控制信息。 5、 页面源代码查看功能
单击功能区第二栏的“HTML”标签可切换到源代码查看功能图5-1。虽然Firefox也提供了查看页面源代码的功能但它显示的只是页面文件本身的源代码通过脚本输出的HTML源码是看不到。而Firebug则是所见即所得是最终的源代码。 图5-1 我们来看一个例子文件源代码如下 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd html head title简单的例子/title meta http-equivcontent-type contenttext/html; charsetutf-8 style #div1{background:red;width:100px;height:100px;} #div2{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;} #div3{background:yellow;width:50px;height:50px;margin-left:25px;} /style /head body scrollno div iddiv1方块一/div div iddiv2方块二/div script document.getElementById(div1).innerHTMLdiv iddiv3方块三/div; /script /body /html 在例子中我们通过JavaScript在“div1”中加入了“div3”在Firefox中查看源代码你是看不到“div1”中包含有代码“div iddiv3方块三/div”的但是Firebug中我们是可以看见的图5-2选中部分。 图5-2 从图5-1中我们可以看到信息区被分成了两个部分左边是显示源代码右边是一个功能区可以从这里查看到HTML Element中的CSS定义、布局情况和DOM结构。
从图5-2中我们可以看到源代码按DOM结构分层次显示的通过层次折叠功能我们就可以很方便分析代码。在功能区的第一行还根据你的选择清晰的按子、父、根列出了当前源代码的层次图5-2红色部分单击各部分则会即刻转到该部分的源代码。 图5-3 在源代码上移动鼠标页面就会出现一个半透明的方块指示当前鼠标所指源代码的显示区域当选择。在图5-4中鼠标正指向“div1”而在页面中“div1”的显示区域上被一个半透明的方块遮盖了。 图5-4
如果你把“Inspect”按钮按下功能正好相反在页面中移动鼠标则当前显示区域的源代码会被加亮显示出来。在图5-5中我们可以看到鼠标指针正指向“方块二”而在源代码中可以看到“方块二”的源代码“div iddiv2方块二/div”已被加亮显示红色部分。如果你单击某个显示区域则该区域的源代码会被选中。 图5-5
是不是很方便方便是方便但是我的源代码很多而且有些区域在页面中不方便鼠标指定怎么办没关系我们还有一个厉害武器搜索功能。譬如我们知道某个HTML Element的ID是“div2”但在层层叠叠的源代码中不好找在页面中鼠标也很难找到那我们就在功能区的搜索框中输入“div2”再看看源代码区域“div2”被加亮显示出来了图5-6红色部分。在这个简单的例子可能看不出很好的效果大家可以尝试一下把“div1”先折叠起来然后在搜索框输入“div3”你可以看到“div1”会自动展开并将“div3”加亮显示如果还觉得不够理想可以找一个源代码比较多的例子测试一下。 图5-6 除了通过按下“Inspect”按钮单击显示区域选择源代码我们还可以通过单击源代码中的HTML标记开始或结束标记都可以来选择。我们尝试一下把鼠标移动到HTML标记会发现鼠标指针变成了手的形状这说明我们可以通过单击选择该源代码。选择源代码后我们就可以通过右边的功能区查看、编辑和调试它的CSS定义和盒子模型CSS盒子模型请参阅相关说明这里就不再赘述了还有一个很好的功能就是当外部编辑器修改了源代码没有删除该源代码只是修改我们在浏览器重新加载页面后选择的源代码不会改变我们可以很方便的观察源代码的变化与效果。
有没有经常为调试某个页面效果在源代码编辑器和浏览器之间切换一次又一次的刷新而感到懊恼有了Firebug你就不用再懊恼了。你可以直接在源代码中进行编辑然后查看效果。如果只是修改已经存在的属性例如要修改“div2”的内部文本则直接将鼠标移动到文本上面等鼠标指针换成“I”单击即可进行编辑了。其它已存在的属性和属性值也可以这样直接进行编辑。如果要为某Element添加属性请将鼠标移动到该Element上等光标变为“I”的时候单击鼠标右键从菜单中选择“New Attribute..”在显示的编辑框中输入你要添加的属性名称就可以了。 图5-7 图5-8
我们尝试一下为“div2”增加一个“onclick”属性单击的结果是将“div2”的显示文本修改为“单击”。把光标移动到“div2”上然后单击鼠标右键选择“New Attribute..”图5-7在编辑框中输入“onclick”最后按一下回车键图5-8出现属性值输入框后输入“this.innerHTML’单击’”回车后我们可以继续添加下一个属性这次测试不需要所以按ESC结束我们的输入。我们来检验一下修改结果单击页面“div2”的区域图5-9“div2”的显示文本已修改为“单击”了而源代码也改变了。有没有发现“div2”被加亮显示了这又是Firebug的一个功能。只要我们通过页面中的操作修改了Element的属性Firebug就会在源代码中通过加亮的方式指示当前操作修改那些属性值。譬如我们单击某个链接修改了一个iframe里的src那么这个src的属性值就会被加亮显示。 又譬如我们单击某个链接修改了一个image里的图像那么它的src属性值也会被加亮显示。我们可以通过Options菜单里的“Highlight Changes”设置是否加亮显示改变。而“Expand Changes”则是设置被改变的源代码折叠起来看不见时展开让它可见。而“Scroll Changes into view”则是源代码很多被改变的源代码不在可视区域时将被改变的源代码滚动到可视区域。 图5-9 有时候我们不单是要增加一两个属性而是要做更多的修改这怎么办呢很简单选择你要更改Element然后单击功能区第一行的“Edit”按钮或者直接将鼠标移动到要修改的Element上单击鼠标右键选择“Edit HTML..”这时候源代码区域将切换到编辑状态你可以随意的修改你选择的源代码了。我们尝试修改一下“div2”将被修改显示文本修改回“方块二”我们选择“div2”然后单击“Edit”按钮图5-10将显示文本修改回“方块二”然后再次单击“Edit”按钮退出编辑状态如果要放弃修改可以按ESC键退出。因为是所见即所得的所以我们在修改的时候页面会同时刷新显示。 图5-10
如果要修改Element的CSS定义怎么办很简单选择该Element然后在右边的窗口选择“Style”标签这里显示的就是当前Element的CSS定义了。我们在这里可以对CSS定义进行添加、编辑、删除、禁止等操作。我们尝试一下把“div2”的背景色禁止了看看。将鼠标移动到“background”这行图5-11我们可以看到在这行的最右边会有一个灰色的禁止图标只要单击这个禁止图标就可以禁止了这个CSS属性了。我们单击这个图标看看效果页面中的“div2”已经变成白色背景了而禁止图标也变成红色而文本会则变成灰色图5-12这说明已经禁止了“background”了。当然了这个操作也可以通过鼠标右键的“Disable XXXXX”来实现XXXXX表示当前选择的CSS属性。我们再次单击禁止图标恢复“background”属性。我们这次要把“background”的颜色由蓝色blue修改为绿色green。我们把鼠标移动到“background”属性值“blue”上图5-13。怎么会出现一个蓝色背景的方框这是Firebug提供背景预览功能让我们很直观的知道当前背景是什么。如果背景是图片的话显示的将是背景图片的缩略图。继续我们的操作单击属性值在出现的编辑框中将“blue”修改为“green”。好了背景已经修改为绿色了。现在的显示文本是左对齐的我想让它居中对齐这需要在CSS里加一个“text-align”的属性值为“center”。请在CSS上单击鼠标右键在菜单中选择“New Property..”在编辑框中输入“te”Firebug已通过自动完成功能帮我们输入“text-align”了图5-14按Tab键或回车在属性值中我们输入“c”Firebug再次帮我们自动完成了“center”图5-15按Tab键或回车完成输入如果不需要继续输入新属性按ESC或单击鼠标取消输入。文本“方块二”现在已经居中显示了。如果忘记了某个属性值有那些选项怎么办不要紧在输入属性值的时候可以通过上、下箭头选择我们需要的属性值。
在“Style”标签里我们可以选择“Options”菜单里的“Show Computed Style”查看浏览器默认的风格定义。 图5-11 图5-12 图5-13 图5-14 图5-15
页面设计中我们有时候最头疼的是什么是盒子模型为了调整一个Element的margin、border、padding和相对位置我们往往需要花很多工夫去修改源代码然后刷新页面查看效果。有了Firebug你就可以轻松应对了。我们将右边的区域切换到“Layout”标签图5-16你会看到一个盒子模型里面从外到里通过不同的线和颜色划分出了offset、margin、border、padding和内容五个区域里面4个区域在每个边上都有1个数值表示该方向上的调整值。我们先在左边选择“div2”然后把鼠标分别移动到“Layout”里的不同区域图5-17然后留意一下页面页面在顶部多了一条水平标尺在左边多一条垂直标尺而4条实线指示出了当前鼠标指示的区域实际位置通过与标尺的交点可以知道该区域离页面显示区域左上角的偏移量单位是px当然我们也可以通过layout中的数字计算出这些偏移量。在图中我们还可以看到在内容区域的外面还有3个不同颜色的区域它们从里到外用不同颜色表示了padding、border、margin的位置和偏移量。只要将鼠标移动到不同区域页面中的4条实线也会改变位置指示出页面中相应的区域。我们还可以通过修改Layout中的数值对显示效果进行调整。例如我们要将“div2”的内容显示区域扩大到200×200将鼠标移动最左边的100上光标变成“I”后单击鼠标然后在输入框中输入200按回车可继续修改高度值输入200回车后完成修改。页面中的“div2”区域已经扩展到200×200了而源代码也增加了“stylewidth: 200px; height: 200px;”图5-18。我们切换标签到“Style”会发现多了“element.style {height:200px;width:200px;}”(图5-19)而CSS定义里面的高度和宽度都划了横线表示不起作用了“element.style”表示直接定义在Element源代码上的CSS属性。有时候某些Element会有相同的属性也有自己特殊的属性而特殊的属性想写在Element的源代码上就可以在Style里单击鼠标右键选择“Edit Element Style..”进行添加。如果有兴趣的话大家可以尝试修改“Layout”里的其它属性值看看页面的变化这里我就不再一一说明了。 如果不想在页面中显示标尺和4条实线可以不选择“Options”菜单里的“Show Rules and Guides”。 图5-16 图5-17 图5-18 图5-19 在源代码显示区域我们还可以通过鼠标右键复制源代码和显示内容这里就不一一说明了。DOM的说明请看查看DOM结构一节两者是一样的。在源代码区域中如果觉得源代码显示太密可以将“Options”菜单里的“Show White Space”选项打开每个源代码块之间会用空白行隔离。如果要查看源代码的注释内容请将“Options”菜单里的“Show Comments”选项打开。
这里要提醒大家一下在HTML里调试出正确的源代码和CSS后别忘记将源代码和CSS的修改结果复制到你的源代码文件中不然你的调试结果在页面刷新后会付之东流。切记切记 6、 查看CSS定义
将功能区第二行的标签切换到“CSS”在这里我们可以查看页面中所有的CSS定义包括链接的CSS文件。通过功能区的文件选择按钮可以选择不同的含有CSS的文件图6-1红色圈住部分。 图6-1 CSS的定义的编辑这里就不再说明了这个可以参考HTML的“Style”操作。
“Edit”按钮功能和HTML的“Edit”功能类似。 7、 脚本调试
将功能区第二行的标签切换到“Script”在这里我们可以对页面中所有的脚本进行调试包括链接的脚本。和CSS一样可以通过文件选择按钮选择不同的脚本文件。
如果要在脚本中设置一个断点可以单击行号旁边的空白区域这时会出现一个红色的点表示在这里设置了断点图7-1当脚本运行到此会停止运行等待你的操作。在右边的小窗口将标签切换到“Breakpoints”可以查看我们设置的所有断点图7-2单击左上角的checkbox可以让断点不起作用如果要删除断点可以单击右上角的删除图标。通过“Options”菜单的“Disable All Breakpoints”可暂时禁止所有断点而“Remove All Breakpoints”可删除所有断点。在断点标记的红点上单击右键还可以设置断点条件在符合条件的时候才会停止脚本的执行。 图7-1 图7-2 下面我们来尝试一下断点的功能。首先在测试页脚本里增加一个test的函数函数的主要操作是运行一个1000次的循环将循环的参数值显示在“div2”里 function test(){ for(var i0;i1000;i){ document.getElementById(div2).innerHTMLi; } } 在“div2”里增加一个“onclick”属性单击后执行test div iddiv2 onclicktest()方块二/div 刷新页面然后在“for(var i0;i1000;i){”这行上设置一个断点并设置条件为“i100”图7-3然后单击“div2”开始执行函数test。 图7-3 当脚本停下来后我们将鼠标移动到变量“i”上这时会出现一个小方框里面有一个数值这就是变量“i“的当前值图7-4。在脚本调试的时候你可以通过这个方法很方便的了解到当前变量的值。你还可以通过右边窗口的“Watch”标签查看到“i”的值图7-5。 图7-4 图7-5
在“Watch”标签窗口我们可以通过“Options”菜单选择查看用户自定义属性Show User-defined Properties、用户自定义函数Show User-defined Functions、DOM属性Show DOM Properties、DOM函数(Show DOM Functions)和DOM常数(Show DOM Constants)。我们还可以通过单击“New watch expression…”图7-6淡黄色背景部分加入自己想跟踪的内容。例如我们想跟踪一下“div2”的显示内容就可以单击“New watch expression…”加入“document.getElementById(div2).innerHTML”输入中可通过TAB键自动完成关键字的输入图7-7。如果不想跟踪了可单击最右边的删除图标取消跟踪。 图7-6 图7-7 脚本在断点停止后我们就可以利用搜索框旁的4个跟踪按钮进行代码跟踪了图7-7。第一按钮是继续运行程序不再执行跟踪快捷键是F8。第二个按钮是单步执行方式每次执行一条语句该方式在遇到函数调用时不进入调用函数内部进行跟踪快捷键是F10。第三个按钮也是单步执行方式每次执行一条语句但它遇到函数调用时会进入调用函数内部进行跟踪快捷键是F11。当你进入调用函数内想马上跳出来时可以单击第四个按钮该按钮没有快捷键。
搜索框的作用和HTML源代码查看是一样的不过有一个不同就是输入“#n”n≥1可以直接跳到脚本的第n行。
当执行脚本在“console”标签内显示一个错误而错误的提示行左边出现一个暗红色的圆点时图7-8我们可以单击改红点在该行设置一个断点。 图7-8
我们可以通过“Script”标签的“Options”菜单的“Break on All Errors”选项设置每当脚本发生错误时就中断脚本进入调试状态。
有时候一个函数随机出现错误你不可能每次调用都去跟踪一次而产生错误的原因很可能是传递的参数错误这时你可以通过跟踪函数调用的功能去检查每次调用函数时的参数情况。操作在函数脚本内单击鼠标右键在菜单中选择“Log Calls to xxxxx”xxxxx为函数名然后可在“console”标签中可查看函数调用情况。 8、 查看DOM结构
将功能区第二行的标签切换到“DOM”可俺层次查看整个页面的DOM结构。通过“Options”菜单可自定义选择查看用户自定义属性Show User-defined Properties、用户自定义函数Show User-defined Functions、DOM属性Show DOM Properties、DOM函数(Show DOM Functions)或DOM常数(Show DOM Constants)等内容。
通过双击你可以修改DOM里面的属性值。 9、 查看网络状况
作为开发人员是否会经常听到老板或客户抱怨页面下载太慢了于是你就怀疑是否脚本太多了忘记压缩图片了服务器太慢了网络太慢确实是头疼的事情。有了Firebug你就可以很容易的对这个问题进行分析和判断了。请将Firebug的当前标签切换到“Net”图9-1。 图9-1 图9-2 从图中我们可以看到页面中每一个下载文件都用一个灰色条表示它相对其它文件是从什么时候开始下载的下载时间是多少。在底部我们看到页面发送了多少个请求下载总量是多少有多少是有缓存的下载总共花费了多少时间等信息。
如果只想了解某一样文件的下载情况你可以单击功能区第一栏的文件分类按钮过滤文件图9-2红色圈住区域1。
将鼠标在文件中移动如果是图片我们可以看到图片的缩略图图9-2红色圈住区域3。
如果显示为红色的文件名则表示该文件在服务器中不存在不能下载这样你就要检查一下文件的路径是否正确或者是否上传了该文件图9-2红色圈住区域2。
我们可以展开某个文件查看它的HTTP头信息和返回结果的信息。如果请求的是一个动态页面或XMLHttpRequest则还可以查看提交的变量。通过查看提交的变量和返回信息我们可以很方便的调试程序是否正确提交了需要的变量和返回了正确的数据。例如从图36中我们可以看到向“topics-remote.php”发送了一个请求提交的参数有“_dc”、“callback”、“limit”和“start”四个值分别为“1188637444000”、“stcCallback1001”、“25”与“0”从这里我们可以很方便的知道我们脚本操作提交的参数是否正确。切换到“Response”页可以看到返回的结果图9-3在这里你可以对返回结果进行检查。如果你感觉在这里查看结果很乱你可以单击鼠标右键在弹出菜单中选择“Copy Response body”复制结果到编辑器查看你还可以选择“Open in New Tab”打开一个新标签浏览。 图9-3 通过右键菜单你可以复制文件地址Copy Location、HTTP请求头信息(Copy Request Headers)和HTTP响应头信息Copy Response Headers。
如果不想使用该功能可以选择Options菜单的“Disable Network Monitoring”关闭该功能。 10、 命令行调试
在“Console”标签了有一个命令行工具我们可以在这里运行一些脚本对页面进行调试。
我们在命令行中输入“document.getElementById(div2).innerHTML”看看效果图10-1别忘了用TAB键实现快速输入关键字。在信息区显示了当前“div2”的显示内容。 图10-1 要输入“document.getElementById”是不是觉得很麻烦这里有一个简单的办法用“$”符号代替“document.getElementById”我们再在命令行中输入“$(div2).innerHTML”然后看看结果是一样图10-2。 图10-2 当你通过“Inspect”锁定了一些HTML Element时你可以通过“$1”来访问最后一个Element依次类推我们可以通过“$n”(n1)访问依次倒序访问锁定的Element。
我们来实践一下刷新一下测试页面然后按下“Inspect”按钮鼠标单击“方块二”然后在按下“Inspect”按钮单击“方块一”。将firebug窗口切换回“Console”标签然后输入“$1”回车后再输入“$2”查看一下结果图10-3正是我们用锁定过的Element。 图10-3 在命令行还可以通过“$$(HTML 标记)”返回一个Element数组。我们在测试页输入“$$(‘div’)”看看图10-4。我们再输入“$$(‘div’)[0]”看看图10-5。是不是很便于我们对HTML进行调试。 图10-4 图10-5 命令行的所有特殊函数请看表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).innerHTMLi;”修改为 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(This is console.debug!); console.info(This is console.info!); console.warn(This is console.warn!); console.error(This is console.error!); 刷新页面看看结果图11-4。 图11-4 有时候为了更清楚方便的查看输出信息我们可能需要将一些调试信息进行分组输出那么可以使用console.group来对信息进行分组在组信息输出完成后用console.groupEnd结束分组。我们测试一下把刚才的4个输出作为一个分组输出修改代码为 console.group(开始分组); console.debug(This is console.debug!); console.info(This is console.info!); console.warn(This is console.warn!); console.error(This is console.error!); console.groupEnd(); 刷新页面看看结果图11-5。在console.group中我们还可以加入一个组标题“开始分组”。如果需要我们还可以通过嵌套的方式在组内再分组。 图11-5 有时候我们需要写一个for循环列出一个对象的所有属性或者某个HTML Element下的所有节点有了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次循环需要多少时间 function test(){ console.time(test); for(var i0;i1000;i){ document.getElementById(div2).innerHTMLi; //console.log(当前的参数是%d,i); } console.timeEnd(test); } 刷新页面单击“方块二”看看结果图11-8。在这里要注意的是console.time和console.timeEnd里的参数要一致才会有正确的输出而该参数就是信息的标题。 图11-8 是否想知道某个函数是从哪里调用的console..trace可帮助我们进行追踪。在test函数的结尾加入 console.trace(); 刷新页面单击“方块二”看看结果图11-9。结果显示是在坐标97187的鼠标单击事件执行了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或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 languagejavascript typetext/javascript src/路径/firebug.js/script 如果你不想在IE中模仿Friebug控制台只是不希望console.log()脚本出现错误信息那么在页面中加入一下语句 script languagejavascript typetext/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 debugtrue 在Friebug Lite中也有命令行但是功能没那么强。 13、 快捷键和鼠标操作 全局操作 打开Firebug窗口 F12 关闭Firebug窗口 F12 在新窗口打开Firebug CtrlF12 往前切换标签 Ctrl 将光标移到命令行 CtrlShiftL 将光标移到搜索框 CtrlShiftK 进入Inspect模式 CtrlShiftC 进行JavaScript性能测试 CtrlShiftP 重新执行最后一条命令行命令 CtrlShiftE HTML标签 编辑属性 单击属性名或值 编辑文本节点 单击文本 编辑Element 双击Element标记 移到路径里的下一个节点 Ctrl. 移到路径里的上一个节点 Ctrl, HTML编辑 完成编辑 Return 取消编辑 Esc 移到下一个区域 Tab 移到上一个区域 ShiftTab HTML Inspect 模式 取消Inspect Esc Inspect 父节点 CtrlUp Inspect 子节点 CtrlDown Script标签 继续运行 F5 Ctrl/ 单步执行Step Over F10 Ctrl 单步执行Step Into F11 Ctrl; 退出函数Step Out ShiftF11 CtrlShift; 设置断点 单击行号 禁止断点 在行号上ShiftClick 编辑断点条件 在行号上Right-Click 运行到当前行 在行号上Middle-Click 在行号上CtrlClick 移到堆栈中的下一个函数 Ctrl. 移到堆栈中的上一个函数 Ctrl, 将焦点切换到Scripts菜单 CtrlSpace 将焦点切换到Watch编辑 CtrlShiftN DOM 标签 编辑属性 双击在空白 移到路径中下一个对象 Ctrl. 移到路径中上一个对象 Ctrl, DOM 和Watch编辑 结束编辑 Return 取消编辑 Esc 自动完成下一个属性 Tab 自动完成上一个属性 ShiftTab CSS标签 编辑属性 单击属性 插入新属性 双击空白处 移动焦点到Style Sheets菜单 CtrlSpace CSS编辑 完成编辑 Return 取消编辑 Esc 移到下一个区域 Tab 移到上一个区域 ShiftTab 按步长1增加数值 Up 按步长1减少数值 Down 按步长10增加数值 Page Up 按步长10减少数值 Page Down 自动完成下一个关键字 Up 自动完成上一个关键字 Down Layout标签 编辑值 单击值 Layout编辑 完成编辑 Return 取消编辑 Esc 移到下一个区域 Tab 移到上一个区域 ShiftTab 按步长1增加数值 Up 按步长1减少数值 Down 按步长10增加数值 Page Up 按步长10减少数值 Page Down 自动完成下一个关键字 Up 自动完成上一个关键字 Down 命令行 (小) 自动完成上一个属性 Tab 自动完成下一个属性 ShiftTab 执行 Return Inspect结果 ShiftReturn 打开结果鼠标右键菜单 CtrlReturn 命令行 (大) 执行 CtrlReturn 13、 总结
真是意想不到Firebug居然有那么多好功能居然是我不知道。通过写本篇文章才认真的了解和学习了一次Firebug越学越感觉到它的威力。不过我学的也只是皮毛还有更多的功能和技巧需要在平时的使用中慢慢积累因此这篇文章只是一个简单的介绍还有很多东西是没有涉及到的而且因为我本身水平与能力有限所以文中会有很多错误与遗漏希望大家能多多谅解与指正多谢 例子最终源代码 ! DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd html debug true head title 简单的例子 / title meta http-equiv content-type content text/html; charsetutf-8 style #div1{background:red;width:100px;height:100px;} #div2{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;} #div3{background:yellow;width:50px;height:50px;margin-left:25px;} / style script language javascript type text/javascript src firebug/firebug.js / script / head body scroll no div id div1 方块一 / div div id div2 onclick test() 方块二 / div script document.getElementById(div1).innerHTMLdiv iddiv3方块三/div; /* console.log(Hello); console.log(2,4,window,test,document); console.group(开始分组); console.debug(This is console.debug!); console.info(This is console.info!); console.warn(This is console.warn!); console.error(This is console.error!); console.groupEnd();*/ // console.dir(document.getElementById(div1)); // console.dirxml(document.getElementById(div1)); function test(){ console.time(test); for(var i0;i1000;i){ document.getElementById(div2).innerHTMLi; //console.log(当前的参数是%d,i); } console.timeEnd(test); console.trace(); } / script / body / html
