尽管尚未正式宣布,但看起来它将在某个时候取代Firefox Aurora。

这是一种专门针对Web开发人员新浏览器

经过短暂的嘲讽 ,Mozilla已正式发布Firefox开发人员版。

让我们看看它提供了什么。

它包含大量调试器,面板和其他实用程序,并且使用自己的配置文件,因此可以更轻松地与常规Firefox一起运行。

从名称,官方公告和登录页面来看, Firefox Developer Edition看起来是第一个为开发构建的大型浏览器 ,而不仅仅是支持它。

用户界面

该工具栏明显比Chrome和常规Firefox ,但默认情况下会添加更多按钮。

Developer Edition中的界面更改已经暗示了以开发人员为中心的方法。

概览:Firefox开发人员版

我个人比较喜欢浅色,以便随便使用,但是深色的UI在我的初始测试中很棒。

一秒钟的延迟发现一个月可能要花费数小时。

在开发过程中一目了然地找到所有内容非常重要

很明显,新的默认主题是深色,这可能是某些聪明的UI测试的结果。

如果您喜欢默认主题,则可以通过转到菜单->自定义,使用“使用Firefox开发人员主题”按钮快速关闭开发人员主题。

概览:Firefox开发人员版

书签部分,下载部分,甚至Developer Edition起始页面似乎都没有必要

实际上有一个专用按钮;

我相当确定在此版本中将不使用书签,并且大多数开发人员都知道Ctrl / Cmd + D组合键可以使其实现。

另一方面, 有些界面选择使我感到困惑

第一印象

Mozilla在目标网页上甚至对此进行了强化:

我的第一印象是,我在这里从未见过任何东西

只需稍作改动,即可使Developer Edition与Firefox有所不同

开发人员工具的处理方式与常规Firefox大致相同,已经可以使用WebIDE和Valence。

好像他们已经创建了一个框架,在其中放置将来的工具和方法论并将其进行测试

好像Mozilla一直在等待创建此版本的Firefox一样,他们只是在等待大量的开发人员工具和专有技术。

话虽这么说, 这里还是有一个好的方向的内在感觉

或至少那是意图。

从现在开始,开发将加强并专门针对此产品,将其与常规Firefox分开,使其成为开发人员的首选。

用对开发人员更友好的术语来说:“ 开发人员版”似乎是刚刚制作的常规版本的分支,但有一些调整。

Mozilla对价的立场是这样的:

Mozilla计划如何定位开发人员版的最大迹象之一就是Valence的加入 (稍后会详细介绍)。

我们尚不建议将其用于日常工作。”

“适配器仍处于早期阶段,只能作为预览使用。

我提供了一个支持,以防止浏览器膨胀,并欢迎这一新方向。

尽管Mozilla不太可能从Firefox中删除开发人员功能,但也许某些即将发布的功能只会添加到新的Developer Edition中。

似乎Developer Edition将比Firefox的常规版本更早使用工具

WebIDE

换句话说,这就是iOS的Xcode。

Firefox 34中添加了它,它是App Manager的替代品– 它使您能够使用Firefox OS仿真器或实际设备运行编辑和调试Firefox OS应用程序

WebIDE是最突出的功能之一。

对此的技术细节有点难以理解,因此请看一下Mozilla制作的以下视频:

目前,Valence的主要目标是Android上的Chrome和iOS上的Safari。

它允许开发人员工具与多种浏览器一起使用。

Valence本质上是跨浏览器的调试工具

开发者工具

使用Ctrl / CMD + I调用它,或右键单击一个元素,然后单击“检查元素”。

如果您熟悉常规Firefox中的开发人员工具,那么这几乎就是您所期望的

概览:Firefox开发人员版

检验员

当您将鼠标悬停在DOM中的某个元素上时,该元素将在页面上突出显示,这对于确定尺寸和总体位置很有帮助。

检查器为您提供页面DOM的可折叠树视图

概览:Firefox开发人员版

在许多情况下,这是一种在重叠元素之间进行检查的更可行的方法。

通过单击上方屏幕快照中的右上角图标, 您可以浏览页面,并且元素将在光标下方突出显示

用另一种方法做的事情甚至更有帮助。

一个可能有用的窍门是可以使用箭头键遍历DOM,甚至可以使用Delete键和Ctrl / Cmd + Z命令删除和取消删除。

使用“检查器” ,您可以双击以编辑元素的内容或属性。

单击并拖动DOM将突出显示DOM的一部分,边界将显示在网页上,这是用于可视化HTML结构和CSS代码的另一种出色工具。

侧栏中会显示任何给定元素CSS规则,使您可以快速阅读并轻松进行编辑访问。

安慰

它主要用于Javascript调试和跟踪丢失的资源,但也可以用于发出命令,甚至通过jQuery。

控制台是一个窗口,显示来自CSS,JS,Net,Security和Logging的汇总信息

概览:Firefox开发人员版

调试器

如果您想找出一些更复杂的问题,则需要使用调试器

该控制台非常适合快速记录一些脚本问题,并确保您的代码在第一次尝试时就可以使用。

您可以查看执行在代码中的位置,还可以在继续操作之前修改变量。

通过在代码中设置断点, 您可以在该点之前暂停执行Javascript代码。

概览:Firefox开发人员版

它不会替代单元测试,但是它将为您提供更深刻的见解并为他们提供出色的伴侣!

这不仅使您能够找出错误,而且还可以使您快速测试各种用例

样式编辑器

任何修改过的文件都可以轻松保存。

您可以选择任何已加载的样式表,也可以动态导入和创建新样式表。

样式编辑器是编写样式并实时查看应用结果的好地方

概览:Firefox开发人员版

可以设置这些环境,但是这样做的开销与使用启用了实时重新加载的预处理器大致相同。

虽然这是微不足道的非常方便的功能, 但是对于使用预处理器的更复杂的环境而言它并不是那么方便

性能

它允许您创建极其详细的性能配置文件,包括回流和绘制,Javascript和CSS解析所需的费用等等。

该性能工具随Firefox 34一起引入,并替代了JavaScript采样分析器

概览:Firefox开发人员版

时间线

该工具将显示重排(布局),样式,绘画,控制台和DOM事件。

默认情况下,时间线工具在常规版本的Firefox中不可用, 它使您能够查看浏览器引擎执行的操作

概览:Firefox开发人员版

网络

它概述了资源和状态代码,以及加载时间和加载时间。

“网络”选项卡非常适合深入了解您的网站在加载和使用过程中所发出的请求

底部的过滤器使您可以查看特定的资产类型,这是使用XHR类型确定AJAX调用的特别有用的工具。

概览:Firefox开发人员版

单击任何资产将显示其响应和请求标头,cookie,参数,响应和时间。

这将显示两个饼图,它们比较了缓存的负载和未缓存的负载。

最有用的功能之一是能够通过右键单击并选择适当的选项来在网站上开始性能分析

概览:Firefox开发人员版

响应式设计模式

这不是一个真正的仿真器,因此结果可能会有所不同,但对于预览媒体查询的结果而言却非常有用。

响应式设计模式使您可以查看网站在不同大小的窗口中的外观

进入响应模式后,您可以在预设屏幕尺寸之间进行切换,单击并拖动以自定义尺寸,更改方向并模拟触摸事件。

概览:Firefox开发人员版

在开发时,通常会更改浏览器窗口的宽度,直到完成为止,但我发现响应式设计模式非常适合进行最终检查和查看断点之间的状态

结论

我期待许多特定于工具的功能,例如Coffeescript,Sass,Less等。

简而言之:尽管对于跟上Mozilla新闻的开发人员而言,没有太多创新的功能, 但方向是非常有希望的

我将非常感兴趣地关注这个项目,建议您也这样做。

如果浏览器提供这些功能中的某些功能,则可能会使我的某些方面工作更快

作为一个经验丰富的开发人员,我已经拥有用于编译脚本,创建最终版本,自动化常规编程任务,对我的代码进行错误检查并实时重新加载浏览器的工具。

如果您有任何想法或已经有Firefox Developer Edition的经验,请在评论中告诉我们您的想法。


翻译自: https://www.hongkiat.com/blog/firefox-developer-version/

相关文章: