你需要知道的关于 Firefox 开发者工具的一切

已发表: 2015-05-18

Firefox 开发者版是为开发者量身打造的 Firefox 特殊版本。 它具有所有最新的 Firefox 功能以及许多专业的开发人员工具。 在这里，我将提供有关其功能的指南，以便您了解有关 Firefox 开发人员工具的所有信息。

用户界面火狐开发者工具

安装 Firefox Developer Edition 后，您会注意到它与标准的 Firefox 工具栏略有不同。 Firefox 在设计工具栏时无疑采用了更加以开发人员为中心的方法，使其外观更窄，默认情况下装饰有更多按钮。

Firefox 开发者工具的默认主题是深色的，这很可能是用户测试的结果。 但是，如果您不喜欢深色主题，您始终可以通过转到Menu > Customize来关闭开发者版主题。

创建工具

Firefox Developer Edition 附带了许多创建工具，这些工具是为那些创作网站和 Web 应用程序的人设计的。 下面我提供了工具及其优点的概述，因此您不必去搜索这些信息。

便笺

便签本屏幕截图

该工具为 Web 开发人员提供了试验 JavaScript 代码的机会。 在 Scratchpad 提供的环境中，您可以编写、运行和检查与当前页面交互的代码的结果。

要打开 Scratchpad，只需按 Shift F4 或转到 Web Developer 菜单并单击 Scratchpad。 这将打开您可以编写代码的窗口。 完成后，单击“执行”>“运行” ，代码将在当前选项卡中运行。

样式编辑器

样式编辑器使 Web 开发人员能够查看和编辑所有带有关联页面的样式表。 您还可以从头开始创建新样式表并将其应用到页面，以及导入现有样式表并将其应用到当前页面。

要打开样式编辑器，请转到 Web Developer 菜单并单击Style Editor 。 Firefox 开发人员工具箱将出现在浏览器底部，样式编辑器可供使用。

着色器编辑器

在 Firefox 中使用着色器编辑器很简单。 开发人员可以完全查看和编辑 WebGL 使用的片段着色器和顶点。 对于那些不知道的人来说，很快，WebGL 智能地使用 JavaScript（通过 API）直接通过 Firefox 浏览器渲染 2D 和 3D 图形，而无需使用插件。

为了使用着色器编辑器，需要先启用它。 为此，请转到工具箱设置，然后选中“着色器编辑器”旁边的框。 着色器编辑器将显示在 Firefox 工具栏中。 单击它，您将能够打开它。

网络音频编辑器

Web Audio Editor API 使开发人员能够创建音频上下文。 开发人员需要创建音频节点，提供：

  • 音频源
  • 执行转换的节点
  • 表示为音频流选择的目的地的音符。

网络音频编辑器将检查页面的音频方面并在图表中提供它的可视化表示。 这使开发人员能够检查功能和操作，并检查所有节点是否正确连接。 开发人员可以编辑和检查 AudioParam 节点属性以及其他属性。

与着色器编辑器一样，网络音频编辑器必须手动启用并且不是默认设置。 启用很简单：只需返回开发人员工具设置，然后选中“Web 音频”旁边的框。 然后，您将看到 Firefox 工具箱工具栏中显示了一个附加选项卡。 只需单击此选项卡，就会加载一个页面，您可以从中构建音频上下文。

调试工具

Firefox 的调试工具旨在检查、探索和调试网站和 Web 应用程序。 下面我概述了其中一些工具的主要功能及其优点。

页面检查器

Page Inspector 工具使开发人员能够检查和编辑网页的 HTML 和 CSS 编码。 使用此工具，开发人员可以通过本地加载的版本或通过远程目标调查页面。

打开页面检查器很容易。 如果您选择了一个元素，您只需右键单击该元素，然后选择“检查元素”。 或者，您可以转到 Web Developer Menu，然后单击 Inspector 选项。 然后页面检查器将出现在浏览器的底部。

网络控制台

此工具记录与网页相关的所有信息，例如网络请求、JavaScript、CSS、安全错误和警告、错误警告和信息性消息。 它还使您能够使用 JavaScript 与网页交互。

Web 控制台旨在取代旧的错误控制台，后者最初是 Firefox 开发人员工具的一部分。 虽然错误控制台提供了来自多个页面的大量错误列表，但 Web 控制台只会显示与特定网页相关的信息，因此更有用。

要打开 Web 控制台，请转到 Firefox 菜单中的 Web 开发人员子菜单，然后单击“Web 控制台”。 您也可以使用快捷键 Ctrl Shift K。工具箱将出现在浏览器底部，并激活“控制台”。

调试器

Firefox Debugger 工具为 Web 开发人员提供了检查和修改 JavaScript 代码的机会。 它还可以用于识别错误。 使用调试器，您可以在 Firefox 中本地调试代码，也可以在 Firefox OS 设备或 Firefox for Android 上远程调试代码。

要打开调试器，请转到 Firefox 主菜单中的 Web Developer 子菜单，然后单击“调试器”。 或者，您可以按 Ctrl Shift S，工具箱将出现在浏览器底部，调试器已激活并可供使用。

网络监视器

网络监视器旨在向您显示 Firefox 发出的所有不同网络请求、每个请求所需的时间以及每个请求的详细信息。 转到 Web 开发人员菜单 > 网络以激活该工具。 您需要刷新页面才能看到请求。

在网络监视器中，您将能够查看请求的时间线并按类型过滤内容。 还有一个性能分析工具，您可以使用它来查看浏览器下载网站不同部分所需的时间。 要运行此工具，只需单击网络监视器底部工具栏中的秒表图标。

存储检查员

如果您想了解网页可以使用的不同类型的存储，则需要启用存储检查器工具。 目前，存储检查器可用于检查 Cookie、本地存储、会话存储和 IndexedDB。

存储检查器提供存储的只读视图。 然而，Firefox 表示正在开发该工具，以便开发人员能够在未来编辑他们的存储内容。

要打开 Storage Inspector，请转到 Web Developer 子菜单并单击 Storage Inspector。 或者，您可以按 Shift + F9 以使用键盘快捷键。

开发者工具栏

Firefox 开发者工具栏

开发人员工具栏旨在为 Web 开发人员提供对许多 Firefox 开发人员工具的命令行访问。 除了使用 Firefox 设置的命令（您可以在此处找到）之外，您还可以使用 Scratchpad 添加您自己的命令。 这些可以转换为附加组件，以便其他人也可以使用它们。

按 Shift + F2 打开开发工具栏。 或者，您可以转到 Web 开发人员菜单并单击开发人员工具栏。

其他调试工具——3D 视图、吸管、iFrames

Firefox 3D 查看工具

Firefox 开发人员工具包中包含的其他调试工具包括：

  • 3D 视图：这为您提供嵌套的 HTML 和内容块的 3D 视图
  • 滴管：这使您可以从页面中选择特定颜色并将其复制到剪贴板）
  • 选择 iFrame：这允许您将开发人员工具指向文档中的特定 iFrame。

吸管颜色工具

移动工具

除了 Firefox 创建和调试工具之外，还有许多移动工具可供开发人员用于移动开发。 我将在下面详细介绍这些。

应用管理器

该工具允许开发人员在 Firefox OS 设备上测试、部署和调试 HTML5 应用程序。 它还充当模拟器，因此可以直接从 Firefox 桌面浏览器进行测试。

应用管理器附带一个应用面板，开发者可以在其中管理本地应用和外部托管的应用； 设备面板，提供有关已连接设备的信息，例如其操作系统版本和安装的应用程序； 和 Toolboxes，它们是一组可用于正在运行的应用程序的 Firefox 开发人员工具。

网络IDE

此移动工具使开发人员能够通过 Firefox OS Simulator 或通过 Firefox OS 设备创建、编辑、执行和调试他们的 Web 应用程序。 您可以使用它通过其他浏览器（例如 Firefox for Android 和 Chrome for Android）连接到 Firefox 开发人员工具。

其他移动工具

其他移动工具包括：

  • Firefox for Android 远程调试
  • Firefox OS Simulator：模拟 Firefox OS 设备，但在桌面上运行
  • 响应式设计视图：这使您能够查看您的网站或 Web 应用程序在具有不同屏幕尺寸的不同设备上的外观。

性能工具

性能在 web 开发中至关重要，这就是为什么 Firefox 为 web 开发人员提供了许多工具，可用于诊断和修复其网站和 web 应用程序的任何性能问题。

性能工具

性能工具取代了 Firefox 最初的 JavaScript 采样分析器。 它仍然包含采样配置文件的更新版本； 但是它也有一个帧率时间线。 预计未来会有更多功能。

性能工具可用于创建、分析和采样配置文件。

JavaScript 分析器

JavaScript Profiler 旨在帮助开发人员查找 JavaScript 代码中的问题。 它通过对当前 JavaScript 调用堆栈进行采样并提供有关它的统计信息来完成此操作。

油漆闪烁工具

此工具将突出显示浏览器需要重新绘制以响应输入的网页部分。 它使 Web 开发人员能够确定他们的网站是否使浏览器重新绘制超过其需要的次数。 请记住，重绘可能会对您的性能产​​生负面影响，因此最好使用此工具来消除不必要的重绘并提高您网站的性能。

单独的开发人员资料

下载火狐开发者版

必须在 Firefox 版本之间切换将是一个真正的痛苦。 好消息是 Firefox Developer Edition 使用与您已安装的其他版本的 Firefox 完全不同的配置文件。

开发者发行说明

Firefox 开发者发行说明

希望阅读与当前和任何历史版本的 Firefox 开发人员版本相关的说明的开发人员只需访问此链接即可。

包起来

如果您是新的或有经验的 Web 开发人员，您将从使用详细多样的 Firefox 开发人员工具中受益匪浅。 从创建代码到调试 HTML，这些工具允许您执行开发网站或 Web 应用程序所需的各种操作。 移动工具也是非常有用的，尤其是对于那些希望以创建网站的响应，从最新的好处（4月21日2015）谷歌的算法更新。

有关 Firefox 开发人员工具的更多信息，请访问 Mozilla 开发人员网站并加入开发人员社区。 Firefox Developer Edition 可以免费下载和使用。