台州企业网站建设:有关Firefox开发工具的所有需要了解的信息

2019.04.15 台州企业网站建设

90

火狐开发者版是火狐的一个特殊版本,是为开发者量身定做的。它提供了所有最新的Firefox特性以及许多专业的开发工具。在这里,我将提供一个关于其特性的指南,以便您了解有关Firefox开发工具的所有知识。

用户界面台州企业网站建设

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

Firefox开发工具的默认主题是暗的,这可能是用户测试的结果。但是,如果您不喜欢暗主题,则始终可以通过以下方式关闭开发人员版本主题菜单>自定义.

创建工具

FirefoxDeveloperEdition附带了许多创建工具,这些工具都是为那些编写网站和Web应用程序的人设计的。下面我提供了这些工具及其优点的概要,这样您就不必去搜索这些信息了。

飞碟

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

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

样式编辑器

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

台州企业网站建设若要打开样式编辑器,请转到WebDeveloper菜单并单击样式编辑器。然后,Firefox Developer工具箱将出现在浏览器底部,样式编辑器可以使用。 

着色编辑器

在Firefox中使用着色编辑器很简单。开发人员可以完全查看和编辑片段着色器和WebGL使用的顶点。对于那些不知道的人来说,WebGL智能地使用JavaScript(通过API)直接通过Firefox浏览器呈现2D和3D图形,同时不需要使用插件。

为了使用着色编辑器,需要首先启用它。为此,请转到“工具箱”设置,然后选中“着色编辑器”旁边的框。然后,阴影编辑器将显示在Firefox工具栏中。点击它,你就可以打开它了。 

网络音频编辑器

Web音频编辑器API使开发人员能够创建音频上下文。开发人员需要创建音频节点,提供:

  • 音频源

  • 执行转换的节点

  • 表示音频流所选目标的注释。

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

与着色编辑器一样,必须手动启用Web音频编辑器,而不是默认设置。启用很简单:只需返回到DeveloperTool Settings,然后选中“WebAudio”旁边的框。然后,您将看到在FirefoxToolbox工具栏中有一个附加的选项卡显示。只需单击此选项卡,就会加载一个页面,您可以从该页面构建音频上下文。 

调试工具

Firefox的调试工具是为检查、浏览和调试网站和web应用程序而设计的。下面我已经概述了其中一些工具的主要特性及其好处。

页面检查器

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

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

Web控制台

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

Web控制台的设计是为了取代原来的错误控制台,它最初是Firefox Developer工具的一部分。尽管错误控制台提供了来自多个页面的大量错误列表,但Web控制台将只显示与特定网页相关的信息,从而使其更有用。

要打开Web控制台,请转到Firefox菜单中的WebDeveloper子菜单,然后单击“Web控制台”。您还可以使用快捷方式Ctrl Shift K。然后,工具箱将以“控制台”激活出现在浏览器的底部。

调试器

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

要打开调试器,请转到主Firefox菜单中的WebDeveloper子菜单,然后单击“Debugger”。或者,您可以按Ctrl Shift S键,工具箱将显示在浏览器底部,调试器已激活并准备使用。 

网络监视器

NetworkMonitor旨在向您展示Firefox发出的所有不同的网络请求,每个请求需要多长时间,以及每个请求的详细信息。转到WebDeveloper菜单>Network激活该工具。您需要刷新页面以查看请求。

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

存储检查员

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

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

若要打开存储检查器,请转到WebDeveloper子菜单,然后单击存储检查器。或者,您可以按Shift+F9来使用键盘快捷方式。 

开发工具条

DeveloperToolbar被设计为允许WebDeveloper命令行访问许多Firefox Developer工具。除了使用Firefox设置的命令之外,您还可以找到这里,您还可以使用Scratchpad添加自己的命令。这些可以转换成附加组件,以便其他人也可以使用它们。

按Shift+F2键打开Developer工具栏。或者,您可以转到WebDeveloper菜单并单击DeveloperToolbar。

 

其他调试工具-3D视图,滴管,iFrame

Firefox Developer工具包中包含的其他调试工具包括:

  • 3D视图:这为您提供了嵌套HTML块和内容的3D视图

  • 滴眼液:这可以让您从页面中选择特定的颜色,并将其复制到剪贴板上)

  • 选择iFrames:这允许您将开发工具指向文档中的特定iFrame。

移动工具

除了Firefox创建和调试工具之外,还有许多移动工具可供开发人员用于移动开发。下面我会把这些全看一遍。

应用程序管理器

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

AppManager附带一个App面板,开发人员可以在其中管理本地应用程序和外部托管的应用程序;一个设备面板,它提供有关连接设备的信息,例如其OS版本和安装的应用程序;工具箱,这些工具箱是一组Firefox开发者工具,可以在运行的应用程序上使用。

WebIDE

该移动工具使开发人员能够通过Firefox OS模拟器或Firefox OS设备创建、编辑、执行和调试Web应用程序。您可以使用它连接到Firefox开发工具和其他浏览器,如Firefox用于Android,Chrome用于Android。

其他移动工具

其他移动工具包括:

  • Android火狐的远程调试

  • Firefox OS模拟器:它模拟Firefox OS设备,但在桌面上运行

  • 响应设计视图:这使您可以查看您的网站或web应用程序如何在不同的设备上,不同的屏幕大小。 

性能工具

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

性能工具

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

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

JavaScript Profiler

JavaScriptProfiler旨在帮助开发人员发现JavaScript代码中的问题。它通过采样当前JavaScript调用堆栈并提供有关它的统计信息来实现这一点。

油漆闪光工具

台州企业网站建设此工具将突出显示浏览器需要重新绘制以响应输入的网页部分。它使web开发人员能够弄清楚他们的网站是否使浏览器重新绘制得比它所需要的更多。记住,重绘会对你的表现产生负面影响,所以使用这个工具来消除不必要的重绘并提高你网站的性能是个好主意。

单独的开发人员配置文件

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

开发人员发行说明

希望阅读与当前版本和任何具有历史意义的Firefox Developer Edition版本相关的说明的开发人员可以这样做:访问此链接

包起来

如果您是一个新的或经验丰富的web开发人员,您将受益于使用详细和多样的火狐开发工具。从创建代码到调试HTML,这些工具允许您执行开发网站或web应用程序所需的广泛操作。移动工具也非常有用,特别是那些希望创建响应性网站的人,以便从最新的(21)中获益。圣2015年4月)谷歌算法更新。


关键词

最新案例

联系电话 400-6065-301

微信咨询 寒总监