Firefox的Web Developer菜单包含用于检查页面、执行任意JavaScript代码以及查看HTTP请求和其他消息的工具。Firefox10添加了一个全新的Inspector工具，并更新了Scratchpad。

Firefox的新Web开发者功能，再加上Firebug和Web Developer Toolbar等令人敬畏的Web开发者插件，使Firefox成为Web开发者的理想浏览器。所有工具都可以在Firefox菜单中的Web developer下找到。

页面检查器

通过右键单击特定元素并选择检查(或按Q键)来检查该元素。您还可以从Web Developer菜单启动Inspector。

您将在屏幕底部看到一个工具栏，您可以使用它来控制检查器。您选择的元素将突出显示，页面上的其他元素将变暗。

如果要选择新元素，请单击工具栏上的检查按钮，将鼠标悬停在页面上，然后单击您的元素。Firefox高亮显示光标下的元素。

您可以通过单击工具栏上的面包屑在父元素和子元素之间导航。

HTML检查器

单击HTML按钮可查看当前选定元素的HTML代码。

HTML检查器允许您展开和折叠HTML标记，使其易于一目了然。如果要在平面文件中查看页面的HTML，可以从“Web Developer”菜单中选择“查看页面源代码”。

CSS检查器

单击样式按钮可查看应用于所选元素的CSS规则。

还有一个CSS属性面板-通过单击Rules和Properties按钮在两者之间切换。为了帮助您查找特定属性，属性面板包括一个搜索框。

您可以从“规则”面板中动态编辑元素的CSS。取消选中任何复选框可停用规则，单击文本可更改规则，或将您自己的规则添加到窗格顶部的元素。在这里，我添加了font-weight：bold；CSS规则，将元素的文本设置为粗体。

JavaScript ScratchPad

Scratchpad还看到了Firefox10的更新，现在包含语法突出显示。您可以键入要在当前页面上运行的JavaScript代码。

完成后，单击Execute(执行)菜单并选择Run(运行)。代码在当前选项卡中运行。

Web控制台

Web控制台取代了旧的Error控制台，后者已被弃用，并将在未来的Firefox版本中删除。

控制台显示四种不同类型的消息，您可以切换其可见性-网络请求、CSS错误消息、JavaScript错误消息和Web开发人员消息。

什么是Web开发人员的信息？这是一条打印到window.console对象的消息。例如，我们可以运行Scratchpad中的window.console.log(“Hello World”)；JavaScript代码，将开发人员消息打印到控制台。Web开发人员可以将这些消息集成到他们的JavaScript代码中以帮助调试。

刷新页面，您将看到生成的网络请求和其他消息。

使用搜索框筛选邮件；如果要查看更多详细信息，请单击请求。

从Firefox10开始，Web控制台可以与页面检查器协同工作。$0变量表示检查器中当前选定的对象。因此，例如，如果您想隐藏当前选择的对象，可以在控制台中运行$0.style.display=“None”。

如果您有兴趣了解有关使用控制台及其内置函数的更多信息，请查看Mozilla开发人员网络网站上的Web控制台页面。

获取更多工具

Get More Tools选项会将您带到Mozilla Add-ONS网站上的Web Developer‘s Toolbox Add-on集合。它包含一些最适合Web开发人员的附加组件，包括Firebug和Web Developer Toolbar。

如果您已经使用Firefox几年了，您可能还记得DOM Inspector。从那时起，Firefox的集成开发工具已经走过了很长一段路。