即將發佈的Chrome 83版本引入了對DevTools的重要更新,包括對視覺缺陷的仿真和用戶本地化、跨域開放者策略(cross-origin opener policy,COOP)調試、跨域嵌入策略(cross-origin embedder policy,COEP)調試以及針對cookie路徑的網絡請求過濾。
由於新冠肺炎,Chrome團隊取消了Chrome 82的發佈,但他們比原計劃提前三週公佈了Chrome 83,現在的計劃是在5月中旬發佈。在這個版本中,Chrome DevTools取到了很多關鍵性的改進。
可以說Firefox的可訪問性查看器爲可訪問性提供了最好的內置瀏覽器支持,並在Firefox 70中增加了對視覺缺陷模擬的支持。Chrome 83的DevTools通過支持模糊視覺和四種顏色視覺缺陷彌補了這一差距:
- 紅色盲:無法感知紅光。
- 綠色盲:無法感知綠光。
- 藍色盲:無法感知藍光。
- 全色盲:除了灰色以外,不能感知任何顏色。
這些工具允許開發人員查看視覺缺陷用戶的體驗,並相應地調整配色方案和設計來提供更好的可訪問性。現在已經有很多工具可以測試這些限制,但是能夠在瀏覽器DevTools中直接使用這種支持可以讓所有開發人員更加便捷。
一些面向開發者的瀏覽器(例如Polypane)甚至提供了更好的視覺可訪問性支持,其中包括了對色盲、青光眼、遠視和太陽強光的仿真。
隨着瀏覽器對JavaScript國際化標準ECMA-402的實現,原生國際化的支持也在不斷改進。Chrome DevTools現在支持通過Sensors標籤來模擬特定地區。特定區域的設置會影響數字格式、字符串區域設置、語言字符串、HTTP語言頭等默認值。
隨着瀏覽器新特性的添加,跨域開發所帶來的新風險也隨之出現。現在Chrome DevTools網絡面板包含了對跨域開放者策略和跨域嵌入策略調試信息的支持,允許開發人員多線程使用SharedArrayBuffer。Chrome團隊認爲未來可能需要類似的限制來解鎖別的時間API和底層機制,包括利用performance.memory API進行的細粒度內存測量。
爲了幫助開發人員調試與cookie相關的網絡請求,DevTools網絡面板中新添加的cookie-path過濾器只允許顯示與關鍵字相關的請求。
Chrome DevTools通過不斷支持新的標準、模式、痛點和最佳實踐來幫助開發者構建高效的Web應用。如今,每一個Google Chrome版本都包含了DevTools。我們也鼓勵社區對DevTools所有新特性提供反饋。
原文鏈接:
https://www.infoq.com/news/2020/05/chrome-83-devtools-vision/