文章
-
Firefox 浏览器中的工程代码质量：工具和挑战
以下是 Firefox 代码质量工具链的内部视角，该工具链旨在管理我们桌面浏览器的持续开发和每月发布。本文探讨了管理代码质量和处理 2100 万行代码的补丁的过程的架构、挑战和持续演变。
-
Firefox 75：四月的目标
即使在当前的隔离时期，我们的工程团队也能够适应、专注并努力工作，为世界带来另一个激动人心的 Firefox 版本。在开发者工具方面，我们现在在控制台中拥有即时评估、WebSockets 断点等等。在 Web 平台方面，新增功能包括 HTML 延迟加载图像、CSS min()、max() 和 clamp() 函数、公共静态类字段以及对 Web 动画 API 支持的补充。[...]
-
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 <img>元素的load屬性。只要將之設定為lazy，就可以使瀏覽器延遲載入尚未出現在畫面中的圖片，直到使用者快瀏覽到圖片時才加以載入。另一個屬性則是eager，也就是一般預設的屬性。 [...]
-
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，如您所想，这是默认值。 [...]
-
Firefox 75：四月的雄心
Firefox 75 充满了方便的新开发者工具：网页控制台中的即时评估、WebSockets 的事件断点等等。新的 Web 平台功能包括图像的 HTML 延迟加载、CSS min()、max() 和 clamp() 函数、公共静态类字段以及对 Web 动画 API 支持的补充。
-
Twitter 直接消息缓存和 Firefox
杰出工程师 Martin Thomson 解释了这个问题是如何发生的、可能受影响的人员的影响以及将来如何避免此类问题。为此，我们需要深入了解 Web 缓存的工作原理。
-
Web 货币化的创新：Coil 和 Firefox Reality
一篇关于使用 Coil 进行 Web 货币化的深入介绍。Coil 是一个支付平台，它不依赖于广告或个人数据收集来直接支持数字内容创作者。Firefox Reality 正在为创作者和消费者推出一个基于 Coil 的实验，欢迎您参与或了解更多关于其工作原理以及 Mozilla 参与其中的原因。
-
Firefox 74 让安全更上一层楼
今天发布了 Firefox 74。本次我们重点介绍的安全增强功能包括：功能策略、跨源资源策略标头以及删除对 TLS 1.0/1.1 的支持。我们还有一些新的 CSS 文本属性功能、JS 可选链操作符等等[...]
-
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。你現在可以使用<iframe> allow屬性還有Feature-Policy HTTP標頭設定頂級文檔和iframe功能權限。語法範例如下： <iframe src="https://example.com" allow="fullscreen"></iframe> Feature-Policy: microphone 'none'; geolocation 'none' CORP 我們也啟用支援Cross-Origin-Resource-Policy (CORP)標頭，允許網站和應用程序因安全考量選擇拒絕針對某些跨域請求。例如：<script>和<img>元素。這也可以幫助減少潛在的旁路攻擊（例如Spectre和Meltdown）以及跨網站指令碼包含攻擊。 可用的屬性有same-origin和same-site。same-origin僅允許擁有相同scheme，host和port的請求讀取相關資源。這和網絡的默認同源協定相比，提供更高級的保護。same-site僅允許共享同一網站的請求。 可以將標頭依照以下範例運用CORP，例如： Cross-Origin-Resource-Policy: same-site 移除TLS 1.0 / 1.1 最後，Firefox 74為了提升整體Web平台的安全性，取消支援TLS 1.0 / 1.1。這對於推動TLS生態系統的發展很重要，同時也可以消除TLS 1.0 / 1.1導致的許多漏洞。這項功能沒有像我們希望的那麼有效，它們需要退場了。 2018年10月在Mozilla，Google，Microsoft和Apple的共同倡議下，首次宣布這項變更。2020年3月，我們現在都兌現了我們的諾言（蘋果公司除外，蘋果公司稍後將進行變更）。 結論是你要確保你的Web服務器支持TLS 1.2或1.3。請閱讀移除TLS 1.0 and 1.1更新了解如何測試和更新TLS […]
-
Firefox 74，为安全赋予更多价值
Firefox 74已于今日发布。新版本最重要的新增功能体现在安全性方面的增强：特征策略（feature policy）、Cross-Origin-Resource-Policy标头及取消了对TLS 1.0 / 1.1的支持。我们还提供了一些新的CSS文本属性功能、可选JS链接运算符和其他2D画布文本测量功能，以及海量DevTools增强功能和错误修复功能。请照例阅读重点内容或从以下文章中找到所有新增内容的完整列表： Firefox 74开发人员必读 Firefox 74网站兼容性 Firefox 74最终用户发行说明 安全性增强 让我们了解一下74版本在安全性上的增强。 特征策略（Feature Policy） 最终版中Feature Policy（功能策略）默认开启。您现在可以使用<iframe> allow属性和Feature-PolicyHTTP标头为顶级文档和iframe设置功能权限。语法示例如下： <iframe src="https://example.com" allow="fullscreen"></iframe> Feature-Policy: microphone 'none'; geolocation 'none' CORP 我们还提供对Cross-Origin-Resource-Policy（CORP）标头的支持，允许站点和应用程序选择拒绝某些跨域请求（例如来自<script>和<img>元素的请求）。这有助于减少潜在的旁路攻击（例如Spectre和Meltdown）以及跨站点脚本包含攻击。 选项包括same-origin和same-site。same-origin仅允许同一方案、主机和端口的请求读取相关资源。除网络默认的同源策略外，它还提供了更多级别的保护。same-site仅允许来自同一站点的请求。 若要使用CORP，则必须将标头设置为下列值之一，例如： Cross-Origin-Resource-Policy: same-site 移除TLS 1.0 / 1.1 最后还有一点（但并非不重要），Firefox 74取消了对TLS 1.0 / 1.1的支持，以帮助提高Web平台的总体安全级别。这对于推动TLS生态系统向前发展以及消除由TLS 1.0 / 1.1造成的许多漏洞至关重要，TLS 1.0 / 1.1并没有我们想像的那样健壮，急需隐退。 Mozilla、Google、Microsoft和Apple于2018年10月首次共同倡议对其进行修改。如今到了2020年3月，我们都兑现了诺言（Apple除外，Apple将稍晚些时候做出更改）。 其结果是要确保您的Web服务器支持TLS 1.2或1.3以上。请阅读有关移除TLS 1.0和1.1的更新说明，以了解如何测试和更新TLS/SSL配置。从现在开始，连接到使用旧版本TLS的服务器时，Firefox将返回安全连接失败（Secure Connection Failed）错误。如果尚未升级，请立即升级！ 注意:在未来几个发布周期（对于Firefox的延长支持版本来说，发布周期会更长），安全连接失败（Secure […]
