弃用 Chrome DevTools 中的 JavaScript 源代码实时编辑功能

发布时间:2025 年 10 月 22 日

Chrome 即将弃用实时编辑 JavaScript 源代码功能。在 Chrome 142 中,此功能将移至实验标志后,我们计划在 Chrome 145(2026 年 2 月)中完全移除此功能。我们不会移除与源文件相关的其他强大功能,例如本地替换工作区代码段,这些功能将继续获得全面支持。

Chrome 开发者工具团队一直在努力为开发者提供强大而可靠的工具。为此,我们有时需要停用不再发挥作用的功能。我们经过慎重考虑后做出了此决定,因为该功能的维护成本过高,使用率过低,而且有更出色的现代替代方案。我们知道,任何工作流的变更都可能会造成影响,因此本文旨在清晰地说明我们的理由。

什么是实时编辑?

借助实时编辑功能,您可以在运行时动态替换脚本文件的内容。即使脚本在断点处暂停,此功能也能正常运行。您可以在“来源”面板中修改 JavaScript 代码,然后通过保存文件 (Command+S / Ctrl+S) 来应用更改。然后,调试器会修补在运行时已定义的函数。如果修改后的函数位于调用堆栈中,系统也会重新启动该函数。

其目的是提供一种在不完全重新加载页面的情况下测试小更改的方法,否则会清除应用的状态。这样一来,它的目标就类似于热模块替换 (HMR) 在现代开发堆栈中实现的目标。

我们为何要移除它?

实时编辑的用户体验一直以来都是一个难题。相关快捷键(Command+S / Ctrl+S)通常与保存文件相关联,但不会产生进一步的副作用,这可能会令人感到意外。如果失败,反馈可能不明确:开发者工具可能会显示一条警告消息,例如“LiveEdit failed: Functions that are on the stack (currently being executed) can not be edited”(LiveEdit 失败:堆栈上的函数(当前正在执行)无法编辑),这条消息可能会被忽略,导致开发者不确定其更改是否已应用。

当实时编辑与源代码文件相关的其他开发者工具功能互动时,情况会变得更糟。例如,实时编辑开发者工具代码段的内容可能会使开发者工具混淆代码段来源的身份,从而导致新版本显示为只读文件。启用工作区功能后,开发者工具可能会观察文件系统中的源代码更改,并将这些更改无缝应用到实时网页。这种行为可能符合预期,也可能让用户感到意外,具体取决于用户的环境和工具链设置。

实时编辑最初尝试解决的问题(即在不丢失应用状态的情况下进行更改)现在已通过热模块替换 (HMR) 更有效地解决。HMR 是 React、Angular 或 Vue 等现代 Web 开发框架中的标准功能。它在用户空间中实现了相同的效果,并且抽象级别更高。开发者工具中的实时编辑可能会干扰该功能,导致出现意外和错误的行为。

这些问题会导致用户体验不佳。此外,根据我们的使用情况统计数据,该功能尚未成为大多数开发者工作流程的核心部分。使用此功能的用户数量非常少,并且呈下降趋势。

维护成本高,技术复杂性高

就定义合理的语义而言,替换实时网页上的代码并不简单,就实现而言也是如此。这会给 V8 JavaScript 引擎和 Chrome 开发者工具带来巨大的工程成本,需要在 V8 的许多部分进行仔细考虑。除非非常谨慎,否则实时编辑可能会导致难以重现且难以调试的崩溃。例如,如果某个函数的新版本包含的正则表达式、对象或函数字面量数量与旧版本不同,则需要仔细协调跟踪这些字面量的数据结构。

这种维护负担会减慢新 JavaScript 功能的实现速度,并从改进更广泛使用的开发者工具功能中抽调资源。

这种复杂性还导致了许多不受支持的场景,包括:

  • 编辑位于调用堆栈上但不是最顶层框架的函数。
  • 修改异步函数或生成器。
  • 修改 ES 模块的顶级代码。

替代方案

如前所述,热模块替换 (HMR) 是一种更受欢迎的替代方案,在以下几个关键方面优于实时编辑:

  • 实时编辑会在源代码级别替换实时网页旧版本的部分内容。另一方面,HMR 会在 Web 框架预期的抽象级别替换旧版本,从而提高在实时更新期间正确迁移组件和应用状态的可能性。
  • HMR 适用于您编写的源代码。您可以在编辑器中修改原始文件(例如 TypeScript、JSX),然后由 build 工具处理浏览器中的更新;而实时编辑只会影响已部署的源文件,这些文件在许多情况下是工具链生成的 build 输出。
  • 它既强大又集成良好。HMR 是现代开发工具链的核心部分,可在更新成功或失败时提供清晰的反馈,从而带来可靠的体验。

移除实时编辑功能不会影响 Chrome 开发者工具中的另外两项强大功能:

  • 借助本地替换功能,您可以拦截网络请求并改用本地文件。如果您无法访问源代码,则非常适合在实时生产网站上对更改进行原型设计。这些更改在重新加载页面后仍会保留。
  • 工作区通过在“来源”面板和本地项目文件之间创建双向绑定,将开发者工具变成更强大的编辑器。当您在开发者工具中保存更改时,系统会直接将更改保存到文件系统中。然后,这可能会触发开发服务器的 HMR 或实时重新加载流程。

总结

我们之所以移除实时编辑功能,是因为其维护成本高昂且使用率低,无法持续提供。现代 Web 开发生态系统在热模块替换方面提供了更出色的解决方案。

停用此功能后,我们可以将工程资源集中在 Chrome 开发者工具中更具影响力的部分。移除时间表如下:

  • 不久的将来:此功能将在 Chrome 142 中移至实验性功能,并作为 Chrome flag (chrome://flags/#devtools-live-edit) 提供。
  • Chrome 145(2026 年 2 月):该功能和相应的 Chrome 标志将被完全移除。

欢迎您针对此变更提供反馈意见。针对反馈问题添加评论。