Firefox Articles
-
Faster Vue.js Execution in Firefox
Firefox performance on Vue.js has improved significantly throughout the year. Most recently, we sped up reactivity with Proxy optimizations. This change landed in Firefox 118, so it’s currently on Beta and will ride along to Release by the end of September.
-
Firefox 75：四月的远大志向
即使在隔离时期，我们的工程团队也努力适应、保持专注并努力工作，为您带来又一个令人兴奋的新版Firefox。在开发人员工具方面，您会找到控制台中的即时评估、WebSockets的事件断点，以及其他许多功能。在网络平台方面，新增的功能包括图像的HTML延迟加载、CSS min()、max()和clamp()函数、公共静态类字段以及对Web动画API支持的补充。 请照例阅读重点内容或从以下文章中找到所有新增内容的完整列表： Firefox 75开发人员必读 Firefox 75的网站兼容性 Firefox 75最终用户发行说明 开发人员工具补充 我们首先来看看75最有趣的开发人员工具。 控制台表达式即时评估 控制台中的评估表达式是探索应用程序状态、查询DOM或试用JavaScript API的快速方法。现在，Firefox的多行控制台模式已经变得更友好、更像IDE，可用于更轻松地为更长的代码制作原型。 新的即时评估会在您键入时显示当前表达式的结果预览，类似于Quokka.js 这样的编辑器。只要在Web控制台中键入的表达式没有副作用，就会在您键入时显示结果预览。 为了使预览尽可能无缝，进行了大量改进。结果中DOM节点的元素为突出显示。代码内自动填写功能根据结果类型推荐方法和属性。另外，您可以预览错误以更快地修复表达式。 更好地检查和测量 面积测量现可调整大小 使用DevTools中的可选面积测量工具，您可以在页面上快速绘制矩形以测量特定区域的高度、宽度和对角线长度。您可以在“可用工具箱按钮”下的设置中启用该工具。感谢Sebastian Zartner [:sebo]，这些矩形现在有调整大小的句柄，方便您精确地调整。 使用XPath查找DOM元素 XPath查询通常用于自动化工具中，以告知软件要查找并与之交互的元素。您现在可以在Inspector的HTML搜索中将XPath用于DOM元素，这也是归功于sebo。这使得在实际站点上测试表达式和微调查询变得更加容易。 WebSocket的事件断点 最近的每个DevTools版本都对WebSocket检查功能进行了改进。这次，由于才华横溢的Chujun Lu的贡献，调试方面得到了一个不错的补充。 现在，您可以在执行WebSocket事件处理程序时选择暂停或记录。使用调试器中新添加的事件监听器断点。选择“记录”选项时，将记录事件数据和执行的处理程序，但执行不会暂停。 WebSocket Inspector的新消息还包括：由于Outvi V的长期贡献，消息过滤器现支持正则表达式。 网络添加 Firefox 75的“网络”面板中进行了大量质量和性能方面的工作。此版本中在不增加CPU负担的情况下大幅提升了发出快速请求的速度。 在界面方面，贡献者Florens Verschelde推进了在列之间添加边框以提高可读性的建议和设计。注意设计变得与DevTools的整体外观更加一致了。感谢贡献者Vitalii，过滤器按钮也更加清晰易读，状态之间的对比度得到了改善。 “请求阻止”面板可帮助您测试匹配请求失败时站点的恢复能力。现在，它允许带有“*”的通配符模式。感谢Duncan Dean所做的贡献。 Developer Edition（开发人员版）中DevTools功能抢先体验 Developer Edition是Firefox的预发布渠道，可以抢先体验各种工具和平台功能。该版本的默认设置中还为开发人员开启了更多的功能。我们喜欢将新功能快速引入到Developer Edition，以便收集反馈信息，重点包括以下内容。 调试器 & 控制台异步堆栈跟踪 现代JavaScript代码在很大程度上取决于在其他异步操作（如事件、承诺以及超时）之上堆叠async/await。由于与JavaScript引擎集成得好，现已可以捕捉到异步执行过程，以提供更完整的画面。 调试器中的异步调用堆栈使您可以单步调试事件、超时以及依照时间执行的基于承诺的函数调用。控制台的异步堆栈使查找错误的根本原因变得更为容易。 Web平台更新 我们来探讨一下Firefox 75在网络平台更新方面提供的功能。 图像的HTML延迟加载 延迟加载是通过将资源标识为非阻塞（非关键）资源、以仅在需要时加载而不是立即加载来提高性能的常见策略。图像是要在网络应用中延迟加载的最常见资产之一。 为了简化图像延迟加载，我们在HTML <img>元素上引入了对加载属性的支持。将值设置为lazy会指示浏览器推迟加载屏幕外的图像，直到用户滚动到附近为止。唯一可能的其他值为eager，如您所想，这是默认值。 […]
