Chris Mills 的文章
-
Firefox 76：音频工作线程和其他技巧
大家好，希望大家一切安好，身体健康。我们最喜欢的浏览器每次新版本发布都伴随着期待，现在 Firefox 76 已经发布了！此更新为 Web 平台支持带来了很多很棒的新功能，比如音频工作线程和一些 […]
-
Firefox 76：音频工作线程以及其他更新
Firefox 76 在 Web 平台上提供很棒的新功能，例如改善 JavaScript 的音频工作线程和 Intl。此外，我们也在 Firefox 的开发工具中添加了许多新功能，使开发的过程更加轻松且便利。
-
Firefox 76：音频工作线程和其他诀窍
Firefox 76 为 Web 平台支持带来了新的出色功能，如音频工作线程和 JavaScript 的 Intl 改进等。另外，Firefox DevTools 中也添加了诸多一流改进，让 JavaScript 调试和开发变得更加轻松快捷。
-
Firefox 76：音频工作线程和其他技巧
Firefox 76 为 Web 平台支持提供了很棒的新功能，例如 JavaScript 方面的音频工作线程和
Intl方面的改进。此外，我们还为 Firefox DevTools 添加了一些顶级改进，使 JavaScript 调试和开发变得更加轻松快捷。 -
Firefox 75：四月的目标
即使在目前的隔离时期，我们的工程团队也已经适应，保持专注并努力工作，为世界带来另一个令人兴奋的 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 <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 支持的补充。
-
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 […]
