Articles by Chris Mills
-
Firefox 76: Worklets de audio y otros trucos
Hola amigos, espero que todos estén bien y se mantengan sanos y salvos. Cada nueva versión de nuestro navegador favorito viene siempre con una buena pizca de expectación, ¡y ya estamos aquí con Firefox 76! El soporte de la plataforma web recibe algunas excelentes novedades en esta actualización, como los worklets de audio y ciertas […]
-
Firefox 76: Audio worklets 以及其他更新
Firefox 76 在 Web 平台上提供很棒的新功能，例如改善 JavaScript 的 Audio Worklets 和 Intl。此外，我們也在 Firefox 的開發工具中添加許多新工能，使開發的過程更加輕鬆且便利。
-
Firefox 76：Audio Worklet和其他诀窍
Firefox 76为Web平台支持带来了新的出色功能，如Audio Worklet和JavaScript的Intl改进等。另外，Firefox DevTools中也添加了诸多一流改进，让JavaScript调试和开发变得更加轻松快捷。
-
Firefox 76: Audio worklets and other tricks
Firefox 76 delivers great new features for web platform support, such as Audio Worklets and
Intlimprovements, on the JavaScript side. Also, we’ve added a number of topnotch improvements to Firefox DevTools to make JavaScript debugging and development easier and quicker. -
Firefox 75: Metas para abril
Incluso en los actuales tiempos de aislamiento, nuestros equipos de ingeniería han sabido adaptarse, enfocarse y trabajar duro para ofrecer otra nueva y emocionante versión de Firefox al mundo. En lo que respecta a las herramientas para desarrollador, a partir de ahora encontramos un sistema de evaluación instantánea en la consola, puntos de interrupción de […]
-
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: Ambitions for April
Firefox 75 is chock full of handy new dev tooling: instant evaluation in the web console, event breakpoints for WebSockets, and more. New web platform features include HTML lazy loading for images, the CSS min(), max(), and clamp() functions, public static class fields, and additions to Web Animations API support.
-
La seguridad es todavía mejor con Firefox 74
El día de hoy se lanza Firefox número 74. Las funciones más relevantes que te presentamos esta vez son mejoras en la seguridad: Política de funciones, el encabezado Cross-Origin-Resource-Policy y la eliminación del soporte para TLS 1.0/1.1. También tenemos algunas nuevas funciones de propiedades de texto CSS, el operador de encadenamiento opcional JS y otras […]
-
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 […]
