FireFox正因为提供了大量的开发辅助功能而成为“开发者的浏览器”。你可以在火狐开发者工具页面找到大量的开发者工具，也可以直接下载浏览器的开发者版，它直接集成了这些开发者工具。在本文中，我列出了FireFox开发人员工具中我最喜欢的10个工具，并通过一个简短的示例告诉您如何使用它们。1.显示标尺FireFox提供了一个标尺工具，可以以像素为单位显示水平和垂直标尺。此工具对您布局页面元素非常有用。可以通过菜单项?>Developer>DeveloperToolbar（快捷键：Shift+F2）显示工具栏，然后输入标尺，回车，标尺就会显示出来。如果想让标尺按钮显示在工具栏中，可以勾选“工具箱选项”中“可用工具箱按钮”下的“为页面切换标尺”复选框。2、通过CSS选择器进行局部截图虽然Firefox在工具栏上提供了截图工具（可以截取当前窗口区域或者整个页面），但是我觉得基于CSS选择器的局部截图更加实用。你可以通过菜单项?>开发者>开发者工具栏（快捷键：Shift+F2）来显示工具栏，然后输入screenshot--selectorany_unique_css_selector回车，你截取的内容就可以下载了。还要选中“工具箱选项”中“可用工具箱按钮”下的“截取全页屏幕截图”复选框，以在工具栏上显示此按钮。3.在页面上选择一种颜色Firefox有一个内置的颜色选择器，并将其命名为“Eyedropper”。您可以通过菜单项?>Developer>Eyedropper调用它。勾选“工具箱选项”中“可用工具箱按钮”下的“从页面中抓取颜色”复选框，以在工具栏上显示此颜色选择器按钮。4.显示页面3D布局将页面显示为3D可以有效的帮助我们解决布局问题。在3D视图中，您可以更清楚地看到不同层上的元素。直接单击工具栏上的“3D视图”按钮可显示3D视图。选中“工具箱选项”中“可用工具箱按钮”下的“3D视图”复选框，以在工具栏上显示此3D视图按钮。5.显示浏览器样式浏览器样式由两种类型组成：浏览器为每个元素添加的默认样式和浏览器特定样式（它们会携带浏览器的前缀信息）。通过查看浏览器样式，您可以诊断自定义样式中的样式覆盖问题以及浏览器兼容性问题。您可以通过菜单项?>Developer>Inspector执行此操作，然后选择“Computed”选项卡，并选中“Browserstyles”复选框。也可以通过快捷键Ctrl+Shift+C打开“检查器”面板，然后勾选“浏览器样式”复选框。6.禁用当前会话的JavaScript基于最佳实践和屏幕阅读器支持的考虑，我们开发的网站页面不应因为未调用JavaScript而破坏原始内容。所以你需要测试你的网页在禁用JavaScript的情况下是否仍然可以正常工作。要为整个会话禁用JavaScript，请选中“工具箱选项”中“高级设置”下的“禁用JavaScript*”复选框。7.禁用样式表和禁用JavaScript一样的道理，你的页面内容也应该能够在不加载任何样式表的情况下正常显示。您可以在开发者工具中禁用样式表来检查页面内容是否仍然完整可读。在“样式编辑器”面板中，单击样式表前面的眼睛图标可以隐藏这些样式表（包括内联、内部或外部），再次单击可以恢复样式表应用。您可以通过菜单项?>开发人员>样式编辑器（快捷键：Shift+F7）调用样式编辑器。8、查看请求对应的返回HTML内容Firefox开发者工具提供了一个选项，可以以HTML形式查看请求对应的服务器响应内容。这可以帮助开发者查看所有的302重定向，检查返回的内容是否包含敏感信息。可以通过菜单项?>开发者>网络（快捷键：Ctrl+Shift+Q）打开网络面板，然后重新加载当前页面，所有请求会以列表的形式显示在面板中，您可以选择任意一个请求，然后点击“Preivew”选项卡，就会显示响应内容。9、查看不同设备尺寸的网页要测试一个网页是否支持响应式布局，并能在各种尺寸的设备中正常浏览，我们可以使用“响应式设计视图”。通过菜单项?>Developer>ResponsiveDesignView打开这个视图（快捷键：Ctrl+Shift+Q）。也可以在“工具箱选项”中勾选“高级设置”下的“响应式设计模式”复选框，使这个按钮出现在工具栏上。10.在页??面中运行JavaScript如果你想在任何页面上快速执行JavaScript脚本，你可以使用Firefox的“Scratchpad”工具。通过菜单项?>Developer>Scratchpad打开这个视图（快捷键：Ctrl+F4）。也可以勾选“工具箱选项”中“高级设置”下的“便签本”复选框，使该按钮出现在工具栏上。【本文为专栏作者“陈义和”原创文章，如需转载请联系作者（微信♂：techmask）】点此查看本作者更多好文
