FireBug使用方法

FireBug使用方法（一）
Javascript的调试，是开发Web应用尤其是AJAX应用很重要的一环，目前对Javascript进行调试的工具很多，我比较喜欢使用的是Firebug。Firebug是Joe Hewitt开发的一套与Firefox集成在一起的功能强大的web开发工具，可以实时编辑、调试和监测任何页面的CSS、HTML和JavaScript。

本文主要是为初学者介绍一下Firebug的基本功能与如何使用Firebug。由于本人水平与能力有限，在文章中的可能会有很多错误与遗漏，希望大家能谅解和指正！

1、安装

Firebug是与Firefox集成的，所以我们首先要安装的事Firefox浏览器。安装好浏览器后，打开浏览器，选择菜单栏上的“工具”菜单，选择“附加软件”，在弹出窗口中点击右下角的“获取扩展”链接。在打开的页面的search输入框中输入“firebug”。等搜索结果出来后点击Firbug链接（图1-1红色圈住部分）进入Firebug的下载安装页面。

在页面中点击Install Now（图1-2）按钮。

图1-2

在弹出窗口（图1-3）中等待3秒后单击“立即安装”按钮。

图1-3

等待安装完成后会单击窗口（图1-4）中的“重启 Firefox”按钮重新启动Firefox。

图1-4

当Firefox重启完后我们可以在状态栏最右边发现一个灰色圆形图标（），这就表示Firebug已经安装好了。灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。而绿色（）则表示Firebug已开启对当前网站进行编辑、调试和监测的功能。而红色图标（）表示已开启对当前网站进行编辑、调试和监测的功能，而且检查到当前页面有错误，当前图标表示有5个错误。

2、开启或关闭Firebug

单击Firebug的图标或者按F12键你会发现页面窗口被分成了两部分，上半部分是浏览的页面，下半部分则是Firebug的控制窗口（图2-1）。如果你不喜欢这样，可以按CTRL+F12或在前面操作后单击右上角的上箭头按钮，弹出一个新窗口作为Firebug的控制窗口。

图2-1

从图2-1中我们可以看到，因为我们开启Firebug的编辑、调试和监测功能，所以目前只有两个可以选择的链接：“Enable Firebug”与“Enable Firebug for this web site”。如果你想对所有的网站进行编辑、调试和检测，你可以点击“Enable Firebug”开启Firebug，则以后无论浏览任何网站，Firebug都处于活动状态，随时可以进行编辑、调试和检测。不过一般的习惯我们只是对自己开发的网站进行编辑、调试和检测，所以我们只单击“Enable Firebug for this web site”开启Firebug就行了。

开启Firebug窗口（图2-2）后，我们可以看到窗口主要有两个区域，一个是功能区，一个是信息区。选择功能区第二行的不同标签，信息区的显示会有不同，Options的选项也会不同，搜索框的搜索方式也会不同。

图2-2

要关闭Firebug控制窗口单击功能区最右边的关闭图标或按F12键就行了。如果要关闭Firebug的编辑、调试和监测功能，则需要单击功能区最左边的臭虫图标，打开主菜单，选择“Disable Firebug”或“Disable Firebug for xxxxx”。

3、 Firebug主菜单

单击功能区最左边的臭虫图标可打开主菜单（图3-1），其主要功能描述请看表1。

图3-1

菜单选项
说明

Disable Firebug 关闭/开启Firebug对所有网页的编辑、调试和检测功能

Disable Firebug for xxxxx
关闭/开启Firebug对xxxxx网站的编辑、调试和检测功能

Allowed Sites
设置允许编辑、调试和检测的网站

Text Size：Increase text size
增大信息区域显示文本的字号

Text Size：Decrease text size
减少信息区域显示文本的字号

Text Size：Normal text size
信息区域以正常字体显示

Options：Always Open in New Window
设置Firebug控制窗口永远在新窗口打开

Show Preview tooltips
设置是否显示预览提示。

Shade Box Model
当前查看状态为HTML，鼠标在HTML element标签上移动时，页面会相应在当前标签显示位置显示一个边框表示该标签范围。这个选项的作用是设置是否用不同颜色背景表示标签范围。

Firebug Website..
打开Firebug主页。

Documentation..
打开Firebug文档页。

Discussion Group
打开Firebug讨论组。

Contribute
打开捐助Firebug 页面。

表1

4、控制台（Console）

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

图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” 按钮可清除控制台的控制信息。

FireBug使用方法相关推荐

火狐浏览器Firefox Firebug使用方法
什么是Firebug 从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求.要写出漂亮的HTML代码:要编写精致的CSS样式表展示每个页面模块:要调试javascript给页面增加一些 ...
FireBug 使用方法详解！
什么是Firebug 从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求.要写出漂亮的HTML代码:要编写精致的CSS样式表展示每个页面模块:要调试javascript给页面增加一些 ...
unity 动画原动画返回_Unity3D 动画回调方法
最近发现很多coder.在用Unity开发游戏的时候都需要一个需求就是..动画播到某一帧就要干什么事情.而且希望能得到回调. 在unity里面的window菜单有个.Animation工具.打开它.然 ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）...
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
NO.55 网页中压缩的问题
以前写页面的时候,我从来没有关心过我写出来的html的大小的问题,我切的图片的大小问题,我之前觉得只要能做到和设计一样切出来页面来,能兼容浏览器就ok 这几天发现自己在这方面还是很多需要注意的首先, ...
公寓上网新认证方式破解研究
[分析客户端文件] 客户端有三个文件,一个.exe,一个.pid,一个Skin.7z.最后一个文件里都是皮肤.前两个文件的名字,以及第二个文件的内容都是一串相同的字符串,还不知道有什么意义. [分析日 ...
测试必用工具（测试工具知多少）
1. 功能需求工具描述/详细链接 json对比 json格式化在线工具http://tlrobinson.net/projects/javascript-fun/jsondiff/ 在线工具或 ...
在 Oracle Enterprise Linux 和 iSCSI 上构建您自己的 Oracle RAC 11g 集群
作者:Jeffrey Hunter 了解如何以低于 2,700 美元的费用在 Oracle Enterprise Linux 上安装并配置 Oracle RAC 11g 第 2 版开发集群. 本指南中 ...
Java面试题大全2021版
一.Java 基础 JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java Run ...

FireBug使用方法

FireBug使用方法相关推荐

最新文章

热门文章