11.2.1 源代码调试（2）

 

11.2.1  源代码调试（2）

在HTML界面中，可以直接编辑源代码以及源代码的样式、布局和DOM等信息对源代码进行调试。

下面为id为"div2"的div增加单击事件。

(1) 在源代码中选择id为"div2"这一行，然后单击鼠标右键，在右键菜单中选择"新建属性"命令，输入"onclick"并按Enter键。

(2) 继续输入"this.innerHTML='单击'"，并按Esc键完成修改。

(3) 完成输入后，单击页面中的"方块二"区域，文字"方块二"将替换为"单击"。

如果想直接修改源代码，而不是新建属性，可在右键快捷菜单中选择"编辑HTML"命令，或单击Firebug窗口顶部的编辑按钮。

如果要编辑当前源代码的样式，可在HTML面板右边的"样式"选项卡中进行修改。在"样式"选项卡中会显示出当前源代码自己的样式以及从父节点继承下来的样式。在样式定义中移动鼠标，如图11.15所示，会看到一个灰色的禁止图标跟随鼠标在样式中移动。单击该图标，图标会变成红色，表示禁止了当前样式。在"#div3"的"background"中单击灰色图标，会看到"方块三"的黄色背景没有了，再次单击可恢复黄色背景。如果要修改属性或属性值，直接单击属性或属性值即可进入编辑状态。如果要增加属性，可单击鼠标右键，在右键快捷菜单选择"新建属性值.."。Firebug为属性或属性值的编辑提供了自动完成功能，输入第一个字符后，会显示以该字符开头的属性或属性值，如果不是你想要的，可通过上、下箭头查找符合要求的属性或属性值，或者继续输入字符直到符合为止。

将选项卡切换到"布局"，如图11.16所示，将会看到当前选择源代码的盒子模型。在源代码中选择id为"div3"的div，然后在盒子模型上移动鼠标，在页面中就会出现标尺、4条细线和一个半透明的方块(见图11.17)，这样一来，就可直观地看到当前选择源代码的位置与尺寸。可直接修改盒子模型内的数值来调整布局，将外间距的左边数值25修改为35，"方块三"将会向右移动。

 图11.15  编辑样式 图11.16  修改布局 （点击查看大图）图11.17  盒子模型标尺

将选项卡切换到"DOM"，可看到当前选择源代码的DOM结构，直接单击可对其进行修改。在源代码显示面板的"选项"菜单中，有"高亮更改"和"滚动到更改处"两个很有用的菜单命令。当源代码被脚本更改后，"高亮更改"选项会如图11.18所示。

 图11.18  "高亮更改"效果

被更改的源代码会以黄色背景显示。如果源代码很多，被更改的源代码不在当前可视区域，可将"滚动到更改处"选上，这样，当发生更改时，被更改的源代码将自动滚动到可视区域。