前沿浏览器及其开发工具

浏览器领域正处于一个火热的时期。尽管早上出现了一些问题，但 Firefox 3 发布时仍获得了超过 800 万次下载。现在已经超过 2400 万次了。我敢肯定，你们很多人都在这些下载者中，我知道我就在其中 =)

我敢肯定，你们很多人都在 Firefox 中进行网页设计和开发。在 Firefox 中，事情似乎总是按预期进行。此外，它还拥有大量宝贵的开发工具，如 Web Developer 工具栏和 Firebug。如果您从未听说过或目前未使用 Firebug，我制作了一个关于它的 入门屏幕录制，您可以查看一下。

能够在网页渲染后查看和操作整个 DOM 非常强大。我不确定 Firebug 是否是第一个创建的用于执行此操作的工具（我怀疑不是），但它肯定普及了这种操作。它**的工作方式**，作为浏览器本身的一部分，开启了浏览器特定开发工具的新范式。让我们看看所有浏览器及其最新的产品。

Firefox 3 和 Firebug 1.2

这里无需多说，这个标准组合拥有所有正确的东西。错误捕获、易于使用的“检查”选项，可深入钻取代码，查看您需要看到的内容、性能测试、完整 DOM 视图、实时编辑、控制台……

您可以从常规的 Mozilla 下载页面 获取 Firefox 3。为了使 Firebug 与 Firefox 3 兼容，您需要最新的 Beta 版本 Firebug 1.2，仅可从 Firebug 发布页面 获取。

 

Opera 9.5 和 Dragonfly

无需单独下载，Opera 9.5 自动捆绑了 Dragonfly 开发工具。通过转到工具 > 高级 > 开发者工具来激活。

与 Firebug 非常相似，调试菜单从浏览器窗口底部弹出，但可以选择分离。您可以查看完整的 DOM，并且它支持“通过点击查找元素”，这非常有用。您还可以查看“完整的计算样式”以及应用于该元素的 CSS 规则。被覆盖的规则也会显示，只是颜色变灰。其他类似 Firebug 的功能包括错误控制台和“布局视图”，后者显示元素的宽度/高度、填充、边框、边距。

Dragonfly 非常新，我觉得它还需要一段时间才能达到 Firebug 的质量和易用性，但它确实提供了一些独特的引人注目的功能。首先，我们不能忘记提到这个工具的存在本身就极大地帮助我们专门针对 Opera 进行故障排除。Firebug 当然无法做到这一点。其次，Dragonfly 是一个“混合应用程序”，这意味着它部分是 Web 应用程序，部分是桌面应用程序。它驻留在本地存储中，但在有新版本时会立即更新，无需手动下载新版本。第三，Opera 在移动浏览器中拥有相当大的市场份额。您可以将移动设备连接到计算机并使用计算机屏幕进行调试，我认为这对移动故障排除非常有用。第四，Javascript 调试包括逐步模式，我可以想象这将非常有用。

Dragonfly 目前缺少一些重要的功能，例如实时编辑 CSS。此功能计划在即将推出的 Alpha 2 中提供。

 

Internet Explorer 8 和开发者工具

IE 8 Beta 捆绑了已安装的开发者工具。如果您安装了 IE 7，也可以获取 IE 开发者工具栏。我发现 IE 7 下的 IE 开发者工具栏存在错误，因此选择使用 DebugBar，它提供了大致相同的功能。我想当 IE 8 正式发布时，开发者工具将是单独下载的。

我认为开发者工具中的“通过点击选择元素”功能运行得相当不错，但仍然无法与 Firebug 相提并论，后者只需在屏幕周围移动鼠标即可突出显示不同的元素。样式查看器有点复杂，因为它按样式规则继承的位置进行分组，从最顶层的父元素开始。我觉得这有点反直觉，因为大多数规则都被覆盖了很久。您也不能实时编辑它们，这很遗憾，但您至少可以通过单击来打开或关闭各个规则，这非常有帮助。

与 Dragonfly 类似，这个工具的存在本身就极大地帮助了需要在 IE 中进行故障排除和调试的设计师和开发人员。是的，此工具中甚至还有 javascript 调试工具（具有断点等简洁的功能）。请记住，Windows 系统一次只能安装一个版本的 IE，因此，如果您升级到 IE 8，则您的常规 IE 7 版本将消失。不过，IE 8 可以“模拟 IE 7”，因此您不会完全失去方向。

要测试多个版本的 IE（尽管没有开发者工具），您应该查看 IE Tester。

Safari 4（开发者预览版）和 Web Inspector

当前的 Safari（3）公开版本将一些非常酷的工具作为 Web Inspector 的一部分。用于查看页面不同元素加载时间的可视化工具首屈一指。但是，Safari 4（开发者预览版）（可供 ADC 成员免费下载）拥有更多更棒的开发者工具。如果您想查看它，只需免费注册，然后转到 ADC 网站的“下载”部分。

Web Inspector 绝对是这里介绍的所有开发者工具中最炫酷的。它具有非常漂亮的代码突出显示功能，并且所有内容的外观和功能都非常流畅和干净。在使用 IE 开发者工具后，感觉就像一股清新的空气。值得注意的是，Web Inspector 缺少任何清晰的“点击以选择”您尝试进行故障排除的页面元素的方式。我想有人曾经告诉我有一种方法，但我后来忘记了，也找不到它。也许是我在做白日梦。但是，您可以点击代码中的元素，并在浏览器窗口中看到它们高亮显示。

实时 CSS 编辑**可用**，这很好，但您可以像使用 Firebug 或 IE 开发工具一样轻松地“关闭”样式。布局视图（称为“指标”）可用于显示计算宽度和填充等的视觉效果。脚本调试也存在，还有一个真正的实时命令行控制台，这很酷。右下角的图标直接来自 Firebug，但对于立即警告您页面错误非常有用。

 

观点

是否有人将这些工具全职用于调试？我确定您可以看出我本人是 Firebug 的忠实用户，但我非常高兴我们为所有主要浏览器都拥有如此强大的调试工具，以防我们需要进行浏览器特定的故障排除（例如，嗯，一直都在进行）。

如果您在使用这些工具方面有更丰富的经验，请随时分享您的想法。