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

Firefox的新web开发者特性，结合Firebug和web开发者工具栏等优秀的web开发者插件，使Firefox成为web开发者的理想浏览器。所有工具都可以在Firefox菜单的WebDeveloper下找到。

页面检查器

通过右键单击特定图元并选择“检查”（或按Q键）来检查该图元。也可以从“Web开发人员”菜单启动检查器。

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

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

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

html检查器

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

HTML检查器允许您展开和折叠HTML标记，使其易于可视化。如果要在平面文件中查看页面的HTML，可以从“Web开发人员”菜单中选择“查看页面源”。

css检查器

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

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

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

javascript草稿行

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

一旦有，单击执行菜单并选择Run。代码运行在当前选项卡中。

web控制台

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

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

什么是web开发人员消息？这是一条印在报纸上的信息窗口控制台对象。例如，我们可以运行window.c***ole.log日志（“Hello World”）；Scratchpad中的JavaScript代码，用于将开发人员消息打印到控制台。Web开发人员可以将这些消息集成到JavaScript代码中，以帮助进行调试。

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

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

从firefox10开始，Web控制台可以与页面检查器协同工作。$0变量表示检查器中当前选定的对象。例如，如果要隐藏当前选定的对象，可以运行$0。样式.显示=控制台中的“无”。

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

获取更多工具

“获取更多工具”选项会将您带到Mozilla加载项网站上的Web开发人员工具箱加载项集合。它包含一些最适合web开发人员的插件，包括Firebug和web开发人员工具栏。

如果您已经使用Firefox几年了，您可能还记得DOM检查器。从那时起，Firefox的集成开发工具已经取得了长足的进步。