Firefox 77新功能:開發者工具改良與Web平台更新

全新 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 和 JavaScript / TypeScript 等原始碼,現在應該就是會動了。

在 JavaScript 選定堆疊範圍中逐步除錯

步進是除錯時很關鍵,但卻又不直觀的環節。在步進和步出函數,或是在函式庫和自己的代碼之間轉移時,往往很容易迷失方向或跳過頭。

現在,除錯器會在步進時,遵循當前選擇的堆疊。這個功能在進入函數呼叫、或在堆疊中更下方的函式庫中暫停時特別實用。只需在「呼叫堆疊」(Call Stack)中選擇正確的函式,就可以跳至其當前暫停的行數,然後從那裡繼續逐步除錯。

查看呼叫堆疊並在同一個函式中繼續除錯

我們希望這可以使步進除錯的過程更加直觀,讓你更不會錯過重要的那一行程式。

網路和除錯器滿出來的功能

為了使工具列欄更加簡潔,網路和除錯器遵循主控制台的模方式,將結合部分現有的選取功能選項框格和新的功能選取框格,並合併到新的設置選單菜單中。這使得如「關閉Disable JavaScript」等的強大功能觸手可及,並為往後更強大的功能預留了更多空間。

網路和除錯器滿出來的工功能選項具欄溢出設置

在腳本讀取屬性或寫入屬性時暫停執行

了解狀態的改變是常透過主控制台來記錄或除錯時經常檢查的問題。Firefox 72 中推出的監看檢查點(Watchpoints)可以在程式腳本讀取屬性或寫入屬性時暫停執行。暫行執行時,你可以在 Scopes 窗格中的屬性上單擊右鍵,以新增監看檢查點。

在除錯器的 Scopes 窗格中的物件屬性單擊右鍵以新增 get/set 監看檢查點

貢獻者 Janelle deMent結合了 get / set ,讓監看檢查點在使用上更為方便。在新增這個選項之後,使任何程式參考script reference 都能將觸發暫停程序。

改善網路資料數據優化預覽

在先前的每個發行版本中,我們都針對網路絡的詳細訊息(Network details)面板窗格都有逐步進行了調整。因為舊的界面在具有事件處理有點的錯誤,在選擇和複製文字文本時很不穩定。此外,我們也提升了大量資料項型數據條目的性能。

這是大幅清理網路(Network)窗格的其中一步中較大幅的調整,而我們也不斷透過 @FirefoxDevTools TwitterMozilla’s Matrix community 針對社群用戶進行調查。歡迎加入我們,讓我們了解你們的想法。 只要取得 Firefox 開發者版本,就可以搶先體驗更多網路面板窗格側欄的新設計。

Web 網頁平台更新

Firefox 77 開始支援一些 Web 網頁平台的新功能。

String#replaceAll

Firefox 67 引入了String#matchAll,這是用來迭代字串中所有取代正規表達式匹配結果匹配更為的便捷的方法。在 Firefox 77 中,我們讓他更加方便是提升了整體的使用體驗: String#replaceAll可以用來替換所有相符出現的字串字符串──這個功能你之前可能曾經搜尋過千百次了。(特別感謝超有幫助的 StackOverflow 的大力幫忙!)

以前,如果想要用「dog」替換所有的「cat」時,必須使用全局正規則表達式

.replace(/cats/g, 'dogs');

或者,你也可以使用 split 再和 join

.split('cats').join('dogs');

現在,利用 String#replaceAll 可以大幅提升語法的可讀性:

.replaceAll('cats', 'dogs');

IndexedDB 游標請求

Firefox 77 將公開源自IDBCursor的起源(originated from),公開成請求為 該游標的屬性。這是一個很好的改進良,往後在編寫包裝如「升級」資料數據庫功能的包裝函式等等的內容將變得更加容易。以前要在游標位置上進行升級時,必須傳遞游標物件對象(cursor object)及其起源的請求物件對象(request object),因為前者仰賴於後者。但是在此一改變新版本優化之後,因為請求物件對象已可透過在游標取得上,所以現在只需要傳遞游標物件對象。

Firefox 77 擴充套件功能:減少授權及等其他功能

自 Firefox 57 版本發行以來,用戶會在附加元件的安裝與更新過程中或是在更新過程中,當有請求新權限請求時,用戶會看到附加元件擴充功能要使用訪問的權限。這些提示的頻率有時常多到令人感到不知所措,而且如果未能在附加元件擴充功能更新時,如果未能接受新的權限請求,這可能會使用戶陷入卡在只能使用舊版本的困境擾。現在擴充功能開發人員可以將某一些權限設置為選用自訂權限,如此一來就可以輕鬆地避免觸發過多的提示。選用自訂權限不會在安裝時,或在添加到擴充功能更新版本時觸發權限請求。另外,選用自訂權限也可以在執行時即時進行請求設置,因此以便用戶可以更加了解查看目前正在進行請求的權限的實際用途。

拜訪問附加元件部落格擴充功能專區了解 Firefox 77 更多附加元件的相關更新其他的擴充功能!

總結

以上就是這次 Firefox 77 的精采亮點!了解新功能並之後,記得動手親自體驗看看!與往常一樣,歡迎隨時留言反應反饋,或在評論區中提問。

About Florian Scholz

Florian is the Content Lead for MDN Web Docs, writes about Web platform technologies and researches browser compatibility data. He lives in Bremen, Germany.

More articles by Florian Scholz…

About Harald Kirschner (digitarald)

Harald "digitarald" Kirschner is a Product Manager for Firefox's Developer Experience and Tools – striving to empower creators to code, design & maintain a web that is open and accessible to all. During his 8 years at Mozilla, he has grown his skill set amidst performance, web APIs, mobile, installable web apps, data visualization, and developer outreach projects.

More articles by Harald Kirschner (digitarald)…

Firefox 77新功能:开发工具改进和Web平台更新

全新Firefox稳定版现已推出。版本77为Web开发人员带来了诸多新功能。

本文只是归纳了一些亮点;如需了解详细信息,请参见以下资源:

开发人员工具改进

首先来看看版本77中最值得关注的开发人员工具改进和补充。若要进一步了解进行中的工作并提供反馈,请下载Firefox DevEdition来抢先体验。

JavaScript调试更快速、更精简

大型Web应用可能会给DevTools带来挑战,因为捆绑、实时重载和依赖项都需要得到快速、正确地处理。在版本77中,Firefox的调试器有了更多本领,让您能够专注于调试。

我们经过多个发行版本改进了调试性能,在寻找可动手的高影响力Bug错误方面即将达到终点。因此,为了能找到残留的瓶颈,我们积极与社区交流。我们收到了许多详细的报告,实现了诸多性能改进,不仅加快了暂停和分步执行,同时也降低了不同时间点上的内存占用。

行之有效的JavaScript和CSS源映射

源映射是这次扩展的组成部分,在性能增强方面功效显著。部分内联源映射在加载时间上提升了10倍。但更重要的是,我们加强了更多源映射配置的可靠性。我们解决了解析和映射的回退问题,而这要归功于大家提供的有关生成稍有差错的源映射的报告。总体而言,之前无法加载您的原始CSS和JavaScript/TypeScript/etc代码的项目如今应该可以正常运作了。

在选定堆栈帧内分步执行JavaScript

分步执行是调试的一个重要部分,但不够直观明了。在进入和退出函数以及在库和自有代码之间移动时,您可能很容易迷失方向并超出范围。

现在,调试器可以在分步执行时遵从当前选定的堆栈。当您进入某个函数调用后,或者在堆栈深处的某个库方法上暂停时,这特别有用。只需在调用堆栈中选择正确的函数,即可跳转到当前暂停的行并从那里继续分步执行。

前往调用堆栈并在相应函数中继续分步执行

请翻译:Alt文本:前往调用堆栈并在相应函数中继续分步执行

希望这能让代码分步执行变得更加直观明了,并降低您遗漏重要代码行的几率。

Network和Debugger的溢出设置

为了造就更简洁的工具栏,Network和Debugger沿用与Console相同的范例,将现有和新的复选框组合成一个全新的设置菜单。这不仅让您一手掌握“Disable JavaScript”等功能强大的选项,也给未来更强大的选项留出余地。

Network和Debugger工具栏中的溢出设置菜单。

请翻译:Alt文本:Network和Debugger工具栏中的溢出设置菜单。

暂停属性读写

了解状态变化是个问题,通常通过控制台调试日志来调查。观察点(Watchpoint)是Firefox 72中引入的功能,可以在脚本读取或写入属性的过程中暂停执行。暂停之后,右键单击Scopes面板中的属性即可关联它们。

右键单击Debugger的Scopes中的对象属性以在get/set上中断

请翻译:Alt文本:右键单击Debugger的Scopes中的对象属性以在get/set上中断

感谢Janelle deMent的贡献,组合了get/set的新选项使观察点变得更易使用,任何脚本引用皆可触发暂停。

改进的Network数据预览

Network详情面板在每次发行时都有进步,如今已得到重新架构。旧界面中存在事件处理Bug错误,使选择和复制文本容易出错。我们不仅解决了这一点,也提升了大型数据输入的性能。

这是Network面板中重要界面清理工作的一部分,我们已就此通过@FirefoxDevTools TwitterMozilla的Matrix社区向社区发出了问卷调查。欢迎您分享您的见解。您也可下载Firefox DevEdition,抢先体验Network面板边栏的更多新设计。

Web平台更新

Firefox 77支持多项新的Web平台功能。

String#replaceAll

Firefox 67引入了String#matchAll,这是一种更便于迭代regex结果匹配项的方式。在Firefox 77中,我们让便捷程度更进一步:通过String#replaceAll来帮助替换字符串的所有实例;这或许是您长久以来梦寐以求的运算(感谢StackOverflow做出的巨大贡献!)。

在过去,若要将所有cats替换成dogs,必须要使用全局正则表达式

.replace(/cats/g, 'dogs');

或者,也可使用splitjoin

.split('cats').join('dogs');

现在,因为有了String#replaceAll,这变得更加易读了:

.replaceAll('cats', 'dogs');

IndexedDB光标请求

Firefox 77将IDBCursor所源自的请求作为光标上的属性来公开。这是一种精妙的改进,使得“升级”数据库功能的wrapper函数的编写变得更加轻松。在过去,如果要对光标进行这种升级,必须要传递光标对象和它所源自的请求对象,因为前者依赖于后者。有了这一改进,现在只需要传递光标对象,因为请求已在光标上可用。

Firefox 77中的扩展:请求变少,权限更多

从Firefox 57开始,用户在安装过程中或更新期间添加新权限时会看到扩展希望访问某些权限的提示。这些频繁出现的提示令人苦不堪言,假如在扩展更新过程中没有接受新的权限请求,用户便会滞留于旧版本中。我们减轻了扩展开发人员的负担,将更多权限作为可选权限提供,尽可能减少触发提示的次数。可选权限不会在安装期间或添加到扩展更新时触发权限请求,而且也可在运行时请求,因此用户可以在上下文中查看具体请求了哪些权限。

请访问加载项博客网站,进一步了解Firefox 77中的扩展更新!

总结

以上介绍了Firefox 77的亮点!敬请体验全新功能,享受其中的乐趣!与过去一样,欢迎您随时留言反馈并提出疑问。

About Florian Scholz

Florian is the Content Lead for MDN Web Docs, writes about Web platform technologies and researches browser compatibility data. He lives in Bremen, Germany.

More articles by Florian Scholz…

About Harald Kirschner (digitarald)

Harald "digitarald" Kirschner is a Product Manager for Firefox's Developer Experience and Tools – striving to empower creators to code, design & maintain a web that is open and accessible to all. During his 8 years at Mozilla, he has grown his skill set amidst performance, web APIs, mobile, installable web apps, data visualization, and developer outreach projects.

More articles by Harald Kirschner (digitarald)…