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() 的行為就像單擊了指定的提交按鈕一樣,而不僅僅是將表單數據發送給接收者。這將觸發提交事件,並在實際數據提交之前檢查表單的有效性。與此同時,舊的方法仍然可用。
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 示例之一中嘗試了此操作:
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);');
然後得到了以下結果:
在Firefox 73 中,參數也是默認顯示的,這將使得記錄JavaScript 函數更加直觀。
最後,關於控制台的部分,當在控制台中執行文本或正則表達式搜索時,可以通過在搜索項前加上“-”(即返回結果不包括該術語)來進行搜索。
WebSocket 檢查器的改進
Firefox 71 帶來的WebSocket 檢查器現在可以很好地打印WAMP 格式的消息(採用JSON、MsgPack 和CBOR 格式)。Inspector 現在還可以指示何時關閉WebSocket 連接。