文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

B.2 主面板简介

发布于 2024-08-20 01:10:33 字数 14682 浏览 0 评论 0 收藏 0

安装完成后，在Firefox浏览器的地址后方就会有一个小虫子的图标。单击该图标后即可展开Firebug的控制台，也可以通过快捷键<F12>来打开控制台。如果有多个显示器或者屏幕比较大，需要Firebug能够独立打开一个窗口而不占用Firefox页面底部的空间，可以用通过快捷键Ctrl+F12来呼出独立的Firebug窗口。如图B-3所示。

图B-3　Firebug面板

从图B-3中可以看出，Firebug总共包含6个面板，分别是控制台、HTML、CSS、脚本、DOM和网络。

　控制台面板

用于记录日志、概览、错误提示和执行命令行，同时也用于Ajax的调试。

　HTML面板

用于查看HTML元素，可以实时地编辑HTML和改变CSS样式。它包含3个子面板，分别是样式、布局和DOM面板。

　CSS面板

用于查看所有页面上的CSS文件，可以动态地修改CSS样式。由于HTML面板中已经包含了一个CSS面板，因此该面板将很少用到。

　脚本面板

用于显示JavaScript文件及其所在的页面。也可以用来显示JavaScript的Debug调试，包含3个子面板，分别是监控、堆栈和断点。

　DOM面板

用于显示页面上的所有对象。

　网络面板

用于监视网络活动。可以帮助查看一个页面的载入情况，包括文件下载占用的时间和文件下载出错等信息，也可以用于监视Ajax行为。

B.2.1　控制台面板

1．控制台面板概览

此面板可以用于记录日志，也可以用于输入脚本的命令行。

2．记录日志

Firebug提供如下几个常用的记录日志的函数。

console.log：简单的记录日志。

console.debug：记录调试信息，并且附上行号的超链接。

console.error：在消息前显示错误图标，并且附上行号的超链接。

console.info：在消息前显示信息图标，并且附上行号的超链接。

console.warn：在消息前显示警告图标，并且附上行号的超链接。

在空白的html页面中，向<body>标签里加入<script>标签，代码如下：

执行代码后可以在Firebug中看到图B-4所示的效果。

图B-4　执行后的效果

以前习惯了使用alert来调试程序，然而在Firebug下可以使用console。

3．格式化字符串输出和多变量输出

这个功能类似于C语言中的语法，可以在console记录日志的方法里使用。

	%s：	字符串。
	%d, %i：	数字。
	%f：	浮点数。
	%o：	链接对象。

同时，这几个函数支持多个变量。代码如下：

运行代码后，效果如图B-5所示。

图B-5　console.log运行效果

Firebug控制台还提供了其他功能，例如检测函数执行时间、消息分组、测试驱动、跟踪、计数以及查看JavaScript概况等。更多资料可以访问网址：http://getfirebug.com/logging。

4．面板内的子菜单

在图B-5中，在控制台面板内有一排子菜单，分别是清除、保持、概况、所有等。

清除用于清除控制台中的内容。保持则是把控制台中的内容保存，即使刷新了还在。所有则是显示全部的信息。后面的错误，警告，消息，调试信息菜单则是对所有进行了一个分类。

概况菜单用于查看函数的性能。通过一个例子来演示这个功能，HTML代码如下：

打开页面后，先启用Firebug控制台面板，然后单击概况菜单，如图B-6所示。

图B-6　单击概况菜单后

从上图中可以看到，Firebug中出现一行字，即概况收集中。再次单击概况查看结果。接着，单击执行循环1按钮1次，执行循环2按钮2次，执行循环3按钮3次，并再次单击概况菜单，即可看到图B-7所示的效果。

图B-7　再次单击概况菜单后

可以看到Firebug显示出了非常详细的报告。包括每个函数的函数名、调用次数，占用时间的百分比、占用时间、时间、平均时间、最小时间、最大时间以及所在文件的行数等信息。

5．Ajax调试

控制台面板也可用于Ajax的调试，在一定程度上可以取代网络面板。这一段涉及Ajax交互，故引入了jQuery库。同时由于本地环境下Ajax创建的XMLHttpRequest对象无法跨域访问到网络的资源，因此需要搭建服务器环境。代码如下：

直接单击进行Ajax传递按钮，即可在Firebug的控制台中看到本次Ajax的HTTP请求头信息和服务器响应的头信息，如图B-8所示。它会显示出本次使用Ajax的GET方法、地址、耗时以及调用Ajax请求的代码行数。最重要的是有4个标签页，即参数、头信息、响应、HTML。第1个标签用于查看传递给服务器的参数；第2个标签用于查看响应头信息和请求头信息；第3个标签用于查看服务器返回的内容。第4个标签则是查看服务器返回的HTML结构。进行Ajax交互编程时，以上功能是非常有用的。读者可以尝试改变文本框中传递的参数，再次单击进行Ajax传递按钮，观察Firebug中的变化。

如果看不到任何信息出现，可能是将此功能关闭了，可以单击控制台旁边的下拉箭头，将显示XMLHttpRequests前面的勾勾选上，如图B-9所示。

图B-8　Ajax请求信息

图B-9　显示XMLHttpRequests

B.2.2　HTML面板

1．查看和修改HTML代码

HTML面板的强大之处就是能查看和修改HTML代码，而且这些代码都是经过格式化的。编写如下的代码来讲解该面板。

在Firebug中切换到HTML面板，可以看到图B-10所示的页面。

图B-10　初始化效果

在HTML控制台的左侧可以看到整个页面当前的文档结构，可以通过单击+来展开。当单击相应的元素时，右侧面板中就会显示出当前元素的样式、布局以及DOM信息。而当光标移动到HTML树中相应元素上时，上面页面中相应的元素将会被高亮显示。例如将光标移动到<form>标签上时，显示效果如图B-11所示。

图B-11　将光标移动到form元素上后

在页面中蓝色部分表示元素本身，紫色表示padding部分，而黄色表示margin部分。同时可以实时地添加、修改和删除HTML节点以及属性，如图B-12所示。另外，单击script节点还可以直接查看脚本，此处的脚本无论是内嵌在HTML中还是外部导入的，都可以查看到。同样这也适用于<style>标签内嵌或者导入的CSS样式和动态创建的HTML代码。

2．查看（Inspect）

利用查看（Inspect）功能，可以快速地寻找到某个元素的HTML结构，如图B-13所示。

图B-12　实时编辑HTML元素

图B-13　查看（Inspect）功能

例如当单击Inspect按钮后，用鼠标在网页中选中一个元素时，元素会被一个蓝色的框框住，同时下面的HTML面板中相应的HTML树也会展开并且高亮显示。再次单击后即可退出该模式，并且底部的HTML树也保持在这个状态。通过这个功能，可以快速寻找页面内的元素，调试和查找相应代码非常方便。刷新网页后，页面显示的仍然是用Inspect选中的区域。

HTML面板下方的编辑按钮可以用于直接编辑选中的HTML代码，而后面显示的是当前元素在整个DOM中的结构路径。

3．查看DOM中被脚本更改的部分

通过JavaScript来改变样式属性的值可以完成一些动画效果。例如提供例子中的暗箱操作例子，打开页面后，可以利用查看（Inspect）功能来选择相应的HTML代码。例如选中例子的中间区域，如图B-14所示。

图B-14　选择页面中的元素

单击代码前面的+号，可以将代码展开。展开代码如图B-15所示。

当第1次单击向右的按钮后，会出现图B-16所示的效果。

通过上图可以看出，HTML查看器会将页面上改变的内容也记录下来，并以黄色高亮标记。有了这个功能，网页的暗箱操作将彻底成为历史。笔者经常利用该功能查看其他网站的动画效果是如何实现的。

4．查看和修改元素的样式

在右侧的样式面板中，展示了此元素当前所有的样式。所有样式都可以实时地禁用以及修改，如图B-17所示。通过在padding:10px 8px前单击就可以禁用此规则，通过直接在样式上value值上单击就可以修改。

单击布局面板即可看到此元素具体的布局属性，这是一个标准的盒模型。通过布局面板，可以很容易地看到元素的偏移量、外边距、边框、内边距和元素的高度、宽度等信息，如图B-18所示。

图B-15　展开的代码

图B-16　单击向右按钮后

图B-17　在样式面板中可以禁用、修改和添加样式

5．查看DOM的信息

单击DOM面板后可以看到此元素的详细的DOM信息以及函数和事件，如图B-19所示。

图B-18　在布局面板中可以查看某元素具体的布局属性

图B-19　在DOM面板中可以查看某元素的详细DOM信息

B.2.3　CSS、DOM和网络面板

这3个面板相对于前面2个面板比较次要，CSS和DOM面板与HTML面板中右侧的面板功能相似，但不如HTML面板灵活，因此一般使用得很少。

CSS面板特有的一个功能就是可以分别详细查看页面中内嵌以及动态导入的样式。例如firebug6.html，可以在Firebug中看到图B-20所示的效果。

单击CSS面板后就可以分别查看相应的样式。此处展示的样式都是经过格式化的，适合于学习CSS的代码格式和规范。

而在网络面板中，相对有一些强大的功能。例如打开Google网站中国首页，Firebug显示效果如图B-21所示。

图B-20　在CSS面板中选择样式

图B-21　网络面板概览

该页面可以监视每一项元素的加载情况，包括脚本，图片等的大小以及加载用时等，对于页面优化有着极其重要的意义。

此外顶部还可以分类查看元素的HTML、CSS、JS等的加载情况，使分析更加灵活。

B.2.4　脚本面板

脚本面板不仅可以查看页面内的脚本，而且还有强大的调试功能。

图B-22　脚本面板右侧的3个面板

在脚本面板的右侧有监控、堆栈和断点3个面板，利用Firebug提供的设置断点的功能，可以很方便的调试程序。如图B-22所示。

1．静态断点

例如firebug7.html，其HTML代码如下：

运行代码后可以看到图B-23所示的效果。图中加粗并有颜色的行号表示此处为JavaScript代码，可以在此处设置断点。

图B-23　脚本面板

比如，我们在第7行这句代码前面单击一下，那么它前面就会出现一个红褐色的原点，表示此处已经被设置了断点。此时，在右侧断点面板中的断点列表中，就出现了刚才设置的断点。如果想暂时禁用某个断点，可以在断点列表中去掉某个断点前面的复选框里的钩，那么此时左侧面板中相应的断点就从红褐色变成了红灰褐色。如图B-24所示。