未分类 Articles
-
Firefox 77 新功能：开发者工具改进和 Web 平台更新
全新的 Firefox 稳定版正式发布！第 77 版为开发者提供了更多新功能。 这篇文章包含新版本中的精彩亮点，想了解完整信息，请浏览以下网页： MDN Firefox 77 开发人员专区 Firefox 77 一般用户更新信息 开发者工具改进 让我们先来看看第 77 版开发者工具中最有趣的优化和创新。如果你想使用更多开发中的新功能，并提供建议，请安装 Firefox 开发者版本即可抢先体验。 更快、更有效的 JavaScript 除错 大型 Web 应用程序对开发者工具来说无疑是一项艰巨的挑战，因为需要快速而正确地处理捆绑（bundling）、实时重载（live reload）和依赖关系。 Firefox 77 的 Debugger 学了一些新技巧，让你因此更加专注于除错。 在先前的许多版本中，我们持续致力于提升除错性能，也几乎除光了影响层面上最严重、可处理的问题。为了找出剩余的瓶颈，我们一直积极地和社群保持联系。得益于我们收到的许多详细回报，我们终于能够改善除错的效率，不仅提升暂停和步进速度，也减少内存长期用量。 就是会动的 JavaScript 和 CSS Source Map Source Map 也包含在此次社群访查中，在新版本速度表现也有所提升。些行内的 Source Map 载入时间加快了 10 倍。更重要的是，我们改善了不同 Source Map 设置的可靠性。感谢大家回報各種含輕微錯誤的 Source Map 案例，我們因此得以調整了解析和映射的 fallback 机制。整体而言，先前有些无法载入的 CSS […]
-
Firefox 76: Audio worklets 及其他更新
Firefox 76 在 Web 平台上提供很棒的新功能，例如改善 JavaScript 的 Audio Worklets 和 Intl。此外，我们也在 Firefox 的开发工具中添加许多新工能，使开发的过程更加轻松且便利。
-
Firefox 75: 四月新气象
即使在这段隔离的时期，我们的工程团队也已经调整好步调，保持专注并努力工作，并献上令人兴奋的新版Firefox。在开发者工具方面，你可以在网页主控台中使用即时求值、WebSockets 事件断点以及许多其他功能。在网页平台方面，新增的功能包括 HTML 延迟加载图片、CSS min()，max() 和 clamp() 函数、公开静态类属性以及支持网页动画 API 附加功能等。 与往常一样，请点击下方阅读重点，或在下文浏览所有新增功能的完整列表： Firefox 75 开发人员专区 Firefox 75 网页兼容性 Firefox 75 终端用户专区 新增开发者工具 让我们先来看看 Firefox 75 中最有趣的开发者新工具。 即时测试控制台表达式 在控制台中测试表达式是了解应用程序状态、查询 DOM 或试用 JavaScript API 非常便捷的方法。现在，利用 Firefox 控制台的多行模式使编写较长的代码更為容易，在使用上更為友善，且更贴近整合开发环境。 新的即时测试可以在输入时预览当前表达式的结果，有点类似 Quokka.js 编辑器。只要在 Web 控制台中键入的表达式没有副作用，在输入时便可以直接预览结果。 为了使预览尽可能无缝，需要花费很大的功夫。以当前的成果来说，DOM 节点的元素表现出色，而代码内自动完成功能也会根据结果类型推荐方法和属性。此外，更可以预览错误以快速地修复表达式。 更好的检查和测量方法 现在可以调整测量面积大小 使用 DevTools 中的选用面积测量工具可以在页面上快速绘制矩形以测量特定区域的高度、宽度和对角线长度。在「可用的工具箱按鈕」的设置中可以启用该工具。感谢 Sebastian Zartner [:sebo]，这些矩形现在具有调整大小的句柄，因此可以精准地进行调整。 利用 Xpath 查询 DOM 元素 Xpath 查询通常用於自动化工具中，以告知软件要定位与互動的元素。再次感谢 Sebo，现在可以利用 HTML 的页面检测器搜索以 XPath 来查询 DOM 元素。这使得在网站上实际测试表达式和修改变得更加容易。 WebSockets 的事件断点 在每个最新的 DevTools 版本中，WebSocket 检查功能都持续进步。这次，天資聰穎的 Chujun Lu 在除錯方面做出了很大的貢獻。 在执行 WebSocket 事件处理程序时，你可以利用除錯器中新的事件监听器断点（Event Listener Breakpoints）暂停或是记录。选择纪录选项后，事件数据和已執行的處理程序會被记录下来，但是不会暂停执行。 在 WebSocket Inspector 中，由於 Outvi V 长期的贡献，消息过滤器现在可以支持一般的表达式。 网络新增功能 Firefox 75 在网络接口的质量和性能方面有大幅的进步。这个版本的渲染效能立下了新的里程碑，可以快速渲染同时發动的請求，又不增加 CPU 的負擔。 在界面方面，贡献者 Florens Verschelde 提出了在列之间添加边框以提升可读性的建议和设计。这个设计使 DevTools 整体的外观更加一致。贡献者 Vitalii 在改善状态之间的对比度后，筛选按钮也变得更清晰。 阻断请求面板可協助測試匹配請求失敗時網站的彈性。现在，它允许包含“ *”的萬用字源。感谢 Duncan Dean 的贡献。 开发者版本中抢先体验 DevTools 功能 开发者版本是 Firefox 的预发布渠道，可以提早体验编程和平台功能。默認情況中，浏览器的设置提供开发者了更多功能。我们希望尽快在开发者版本中加入新功能，并收集不同的反馈，包括以下重点。 除錯器和控制台的异步堆栈跟踪追蹤 現代的 JavaScript 編碼很大程度上取決於在其他異步作業（例如：event、promise 和 timeout）之上堆疊 async/await。在与 JavaScript 引擎整合优化之后，现在异步作业得以提供更完整的服务。 利用除錯器中的异步堆栈可以逐步了解所執行的 event、timeout 和基于 promise 的函数调用。在控制台中，透過异步堆栈使查找错误的根本原因变得更加容易。 网页平台更新 让我们看看 Firefox 75 网页平台方面的更新。 HTML 延迟加载图片 延迟加载是用來提升性能常用的一個策略。透过将资源标记为非阻塞（非关键）资源，并在需要时才加载，而不是立即加载所有资源。Web App 中延迟加载的最常见资源之一为图片。 为了让延迟加载图片时在使用上更為简便，我们提供支持 HTML
元素的 load 属性。只要将之設定為 lazy，就可以使浏览器延迟加载尚未出现在画面中的图片，直到使用者快瀏覽到图片时才加以载入。另一个属性则是 eager，也就是一般预设的属性。 […]
-
Firefox 74，为安全赋予更多价值
目前 Firefox 74 已经发布了。这次我们提供最重要的新功能是安全性的提升：特征策略（Feature Policy），Cross-Origin-Resource-Policy 标头和移除 TLS 1.0 / 1.1 支持。我们还新增一些新的 CSS 文本属性功能，JS 链路运算符还有其他 2D canvas 文本度量标准功能，以及大量 DevTools 增强功能和错误修复功能。 本文同样包含一些重点，你也可以在以下文章中阅读新增功能的完整列表： Firefox 74 开发人员专区 Firefox 74 网页兼容性 Firefox 74 终端用户专区 提升安全性 让我们看看 74 版本中安全性的改良。 特征策略（Feature Policy） 我们终于在默认模式中启用 Feature Policy。你现在可以使用 Feature-Policy: microphone 'none'; geolocation 'none' CORP 我们也启用支持 Cross-Origin-Resource-Policy (CORP) 标头，允许网站和应用程序因安全考量选择拒绝针对某些跨域请求。例如：
