做为Web开发者，你愿给Firefox一次机会吗？

做为Web开发者，你愿给Firefox一次机会吗？

做者｜Ibrahim Nergiz译者｜大愚若智编辑｜覃云本文从开发者角度介绍了 Mozilla 全新发布的 Firefox Quantum 浏览器在诸多方面的改进和加强，尤为是在 Web 开发者工具方面新增的功能。

友情提示：原文的图片大多都是动图，但因为微信对图片大小的限制，以及动图压缩后变成高糊，为了保证阅读质量，小编将动图换成了png图，想获取原图的读者可点击文末原英文连接。

做为“晚期”八零后的我，对 Firefox 的崛起和衰落至今依然感受历历在目。

Firefox 最初做为开源项目，以 Internet Explorer 6 竞争对手的姿态诞生。当时这是个很棒的项目，由于它为用户提供了更多选择，例如，用户能够经过各类扩展得到新的功能，还能够更改浏览器的视觉主题等，每一个人都爱过它。

然而几年后另外一个重量级选手登场了。这个选手名叫 Chrome，Chrome 发布后迅速攻城掠地，很快超越了全部对手。实际上，Chrome 在极短的时间里得到了如此众多的用户，成为 Google 有史以来最有价值的 资产，相信不少人如今就是使用 Chrome 阅读本文的。

不过咱们仍是先简单回顾一下吧。做为开发者，我彻底明白用户有多难取悦。

随着各类愈来愈复杂的 Web 技术，以及常规应用程序和软件逐渐涌现，内存和 CPU 占用率居高不下的问题开始困扰着你们。

JotForm 开发者团队的 Deniz 最近就说过：

“我有一部最新款 MacBook Pro，但是在开发（打开 Chrome DevTools）时，电量以肉眼可见的速度耗尽。”

若是你也是开发者，我相信你确定也产生过相似的感觉，或者至少听周围的人这样说过。

你甚至可能会犹豫不决地想着要否则换用 Chrome 以外的其余浏览器算了。

来源：https://twitter.com/firefox/status/930435170288656384

2017 年，在标志性的初代 Firefox 发布十多年后，Firefox Quantum 有了质的飞跃，Quantum 面向 Android、Linux、iOS、Mac 和 Windows 平台隆重发布。

不只有着更美观的现代化界面，据称它加载网站的速度比 Firefox 6 快两倍，同时内存用量比 Chrome 低 30%。

对比视频：https://youtu.be/YIywpvHewc0

涉足这一领域十多年后，Mozilla 终于找到了一种让 Firefox 在保持优点的同时，从竞争对手中脱颖而出的新方法，这绝对是个不小的成就。

为了全面发挥计算机的强大处理能力，他们借助 Servo、Rust 以及 Quantum/Stylo 等前沿技术重写了大约四百万行代码。

这一切是值得的。由于在我看来，相比其余浏览器，Firefox Quantum 有着绝佳的性能表现。

缘由以下：

支持多种新技术 WebAssembly

在线运行大规模、效果炫目的复杂应用，这是不少开发者最大的梦想。此外随着在线视频或图片编辑、3D 游戏编辑、VR/AR 等技术的兴起，用户对在线体验的预期开始一飞冲天。

WebAssembly 是一种全新类型的代码，相似于底层汇编类语言，但可在现代化浏览器中运行。

诸如 Google V八、Mozilla SpiderMonkey 以及 Microsoft Charka 等 JavaScript 引擎在开发过程当中便可针对此类操做提供极为出色的性能。

截止 2017 年末，咱们就已经能够借助 Firefox 运行 Unity 和 Unreal 游戏引擎，如今这一技术也获得了其余主流厂商的支持。

 A-Frame 和 WebVR

虚拟现实（简称为 VR）是近些年最重大的创新之一，而且在手机、浏览器，以及 Oculus Rift 和 HTC Vive 等产品方面取得了不错的进展。

Mozilla 在 WebVR 基础架构的开发方面扮演了重要角色，同时他们也在努力改善自家新浏览器对该技术的支持。借助（由 Mozilla 支持的）A-Frame，咱们已经能够用上这个出色的 WebVR 框架。

A-Frame - Make WebVR：一种构建虚拟现实体验的 Web 框架，能够借助 HTML 和 Entity 组件制做在 Vive 上使用的 WebVR 内容……

Mozilla VR：面向开放的 Web 环境免费提供的虚拟现实技术。

 Common Voice 项目

为了更好地响应用户的语音命令，Apple Siri、Microsoft Cortana、Amazon Echo 以及 Google Home 在语音识别技术方面构筑了极高的专利围墙。

你猜怎样？Mozilla 发起了开源的 Common Voice 项目，旨在为每一个人提供能够随意使用的语音识别能力。

Mozilla Common Voice 项目：Common Voice 项目意在提供人人可用的语音识别技术，如今你已经能够经过贡献本身声音的方式提供支持。

任何人均可以向 Common Voice 项目作出本身的贡献，为此只需大声朗读句子教计算机识别便可。你也能够帮忙验证 Common Voice 的转录结果，借此改进识别引擎的质量。

 Firefox Devtools

使用 Firefox DevTools 测试、精益并构建：借助 Firefox DevTools 提供的“试验场”学习 CSS 网格布局（Grid Layout）、Firefox 调试器等技术。

考虑到 Firefox 在上述领域的举措，你确定也能猜到，DevTools 也包含了诸多的改进。Debugger.html 就是其中之一。最棒的改进呢？Debugger.html 已成为托管在 GitHub 上的开源项目，所以任何人均可以作出本身的贡献。

接下来挨个看看 debugger.html 的新增功能吧。

常规功能—检查工具 更改主题

新的开发者工具提供了三个不一样的主题选项：暗色、亮色以及 Firebug。尽管主要的开发工做已经中止，但不少人依然在使用备受赞誉的 Firebug 工具。

此外还有一篇专门的博客文章对比了不一样的配色：Firefox Nightly News 所发布的 深度文章。

 CSS 网格

CSS 网格布局是该领域的最新创新之一。经过使用 DevTools，咱们能够看到本身的“display: grid”特征元素，还能够轻松地永久性打开或关闭行号（Line number）、区域名（Area name）、延伸线（Extend line）等特征。

详情可访问：https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/

 Box 模式

元素的边缘和缩进值有时候可能很难处理。经过 Box 模式结构，咱们将能够经过 Margin、Padding 和 Border 等属性，轻松地查看并更改位置布局。

详情可访问：https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model

 CSS 变量

变量的引入是 CSS 中另外一个重要的创新。虽然目前并不是全部浏览器均可支持变量，但之后确定会得到普遍支持。顾名思义，咱们能够经过该功能为变量赋予任何值。想知道具体的值是什么？将鼠标指针悬停上去就清楚了。

详情可访问：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

 添加 / 删除类

按下 DevTools 仪表盘右侧的.cls 按钮，随后便可针对正在检查的 HTML 元素轻松地添加或删除 CSS 类。

 悬停

按下右侧.cls 按钮旁边的按钮后，就能够轻松地测试当前元素的 Hover、Active 和 Focus 状态。

 字体族

在检查元素的同时，还能够看到元素所使用的字体，以及字体的添加方式。

 动画

动画的开发也广受关注。在以前的文章“如何像专家那样使用 CSS 动画”中，我曾简要介绍过这种动画。在这里能够缓慢地播放动画，或者追踪内容的移动方式。

 XPath

不少开发者确定据说过“网页抓取（Web scraping）”。若是你想使用抓取程序将某些内容从网页中抓出来，那么借助 XPath 将能很轻松地肯定元素在页面上的位置。从上面的动图中你应该能很明白个人意思了。

控制台 控制台日志

继续看看控制台方面的功能。在这里能够轻松检查各类对象，此外树状的结构键使得咱们能够轻松地选中对象并取消这些内容的隐藏。

 Console.group

你知道吗，经过使用console.group ()和groupCollapsed ()，可让事件变得更有序易读。

调试器 断点

优秀的 JavaScript 调试工具必不可少。经过使用断点，咱们能够快速插入断点并检查范围详情。

 源代码地图

SCSS、WebAssembly、TypeScript、Babel……这些 JavaScript 或 CSS 汇编的作法正在逐渐流行。所以浏览器内最终显示的代码结构一般会被处理为与最初编写的结果大相径庭的内容。但在源代码地图（Source Map）的帮助下，咱们能够直接处理最初的源代码内容。

 函数搜索 —项目搜索

发现网页中错误的最佳作法之一就是：直接在数量众多的文件中搜索。

 样式编辑器

咱们能够在这个编辑器中看到针对 CSS 编写的一切内容，例如断点的使用。

 性能

为确保网页，尤为是包含动画的网页能够快速流畅地渲染，绝对不能忘记 60 fps 的规则。借此咱们能够轻松地追踪每一帧的显示到底用了多长时间。

 网络监视器

CSS、JavaScript、图片以及其余不少类型的资源将直接载入到网络监视器中，借此确保浏览器能够正确地解释页面并显示内容。

咱们可使用这些选项进行性能优化：查看文件状态，肯定上传所需的时间，以及内容是否能够被成功加载。

 存储

用户访问咱们的网站时，咱们可使用 Cookie 或本地存储来保存有关用户的信息。

该选项可供咱们检查、编辑、添加或删除此类信息。

最终感觉

大型公司的商业模式取决于用户是否会从第三方产品换为使用本身的专有产品，这样才能将用户禁锢在本身的软件生态体系内。

举例来讲，若是你想在网上观看 Apple 的主题演讲，那么就只能在 Safari 浏览器中打开相应的页面。若是你想从 iOS 换为使用 Android，那就和 iMessage 作别吧。

但 Mozilla Firefox 并无创建“专利围墙”，所以换用 Firefox 浏览器这种作法远比上面提到的那些状况更简单。

我也明白，很难说服别人更换浏览器，毕竟还要更改使用习惯、快捷键、浏览器扩展甚至保存的密码，但我保证，这是值得的。

 附 注 

对于通读本文看到这里的你，有一条好消息。如今已经能够整治无处不在的通知信息了。

 原英文连接

https://medium.com/swlh/calling-all-web-developers-heres-why-you-should-be-using-firefox-983f012d4aec

前端之巅

「前端之巅」是 InfoQ 旗下关注大前端技术的垂直社群。紧跟时代潮流，共享一线技术，欢迎关注。

 活动推荐

PWA、Web 框架、UI 与动画、Node... 大前端的下一站在哪里？前端工程师的价值和成长路径是什么？GMTC2018 上，来自 Google、Facebook、BAT 等 60+ 国内外一线前端大牛，将与你面对面探讨大前端领域最新技术趋势和实践，想要升职加薪就快来吧！扫描下方二维码或点击“阅读原文”了解更多大会详情！

目前大会 8 折热销中，团购更优惠，购票咨询：18514549229（同微信）