火狐使用firebug_使用Firebug即时调试和优化应用程序

火狐使用firebug

Firebug是Mozilla Firefox浏览器的开源扩展，它为您提供工具来监视，编辑和调试任何网站的级联样式表（CSS），HTML，文档对象模型（DOM）和JavaScript。 它包括JavaScript控制台，日志记录API和有用的网络监视器。 使用Firebug，您可以轻松调试和调整Web和Ajax应用程序。

还有一个适用于Internet Explorer，Opera和Safari的Firebug Lite版本。

本文有助于您熟悉Firebug功能，这些功能可提供：

• 在实时网页上编辑HTML，CSS和JavaScript
• 调试和分析报告
• 记录执行时间
• 网络监视器，用于分析网页的加载时间
• 错误报告

入门

使用Firefox， 下载Firebug 。 通过单击页面右侧的橙色“ 安装Firebug”按钮来安装扩展。

Firefox安装扩展程序后，重新启动浏览器。 要使用Firebug，请执行以下操作：

1. 转到任何网页，然后按F12键在浏览器窗口中打开Firebug。
2. 按CTRL-F12在另一个窗口中打开Firebug（如果您有两个监视器，这是一个不错的功能）。

   本文使用第一个选项在同一浏览器窗口中打开Firebug，如图1所示：

图1.安装后的Firebug

安装后，将禁用Firebug。 单击Enable Firebug以查看实际运行情况，如图2所示：

图2. Firebug显示developerWorks的首页

本文的其余部分讨论了Firebug功能。

HTML和CSS工具

HTML和CSS工具包括：HTML检查和编辑，CSS编辑和CSS可视化。

检查和编辑HTML

您可以使用HTML检查功能在源代码中找到可见HTML。

1. 在Firebug窗口中，单击检查 。
2. 将光标移到任何HTML组件上方。 您应该在Firebug窗口中看到被蓝色矩形包围HTML元素和HTML源。 图3显示了一个示例：

   图3. Firebug检查HTML

   
3. 单击选定HTML元素，事情开始变得有趣起来。 这会将检查“锁定”到所选元素。
4. 您可以转到Firebug窗口，然后单击“ 编辑”以编辑选定的元素。

   图4显示了Firebug编辑窗口和浏览器窗口中的编辑文本。 “使用Firebug编辑”已取代了有关Ajax的原始标题。

   图4.编辑HTML

   

在检查元素时，您将在Firebug窗口中看到元素嵌套，如图5所示：

图5.元素嵌套

编辑CSS

您还可以通过检查网页来开始CSS编辑。 检查视图显示相关CSS条目，包括继承的样式。 图6显示了一个示例：

图6. CSS检查

CSS工具还允许您实时编辑CSS属性，禁用属性，自动完成和图像预览，如图7所示：

图7. CSS图像预览

可视化CSS

检查HTML时显示了CSS的可视化（请记住图3中的蓝色边框）。 Firebug的“布局”选项卡显示更多信息，例如填充，偏移和其他相关度量。 图8中的布局窗口显示了导航元素的尺寸：

图8. CSS盒子尺寸

图9显示了实时编辑CSS框的漂亮Firebug功能：

图9. CSS框编辑

JavaScript工具

如今，JavaScript工具是Web开发中一些最有用的工具。 Firebug提供调试，概要分析，日志记录和命令行控制台。

调试和分析

Firebug JavaScript工具包括断点，监视表达式以及典型调试器中的其他工具。 图10显示了断点和逐步执行。 注意主机名变量的值作为工具提示。

图10. JavaScript调试器

有用的调试工具包括：

• 直接导航到JavaScript中的特定行
• 监视表达式（可以是任何JavaScript表达式）
• 以可见格式调用堆栈
• 条件断点
• 发生错误后即可开始调试的能力

JavaScript分析非常有帮助。 像Firebug中的其他所有内容一样，配置文件易于使用。 在Console选项卡上，只需单击Profile，以启动Profiler，如图11所示：

图11.启动JavaScript Profiler

在开始分析之后，您可以浏览一下站点。 单击Profile，以获取您的简短概要分析会话的报告，如图12所示：

图12. JavaScript事件探查器报告

该报告显示了在这些功能上花费了多少时间，平均时间等。

登录JavaScript

如果您希望使用良好的旧日志记录而不是调试日志，则Firebug也可以提供日志记录。 记录使用Firebug JavaScript API。 最简单的日志条目是console.log("logging"); 。

控制台API包括其他功能，如清单1所示：

清单1. Firebug控制台API示例

console.time("test timer");
console.log("Hello from ",document.title);
console.info("This is info");
console.warn("This is warning");
console.error("This is error");
console.timeEnd("test timer");

您可以使用console.time和console.timeEnd来衡量执行时间。 console.profile()和console.profileEnd()可以在清单1中所示的详细报告中显示结果，也可以用来衡量执行时间。

图13显示了结果。 JavaScript控制台日志记录测试功能已添加到Web服务器提供的页面。

图13.控制台日志记录

控制台API中的其他有用功能是堆栈跟踪，对象检查和字符串格式。

JavaScript命令行

Firebug最强大的功能之一是JavaScript的命令行。 您可以像使用其他命令行一样使用命令行。 它会执行您编写的所有JavaScript，就像它是页面的一部分一样。 通过命令行，您可以检查DOM，获取属性等。 任何返回值都将显示在控制台上。

命令行具有自动补全功能（使用Tab键），用于编写全部功能而不是一个衬线的全文本编辑器，等等。 图14显示了一个简单的控制台会话。 请注意网页左上角的徽标。 这里也可以进行实时编辑。

图14.命令行JavaScript

与控制台一样，命令行也有一个API，其中包含与Firebug配合使用的特殊功能，例如$（id）返回具有给定id的元素。

网络监控

Firebug网络监视器功能使您可以监视加载网页时花费了多少时间。 使用“网络”选项卡查看显示相对于所有其他文件的文件开始和停止加载时间的栏。 网络监视器按文件分解流量，因此您可以查看花了多少时间加载图像，JavaScript，HTML等。 您还可以查看是否从浏览器缓存中加载了资源。

对于您的Ajax开发，Firebug在“网络”选项卡和“控制台”选项卡中都显示每个XMLHttpRequest。

图15显示了如何使用网络监视器检查HTTP请求和响应头。 要查看HTTP标头，只需单击每个请求左侧的箭头以将其展开。 总请求数，经过时间和内容大小显示在Firebug窗口的底部。

图15.网络监视器

其他特性

developerWorks Ajax资源中心
查看您的一站式商店Ajax资源中心 ，以获取有关Ajax编程模型的信息，包括文章和教程，讨论论坛，博客，Wiki，事件和新闻。 如果发生这种情况，将在此处进行介绍。

Firebug的其他功能包括：

错误报告

如果发生错误，Firebug提供了有用的功能：

• 状态栏指示器
• 行号，文件和堆栈跟踪
• 调试器集成
• 搜索和过滤

Firebug还显示仅与您正在查看的页面有关的错误。

DOM

文档对象模型是Web页面中对象和功能的层次结构。 Firebug DOM包括所有自定义和标准对象，而DOM Explorer可以区分它们。 您还可以执行JavaScript代码导航，自动补全和实时编辑。

客制化

Firebug的自定义功能包括黑名单和白名单，并可以根据个人需要更改字体大小。

摘要

Firebug是进行任何类型的Web开发的任何人的必备工具。 测试和调试会话将变得更加容易。 Firebug还是调整CSS样式以及网页外观的好工具。

---

翻译自: https://www.ibm.com/developerworks/web/library/wa-aj-firebug/index.html

火狐使用firebug