页面设计中,我们有时候最头疼的是什么?是盒子模型!为了调整一个Elementmarginborderpadding和相对位置,我们往往需要花很多工夫去修改源代码,然后刷新页面查看效果。有了Firebug,你就可以轻松应对了。我们将右边的区域切换到“Layout”标签(图5-16),你会看到一个盒子模型,里面从外到里通过不同的线和颜色划分出了offsetmarginborderpadding和内容五个区域,里面4个区域在每个边上都有1个数值,表示该方向上的调整值。我们先在左边选择“div2”,然后把鼠标分别移动到“Layout”里的不同区域(图5-17),然后留意一下页面,页面在顶部多了一条水平标尺,在左边多一条垂直标尺,而4条实线指示出了当前鼠标指示的区域实际位置,通过与标尺的交点可以知道该区域离页面显示区域左上角的偏移量(单位是px),当然我们也可以通过layout中的数字计算出这些偏移量。在图中,我们还可以看到,在内容区域的外面还有3个不同颜色的区域,它们从里到外用不同颜色表示了paddingbordermargin的位置和偏移量。只要将鼠标移动到不同区域,页面中的4条实线也会改变位置,指示出页面中相应的区域。我们还可以通过修改Layout中的数值,对显示效果进行调整。例如我们要将“div2”的内容显示区域扩大到200×200,将鼠标移动最左边的100上,光标变成“I”后,单击鼠标,然后在输入框中输入200,按回车可继续修改高度值,输入200,回车后完成修改。页面中的“div2”区域已经扩展到200×200了,而源代码也增加了“style="width: 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”。
 
<!--[if !vml]--><!--[endif]-->
5-16
 
 
<!--[if !vml]--><!--[endif]-->
5-17
 
<!--[if !vml]--><!--[endif]-->
5-18
 
<!--[if !vml]--><!--[endif]-->
5-19
 
在源代码显示区域我们还可以通过鼠标右键复制源代码和显示内容,这里就不一一说明了。DOM的说明请看查看DOM结构一节,两者是一样的。在源代码区域中如果觉得源代码显示太密,可以将“Options”菜单里的“Show White Space”选项打开,每个源代码块之间会用空白行隔离。如果要查看源代码的注释内容,请将“Options”菜单里的“Show Comments”选项打开。
这里要提醒大家一下,在HTML里调试出正确的源代码和CSS后,别忘记将源代码和CSS的修改结果复制到你的源代码文件中,不然你的调试结果在页面刷新后会付之东流。切记!切记!
 
 
<!--[if !supportLists]-->6、  <!--[endif]-->查看CSS定义
将功能区第二行的标签切换到“CSS”,在这里我们可以查看页面中所有的CSS定义,包括链接的CSS文件。通过功能区的文件选择按钮可以选择不同的含有CSS的文件(图6-1红色圈住部分)。
 
<!--[if !vml]--><!--[endif]-->
6-1
 
CSS的定义的编辑这里就不再说明了,这个可以参考HTML的“Style”操作。
Edit”按钮功能和HTML的“Edit”功能类似。
 
<!--[if !supportLists]-->7、  <!--[endif]-->脚本调试
将功能区第二行的标签切换到“Script”,在这里我们可以对页面中所有的脚本进行调试,包括链接的脚本。和CSS一样,可以通过文件选择按钮选择不同的脚本文件。
如果要在脚本中设置一个断点,可以单击行号旁边的空白区域,这时会出现一个红色的点表示在这里设置了断点(图7-1),当脚本运行到此会停止运行,等待你的操作。在右边的小窗口将标签切换到“Breakpoints”可以查看我们设置的所有断点(图7-2),单击左上角的checkbox可以让断点不起作用,如果要删除断点可以单击右上角的删除图标。通过“Options”菜单的“Disable All Breakpoints”可暂时禁止所有断点,而“Remove All Breakpoints”可删除所有断点。在断点标记的红点上单击右键还可以设置断点条件,在符合条件的时候才会停止脚本的执行。
<!--[if !vml]--><!--[endif]-->
7-1
 
<!--[if !vml]--><!--[endif]-->
7-2
 
下面我们来尝试一下断点的功能。首先在测试页脚本里增加一个test的函数,函数的主要操作是运行一个1000次的循环,将循环的参数值显示在“div2”里:
 
     function test(){
             for(var i=0;i<1000;i++){
                    document.getElementById('div2').innerHTML=i;
             }
         }
  
    在“div2里增加一个“onclick”属性,单击后执行test
 
<div id="div2" onclick='test()'>方块二</div>
  
刷新页面,然后在“for(var i=0;i<1000;i++){”这行上设置一个断点,并设置条件为“i=100”(图7-3),然后单击“div2”开始执行函数test
 
<!--[if !vml]--><!--[endif]-->
7-3
 
当脚本停下来后,我们将鼠标移动到变量“i”上,这时会出现一个小方框,里面有一个数值,这就是变量“i“的当前值(图7-4)。在脚本调试的时候,你可以通过这个方法很方便的了解到当前变量的值。你还可以通过右边窗口的“Watch”标签查看到“i”的值(图7-5)。
<!--[if !vml]--><!--[endif]-->
7-4
 
<!--[if !vml]--><!--[endif]-->
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)。如果不想跟踪了,可单击最右边的删除图标取消跟踪。
<!--[if !vml]--><!--[endif]-->
7-6
 
<!--[if !vml]--><!--[endif]-->
7-7
 
脚本在断点停止后,我们就可以利用搜索框旁的4个跟踪按钮进行代码跟踪了(图7-7)。第一按钮是继续运行程序,不再执行跟踪,快捷键是F8。第二个按钮是单步执行方式,每次执行一条语句,该方式在遇到函数调用时不进入调用函数内部进行跟踪,快捷键是F10。第三个按钮也是单步执行方式,每次执行一条语句,但它遇到函数调用时会进入调用函数内部进行跟踪,快捷键是F11。当你进入调用函数内,想马上跳出来时,可以单击第四个按钮,该按钮没有快捷键。
搜索框的作用和HTML源代码查看是一样的,不过有一个不同,就是输入“#n”(n1),可以直接跳到脚本的第n行。
当执行脚本在“console”标签内显示一个错误,而错误的提示行左边出现一个暗红色的圆点时(图7-8),我们可以单击改红点在该行设置一个断点。
 
<!--[if !vml]--><!--[endif]-->
7-8
我们可以通过“Script”标签的“Options”菜单的“Break on All Errors”选项设置每当脚本发生错误时就中断脚本,进入调试状态。
有时候一个函数随机出现错误,你不可能每次调用都去跟踪一次,而产生错误的原因很可能是传递的参数错误,这时你可以通过跟踪函数调用的功能去检查每次调用函数时的参数情况。操作在函数脚本内单击鼠标右键,在菜单中选择“Log Calls to xxxxx”(xxxxx为函数名),然后可在“console”标签中可查看函数调用情况。
 
<!--[if !supportLists]-->8、  <!--[endif]-->查看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里面的属性值。
 
<!--[if !supportLists]-->9、  <!--[endif]-->查看网络状况
作为开发人员,是否会经常听到老板或客户抱怨页面下载太慢了?于是你就怀疑是否脚本太多了?忘记压缩图片了?服务器太慢了?网络太慢?确实是头疼的事情。有了Firebug,你就可以很容易的对这个问题进行分析和判断了。请将Firebug的当前标签切换到“Net”(图9-1)。
 
<!--[if !vml]--><!--[endif]-->
9-1
 
<!--[if !vml]--><!--[endif]-->
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”打开一个新标签浏览。
 
<!--[if !vml]--><!--[endif]-->
9-3
 
通过右键菜单你可以复制文件地址(Copy Location)、HTTP请求头信息(Copy Request Headers)HTTP响应头信息(Copy Response Headers)。
如果不想使用该功能,可以选择Options菜单的“Disable Network Monitoring”关闭该功能。
 
<!--[if !supportLists]-->10、              <!--[endif]-->命令行调试
在“Console”标签了有一个命令行工具,我们可以在这里运行一些脚本对页面进行调试。
我们在命令行中输入“document.getElementById('div2').innerHTML”看看效果(图10-1),别忘了用TAB键实现快速输入关键字。在信息区显示了当前“div2”的显示内容。
 
<!--[if !vml]--><!--[endif]-->
10-1
 
要输入“document.getElementById”是不是觉得很麻烦?这里有一个简单的办法,用“$”符号代替“document.getElementById”,我们再在命令行中输入“$('div2').innerHTML”,然后看看结果,是一样(图10-2)。
 
<!--[if !vml]--><!--[endif]-->
10-2
 
当你通过“Inspect”锁定了一些HTML Element时,你可以通过“$1”来访问最后一个Element,依次类推,我们可以通过“$n(n>1)访问依次倒序访问锁定的Element
我们来实践一下,刷新一下测试页面,然后按下“Inspect”按钮,鼠标单击“方块二”,然后在按下“Inspect”按钮,单击“方块一”。将firebug窗口切换回“Console”标签,然后输入“$1”,回车后再输入“$2”,查看一下结果(图10-3),正是我们用锁定过的Element
 
<!--[if !vml]--><!--[endif]-->
10-3
 
在命令行还可以通过“$$(HTML 标记)”返回一个Element数组。我们在测试页输入“$$(‘div’)”看看(图10-4)。我们再输入“$$(‘div’)[0]”看看(图10-5)。是不是很便于我们对HTML进行调试。
 
<!--[if !vml]--><!--[endif]-->
10-4
<!--[if !vml]--><!--[endif]-->
10-5
 
命令行的所有特殊函数请看表3

命令
说明
$(id)
通过id返回Element
$$(selector)
通过CSS选择器返回Element数组。
$x(xpath)
通过xpath表达式返回Element数组。
dir(object)
列出对象的所有属性,和在DOM标签页查看该对象的是一样的。
dirxml(node)
列出节点的HTMLXML的源代码树,和在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
 
命令行有命令记忆功能,可通过上、下箭头键选择已经输入过的命令。
 
<!--[if !supportLists]-->11、              <!--[endif]-->在脚本文件中加入调试命令
有没有对脚本调试中经常需要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);
<!--[if !vml]--><!--[endif]-->
11-1
  
   刷新页面后看看结果(图11-2)。是不是挺不错的?console.log可以象c语言的printf一样实现格式化输出。我们再在脚本区加入一个语句:
 
console.log(2,4,window,test,document);
  
 
<!--[if !vml]--><!--[endif]-->
11-2
  
刷新页面后看看结果(图11-3)。console.log可以连续输出多个对象,而且如果对象是DOM、函数,还可以直接点击去到该对象。
 
<!--[if !vml]--><!--[endif]-->
11-3
  
如果你觉得console.log输出的文本太单调,不能表示出不同的信息,那么你可以通过console.debug console.info console.warnconsole.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)。
 
<!--[if !vml]--><!--[endif]-->
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中,我们还可以加入一个组标题“开始分组:”。如果需要,我们还可以通过嵌套的方式,在组内再分组。
 
<!--[if !vml]--><!--[endif]-->
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
 
<!--[if !vml]--><!--[endif]-->
11-6
<!--[if !vml]--><!--[endif]-->
11-7