4、  控制台（ Console ）

单击功能区第二栏的“ Console ”标签可切换到控制台（图 4-1 ）。控制台的作用是显示各种错误信息（可在 Options 里定义），显示脚本代码中内嵌的控制台调试信息，通过命令行对脚本进行调试，通过单击 Profile 对脚本进行性能测试。 控制台分两个区域，一个是信息区，一个是命令行，通过 Options 菜单的“ Larger Command Line ”可改变命令行位置。

 

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

图 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 则是所见即所得，是最终的源代码。

 

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

图 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-equiv="content-type" content="text/html; charset=utf-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 scroll="no">

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

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

  <script>

     document.getElementById('div1').innerHTML+='<div id="div3"> 方块三 </div>';

  </script> 

</body>

</html>

  

在例子中我们通过 JavaScript 在“ div1 ”中加入了“ div3 ”，在 Firefox 中查看源代码你是看不到“ div1 ”中包含有代码“ <div id="div3"> 方块三</div> ”的，但是 Firebug 中我们是可以看见的（图 5-2 选中部分）。

 

Javascript的调试利器：Firebug使用详解(二)_职场_03

图 5-2

 

从图 5-1 中我们可以看到，信息区被分成了两个部分，左边是显示源代码，右边是一个功能区，可以从这里查看到 HTML Element 中的 CSS 定义、布局情况和 DOM 结构。

从图 5-2 中我们可以看到，源代码按 DOM 结构分层次显示的，通过层次折叠功能，我们就可以很方便分析代码。在功能区的第一行还根据你的选择，清晰的按子、父、根列出了当前源代码的层次（图 5-2 红色部分），单击各部分，则会即刻转到该部分的源代码。

 

Javascript的调试利器：Firebug使用详解(二)_职场_04

图 5-3

 

在源代码上移动鼠标，页面就会出现一个半透明的方块，指示当前鼠标所指源代码的显示区域，当选择。在图 5-4 中，鼠标正指向“ div1 ”，而在页面中“ div1 ”的显示区域上被一个半透明的方块遮盖了。

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

图 5-4

如果你把“ Inspect ”按钮按下，功能正好相反，在页面中移动鼠标，则当前显示区域的源代码会被加亮显示出来。在图 5-5 中，我们可以看到鼠标指针正指向“方块二”，而在源代码中可以看到，“方块二”的源代码“ <div id="div2"> 方块二</div> ”已被加亮显示（红色部分）。如果你单击某个显示区域，则该区域的源代码会被选中。

 

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

图 5-5

是不是很方便？方便是方便，但是我的源代码很多，而且有些区域在页面中不方便鼠标指定，怎么办？没关系，我们还有一个厉害武器，搜索功能。譬如我们知道某个 HTML Element 的 ID 是“ div2 ”，但在层层叠叠的源代码中不好找，在页面中鼠标也很难找到，那我们就在功能区的搜索框中输入“ div2 ”，再看看源代码区域，“ div2 ”被加亮显示出来了（图 5-6 红色部分）。在这个简单的例子可能看不出很好的效果，大家可以尝试一下把“ div1 ”先折叠起来，然后在搜索框输入“ div3 ”，你可以看到“ div1 ”会自动展开，并将“ div3 ”加亮显示，如果还觉得不够理想，可以找一个源代码比较多的例子测试一下。