11.2.1 源代码调试（1）

来源：互联网发布：微博运营知乎编辑：程序博客网时间：2024/06/10 04:20

11.2 使用Firebug进行调试

在Firebug中可进行源代码、CSS、脚本和DOM等调试，基本上涵盖了页面调试的各个方面，是一个非常好的整合调试平台。

11.2.1 源代码调试（1）

浏览器自带的源代码查看功能提供的是页面实际源代码，不是页面显示的最终源代码，这在早期已满足我们的需要，但是随着Web 2.0的使用，越来越多的页面内容是通过脚本生成的，这就无法满足我们的需要了。

在没有调试工具之前，脚本的输出内容调试多数是通过alert来完成，调试起来相当麻烦。有了Firebug，我们就不用再为这个问题头疼了。Firebug不单为我们提供了页面的最终源代码，而且还可以实时编辑，通过所见即所得的方式调整元素的CSS属性，达到你需要的显示效果。不过不要忘记了将修改后的内容保存回你的实际文件中，因为Firebug并不会直接修改你的文件，只是提供一种方式让你调试显示效果。

如图11.10所示，切换到HTML选项卡即可查看页面源代码了。

（点击查看大图）图11.10 查看源代码

窗口右边会根据左边的焦点显示当前HTML元素的样式、布局和DOM信息。

下面我们通过一个例子来学习一下源代码查看的操作。例子的源代码如下。

HTML代码清单11-2-1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd
">

<html>

<head>

<title>简单的例子</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style type="text/css">

#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 scroll="no">

<div id="div1">方块一</div>

<div id="div2">方块二</div>

<script>

document.getElementById('div1')

.innerHTML += '<div id="div3">方块三</div>';

</script>

</body>

</html>

在这个例子中定义了3个色块，其中第3个是动态生成的。对比一下浏览器提供的源代码和图11.11中Firebug提供的源代码，会发现Firebug的源代码是包含第3个色块的HTML代码的。

从图11.11中可以看到，源代码是按DOM结构分层显示的，通过折叠功能，可以方便地对源代码进行分析。从图11.12中可以看出，在Firebug顶部区域，还按子、父、根列出了当前源代码的层次(红色框住部分)，单击各部分，会转到相应的源代码位置。

图11.11 动态生成

（点击查看大图）图11.12 源代码的层次显示

反过来，单击Firebug窗口顶部的"查看"按钮，如图11.13所示，在源代码首行中会出现一个浅蓝色背景的方框。然后，如图11.14，将鼠标移动到方块二的显示位置，这时，浅蓝色背景方框将移动到当前"方块二"对应的div源代码上，单击鼠标左键，当前显示位置的源代码将被选择。这是Firebug的源代码定位功能，通过该功能，可以方便地定位到显示结果的源代码，便于调试。

（点击查看大图）图11.13 单击"查看"按钮后的显示

（点击查看大图）图11.14 源代码定位