为了顺应当前形势和更好的发展,黑基网已于9月19日正式更名为【安基网】,域名更换为www.safebase.cn,请卸载旧的APP并安装新的APP,给您带来不便,敬请理解!谢谢

黑基Web安全攻防班
安基网 首页 IT技术 电脑技术 查看内容

为 Web 打造更好的工具:Firefox 开发者工具盘点

2018-4-7 01:30| 投稿: xiaotiger |来自: 互联网

摘要: 对 Firefox DevTools (开发者工具)来说,2017 年是值得纪念的一年。Mozilla 的开发团队更新并改造了 UI、重新创建三个面板、解决不计其数的程序缺陷,并且发布多项新功能。通过这一连串的努力,不但把 DevTools 的 ...

对 Firefox DevTools (开发者工具)来说,2017 年是值得纪念的一年。Mozilla 的开发团队更新并改造了 UI、重新创建三个面板、解决不计其数的程序缺陷,并且发布多项新功能。通过这一连串的努力,不但把 DevTools 的使用体验变得更快更好,也为 2018 年和将来的新功能及改进打下扎实的基础。Mozilla 兢兢业业地打造更好的工具和功能,以协助开发者运用 JavaScript 框架和 CSS Grid 等最新技术和标准来建立网站。

在前瞻 Firefix DevTools 的下一步前,先快速回顾一下 Devtools 的过去。

2016 

2016年,DevTools 团队启动转型计划,让开发者工具停止对于 XUL 及 Firefox 专用 API 的支持,而全面改用现代的网络技术。这一系列转型计划的第一个项目就是 debugger.html。

Debugger.html 不是 Firefox Debugger 的升级换代,而是重新打造的成果。DevTools 团队从零开始重建 repo,以打造一个具备可重复使用 React 组件和 Redux 储存(store)模块的调试器。

此现代化架构的效果很快见效。所有东西都变得简单易懂、容易测试和预测,而且,debugger.html 也能用于 Firefox 以外的平台,包括 Chrome 和 Node。

除此以外,Mozilla 在 2016 年也推出以现代化网络技术设计的全新响应式设计模式。

2017 

去年,Mozilla 延续 2016 年展开的工作,重建 Firefox DevTools 的组件(并陆续加入新功能),让开发者工具变得更快和更稳定。Mozilla 还发布了让浏览器速度和性能大跃进的 Firefox Quantum。

调试器(Debugger)

始于 2016 年的 debugger.html 开发工作终于开花结果,随着 Firefox 56 发布于各平台,同时还加入新功能与更新,包括:搜索工具改善、框架调用堆栈(framework call-stacks)、异步步进(async stepping)等等。

控制台

全新的 Firfox 控制台也随 Firefox Quantum 上线而落地。新的控制台不但有了新的 UI,连程序都是以 React 和 Redux 重写而成,另还推出几项改进,例如:日志组收闭及检查文本中对象的功能。

网络监视器(Network Monitor)

Firefox 57(Firefox Quantum)还推出新的网络监视器。新的网络监视器也有新 UI,而且也是使用 React 和 Redux 等现代网络科技所打造而成。此外,它还加强了筛选的 UI、新增网络过滤等新功能。

CSS Grid 布局面板

Firefox 57 加入了全新的 CSS Grid 布局面板。鉴于 CSS Grid 为网页设计带来的革命性变革,Mozilla 想为设计和开发人员提供建立与检查 CSS Grid 布局的好工具。Mozilla Hacks 里的文章提供了该面板功能的详细介绍,其中特别值得一提的是可视化呈现网格的覆盖(overlay)、显示网格区域名称和互动的网格轮廓等功能。

Photon UI

为了配合 Firefox Quantum 和新 Photon UI 上线,DevTools 主题的视觉设计也重新调整,把外观变得更简洁流畅之外,还加强了易读性。

2018 和未来

这一系列的成果让 Firefox DevTools 的未来令人期待。利用现代化网络技术,与使用 XUL 和 Firefox 专用 API 的时候相比,建立、测试和布署布署新功能的速度已显著改善。

那么,下一步的计划是什么? 以下是一些进行中的工作:

改良布局与设计的工具

时间来到 2018 年,以绘图程序制作的静态设计已经被更现代的工具取代!通过在浏览器中设计,设计人员可以更自由地实验和创新,同时还能更快建立好网页。在过去一年里与数百名开发者请教的过程中,深深体会到社区对更好的浏览器设计工具的殷殷期盼。

CSS Grid 布局面板推出后获得一致好评,开发团队在喜悦之际,也听到大家希望获得更多设计、建立和检查布局工具的声音,所以,推出了Firefox 页面查看器(Inspector),以简化 Flexbox 程序代码的编写工作。

更好的框架工具

2017 年对 JavaScript 框架(如 React 和 Vue)具有指标性意义。另外,一些素有口碑的老牌框架(如 Angular 和 Ember)也持续成长和改进。这些框架正在改变我们为网络创造工具的做法。对于 Firefox DevTools 的未来,Mozilla 满怀期待,希望能为使用框架设计的开发者提供更好的工具。

更好的 UI

在 Mozilla 开发团队的眼里,Firefox DevTools UI 永远都有可以改进的空间,还会更好。Mozilla 将继续与 Firefox 开发者社区合作,不断测试和推出更新。

在 GitHub 新上架的项目

前年,当开发团队着手建立 debugger.html 时,展开了新的旅程。Mozilla 决定在 GitHub 上建立项目。不只找到更多的新贡献者,也有幸得到不少美言。社区告诉我们,它的程序代码非常容易锁定、管理和使用。今年,还会找机会把项目放到 GitHub 上,敬请期待。

助一臂之力

有什么好想法吗? 找到新的 bug 了吗? 有想要抱怨的事情吗? 2018 年起,Mozilla 想要更认真听 DevTools 使用者的声音。对开发团队来说,您的意见非常重要。可通过下面几个方式加入社区:

加入 Slack 频道

您可加入 devtools.html Slack 社区。您也能在 irc.mozilla.org 的 #devtools 频道找到。

关注微博微信

您可订阅官方微博@火狐,和微信(直接搜索“火狐”公众号)。

贡献

如果您想更深入参与的话,也可以成为贡献者。

公开的程序缺陷列表

GitHub

下载 Firefox 开发者版本

Firefox 开发者版本是专为服务开发者所建立的浏览器。通过开发者版本,你可抢先试用 Firefox 预计于 2018 年推出的新功能。

谢谢所有人一路以来的爱护与支持。各位的推文、bug 上报、反馈、批评指教和建议都使我们受益良多。2018 年,Mozilla 会继续为开发者推出更好的工具,诚邀您与我们并肩同行。


小编推荐:欲学习电脑技术、系统维护、网络管理、编程开发和安全攻防等高端IT技术,请 点击这里 注册黑基账号,公开课频道价值万元IT培训教程免费学,让您少走弯路、事半功倍,好工作升职加薪!



免责声明:本文由投稿者转载自互联网,版权归原作者所有,文中所述不代表本站观点,若有侵权或转载等不当之处请联系我们处理,让我们一起为维护良好的互联网秩序而努力!联系方式见网站首页右下角。


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

最新

返回顶部