FireBug图文详解

╰+攻爆jí腚メ 2022-08-24 14:18 170阅读 0赞

Firebug是firefox下的一个插件,能够调试所有网站语言，如HTML、CSS等，但FireBug最吸引我的就是javascript调试功能，使用起来非常方便，而且在各种浏览器下都能使用。

Firefox的主要菜单选项有控制台、HTML、CSS、脚本、DOM、网络六个，Firebug从各个不同的角度剖析Web页面内部的细节层面，上述功能的配合使用能够满足网页设计的各项要求。

**Firebug插件展开图示**

> > > > > ![SouthEast][]

## 1、控制台（console）功能： ##

启用此标签后界面如下：

> > ![SouthEast 1][]

**    作用：**显示网页各类错误信息，并可对日志进行打印处理。

**    特色：**

> 1.  详细提示错误：显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试。
> 2.  查看AJAX黑幕：调试Ajax时，能看到每一个XMLHttpRequests请求post出去的参数、 URL、http头以及回馈的内容，原本幕后运作的程序展示在面前。
> 3.  查看运行信息：可以查看变量内容及JAVASCRIPT中运行期的信息。
> 4.  查看脚本的log：Firebug的日志输出有多种格式及语法，还可定制彩色输出，比起单调的alert，显然更加方便。

## 2、HTML功能 ##

> 启用此标签后界面如下：

> > ![SouthEast 2][]

> **作用：**用于查看当前页面的源代码功能，并可进行编辑，时时显示，从而实现页面最佳效果。
> 
> **特色：**

> 1.  结构清晰：经过格式化的HTML代码，具有清晰的层次，可以清晰范编程标签之间的从属关系，
> 2.  标识DOM层次，如图所示清晰列出HTML元素的parent、child、root元素，配合CSS查看器更见边界的分析页面的DIV+CSS。
> 3.  直接修改，实时显示：可以在HTML查看器中直接修改HTML源代码，并且浏览器中第一时间看到修改后的效果。
> 4.  高亮显示页面内容改变：若HTML页面元素的样式或背景色被改变，将以黄色高亮显示。
> 5.  所见即所得：利用Inspect检查功能，用鼠标选定页面的某块区块，即可查看相应的HTML源代码和CSS样式表。
> 6.

**3、CSS功能**

> 启用此标签后界面如下：

> >  ![SouthEast 3][]

> **作用：**如今网页多采用CSS+DIV，其中DIV可以精简HTML代码，CSS用于控制页面样式。CSS标签，用于查看所有的CSS定义信息，同时可编辑达到修改页面样式的效果。
> 
> **特色：**

> > 1.  自下向上列出每一个 CSS样式表的从属继承关系
> > 2.  以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中 直接看到修改后的结果。
> > 3.  典型应用：根据需要随意挪动像素。
> > 4.  智能提示：通过上下方向键查看常用样式表属性的值。

## 4、脚本（Javascript）功能： ##

> 启用此标签后界面如下：

> > ![SouthEast 4][]

> **作用：**脚本调试器，麻雀虽小，五脏俱全。 
> 
> **特点：**
> 
> > 1.  脚本调试：包含：单步调试、设置断点、变量查看窗口……
> > 2.  统计脚本运行时间：通过右边的监控功能来实现脚本运行时间的查看和统计，提高运行效率。

## 5、DOM功能： ##

> 启用此标签后界面如下：

> > ![SouthEast 5][]

> **作用：**用于查看页面DOM信息，通过提供的搜索功能实现DOM的快速准确定位，并可双击来实现DOM节点属性或值的修改。
> 
> **特色：**

> 1.  1.  快速定位DOM对象：DOM(Document Object Model)里头包含了大量的Object以及函数、事件，通过搜索快速定位DOM对象，方便地浏览DOM的内部结构。
>     2.  双击DOM对象，可编辑变量或值。
>     3.  自动完成功能：当你输入document.get之后，按下tab键就能补齐为 document.getElementById。按下shift+tab又会恢复原状
>     4.  找寻驱使对象：找寻javascript的驱使对象

## 6、网络（Net）功能： ##

> 启用此标签后界面如下：

> > ![SouthEast 6][]

> **作用：**用来监控网页各组成元素的运行时间的信息。
> 
> **特色：**揪出拖慢网络元凶：将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来。

“理论”只是基础，“实践”才是硬道理。FireBug会成为你爱不释手的一款插件。

[SouthEast]: /images/20220824/62985a7b32af4be781ccea33d509878a.png
[SouthEast 1]: /images/20220824/5a18b8bab2f04805aa6631e67e81a7d7.png
[SouthEast 2]: /images/20220824/8ebdec637d32466ca8aac18cb854b101.png
[SouthEast 3]: /images/20220824/ccc8d15e43524b81ad725a8040a819b5.png
[SouthEast 4]: /images/20220824/108213e60c3c4c049ad52ad15a3057bc.png
[SouthEast 5]: /images/20220824/f409c10566c34e5fa7cfc3c657278441.png
[SouthEast 6]: /images/20220824/96d82370389a4863a30ea4416c0a8907.png