未分類 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 <img>元素的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。你現在可以使用<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 […]
