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

 

图 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 了，而源代码也增加了“ 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 ”。

 

图 5-16

 

 

图 5-17

 

图 5-18

 

图 5-19

 

在源代码显示区域我们还可以通过鼠标右键复制源代码和显示内容，这里就不一一说明了。 DOM 的说明请看查看 DOM 结构一节，两者是一样的。在源代码区域中如果觉得源代码显示太密，可以将“ Options ”菜单里的“ Show White Space ”选项打开，每个源代码块之间会用空白行隔离。如果要查看源代码的注释内容，请将“ Options ”菜单里的“ Show Comments ”选项打开。

这里要提醒大家一下，在 HTML 里调试出正确的源代码和 CSS 后，别忘记将源代码和 CSS 的修改结果复制到你的源代码文件中，不然你的调试结果在页面刷新后会付之东流。切记！切记！