Firefox 73 為開發者帶來的亮點一覽

Firefox 73 於前兩天剛剛發佈,Mozilla 的高級技術作者 Chris Mills 在最新發表的一篇文章中,為大家分享了此次更新給開發者帶來的亮點,下面一起來看看:

Web 平臺語言功能

最新版的 Firefox 為 Web 平臺提供了不少改進。首先是添加了 CSS 邏輯屬性,包括 overscroll-behavior-block 和 overscroll-behavior-inline。這些新屬性提供了 overscroll-behavior-x 和 overscroll-behavior-y 的邏輯替代,它們使開發人員能夠更好地控制瀏覽器的行為,尤其是在達到滾動區域的邊界時。

此外,現在還可以在 DateTimeFormat.prototype.formatToParts() 方法中使用 yearName 和 relatedYear 字段。CJK(中文、日文、韓文)日曆由此受益,從而可以啟用一些格式設置選項。

HTMLFormElement 接口也有了一個新方法 requestSubmit()。與舊的 commit() 方法不同,requestSubmit() 的行為就像單擊了指定的提交按鈕一樣,而不僅僅是將表單數據發送給接收者。這將觸發提交事件,並在實際數據提交之前檢查表單的有效性。與此同時,舊的方法仍然可用。(注:原文作者最新聲明,requestSubmit() 方法實際上還未加入 Firefox 73,其目標是在 Firefox 75 中啟用。)

DevTools 更新

此版本還帶來了一些 DevTools 更新。Chris 表示,他們經常通過 @FirefoxDevTools Twitter 帳戶不斷對 DevTools 用戶進行調查,結果因此產生了許多有用的更新。 例如,根據其中一項反饋,現在可以從 “Inspector’s Changes” 面板中複製更清晰的 CSS 代碼段,輸出中的 + 和 - 號不再是複製文本的一部分。

穩定且快速

此版本的 DevTools 著重於提高性能。在 “Network” 面板中收集快速啟動請求的過程變得更加輕快,這使得 UI 更加靈活。同樣的,大型的源映射腳本現在在 Debugger 中也加載得更快,並且減輕了控制檯的負擔。

當在加載頁面上打開 DevTools 時,在調試器中加載正確的源代碼並非那麼容易。因為實際上,現代瀏覽器被解析、渲染或執行,甚至不再被需要時,它們是很擅長清除原始文件的。而 Firefox 73 使腳本加載更加可靠,並能夠確保開發人員獲得正確的文件進行調試。

更智能的控制檯

此前,CORS network errors 只是被顯示為警告,因此當資源無法加載時,它們很容易被忽略。現在,它們正確地被報告為錯誤,而不是警告,從而具有了應有的可見性。

另外,表達式中聲明的變量現在將包含在自動完成中。此更改使在多行編輯器中創作更長的片段變得更加容易。用於自動關閉括號的 DevTools 設置現在也可以在控制檯中使用,從而給開發者帶來更接近在 IDE 中進行創作的體驗。

還有,你知道控制檯日誌可以設置背景樣式嗎?要獲得更多的多樣性,可以使用 data-uris 添加圖像。該功能現在已經可以在 Firefox 中使用,Chris 舉了一個例子,他在 Fetch 示例之一中嘗試了此操作:

<code>console.log('There has been a problem with your fetch operation: %c' +e.message, 'color: red; padding: 2px 2px 2px 20px; background: yellow 3px no-repeaturl(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAApUlEQVQoz5WSwQ3DIBAE50wEEkWkABdBT+bhNqwoldBHJF58kzryIp+zgwiK5JX2w+2xdwugMMZ4IAIZeCszELX2hYhcgQIkEQnOOe+c8yISgAQU1Rw3F2BdlmWig56tQNmdIpA68Qbcu6akWrJat7gp27EDkCdgttY+uoaX8oBq5gsDiMgToNY6Kv+OZIzxfZT7SP+W3oZLj2JtHUaxnnu4s1/jA4NbNZ3AI9YEAAAAAElFTkSuQmCC);');/<code>

然後得到了以下結果:

Firefox 73 為開發者帶來的亮點一覽

在 Firefox 73 中,參數也是默認顯示的,這將使得記錄 JavaScript 函數更加直觀。

最後,關於控制檯的部分,當在控制檯中執行文本或正則表達式搜索時,可以通過在搜索項前加上 “-”(即返回結果不包括該術語)來進行搜索。

WebSocket 檢查器的改進

Firefox 71 帶來的 WebSocket 檢查器現在可以很好地打印 WAMP 格式的消息(採用 JSON、MsgPack 和 CBOR 格式)。Inspector 現在還可以指示何時關閉 WebSocket 連接。

Firefox 73 為開發者帶來的亮點一覽


分享到:


相關文章: