Debugger.html 是一个开源项目，基于 React 和 Redux 构建，用作 Firefox、Chrome 和 Node 的独立调试器。该调试器也正在集成到 Firefox 开发者工具 中。目前，它在 Firefox 53 版本中可用，但需要通过 devtools.debugger.new-debugger-frontend 偏好设置启用。

Debugger.html 项目于 去年 9 月发布，并不断改进，增加了新的功能。在这篇文章中，我们将介绍一些目前正在开发或最近实施的调用栈显示更改。

调用栈显示

大多数 JavaScript 调试器都提供了调用栈的可视化表示。此显示表示执行上下文栈或简称调用栈，为当前正在执行的每个嵌套调用显示一个帧。一般来说，执行上下文指的是函数运行的环境，包括作用域变量、函数参数等。如果您的应用程序提供了一个执行函数 A 的按钮，则单击该按钮时会创建一个新的执行上下文并将其加载到调用栈上。函数 A 可能会调用函数 B。

在这种情况下，将为函数 B 创建一个执行上下文并将其加载到调用栈的顶部。如果函数 B 设置了断点，则调用栈显示将显示按钮函数的一个帧、函数 A 的一个帧和函数 B 的一个帧。从本质上讲，调用栈显示显示了一系列等待完成并返回值的函数。

在调用栈显示中选择一个帧将使用该特定帧的变量更新作用域显示。单击显示中的文件名将在编辑器中打开该特定文件。调用栈显示是跟踪应用程序执行流程的绝佳工具。也就是说，对于复杂的库或框架，显示可能会变得复杂且难以理解。

Debugger.html 团队正在开发一些关键功能，这些功能将提高调用栈显示的可用性，并使其更易于理解。我们将仔细看看这四个方面

• 简化函数名称
• 突出显示库
• 折叠库帧
• 命名库帧

简化函数名称

绝大多数 JavaScript 函数 都是未命名的，因此是匿名的。这带来了一个问题：调用栈目前为匿名函数提供了冗长的函数名称。在实践中，匿名函数可能会被赋予 app.AppView<.success 这样的名称，因为它是在 AppView 类中定义的。能够快速扫描调用栈非常重要。在这种情况下，查看尽可能简单的名称（success）非常有用。将下面的图像与之前调用栈的图像进行比较。此功能目前已在 debugger.html 项目的最新源代码中实现。

突出显示库

库和框架被大量用于 Web 应用程序。在调试代码的过程中，向库或框架发送调用可能会很快填满调用栈显示。在大多数情况下，可以快速识别并排除库以进行调试工作，因为大多数错误都可能出现在自定义应用程序代码中。调试器现在包含一个库突出显示功能，该功能用库名称和徽标替换文件 URL 和行位置，以便您可以更有效地将调试工作集中在自己的代码上。

请注意，如果您需要调试库，可以在调试器设置页面中恢复此设置。

折叠库帧

以类似的方式，您可以通过将调用栈显示中库内的多个函数调用折叠成一行来简化调试工作的视图。这将进一步减少视觉干扰，并帮助您找到并调试应用程序代码。启用此功能后，以前的堆栈跟踪现在如下所示

然后，您可以通过单击该帧将其打开以查看嵌套帧。

启用这三个功能后，您可以访问一个非常简单的视图，从而可以改进您的调试工作流程。与之前的功能一样，可以禁用折叠。

命名库帧

折叠库帧提供了额外的好处。它为您提供了一种方法来描述库在折叠的组合行中执行的操作。例如，我们可以简单地显示标签事件，而不是显示 jQuery elemData.handle 和 event.dispatch 函数的两个帧。这还可以鼓励更好的命名约定，用于描述特定库或框架操作，例如渲染、路由或执行任何其他任务。例如，在上图的调用栈显示中，显示将显示 Backbone 模型和视图何时创建。

此功能目前正在开发中，以便为折叠的库帧中发生的库操作提供更好的名称。命名应特定于各个库，并应总结折叠显示项所表示的代码行中发生的所有操作。

结论

我们对新的调用栈如何帮助用户调试和改进其 Web 应用程序感到非常兴奋。这仅仅是开始，我们希望在未来几个月内推出更多框架改进。

Debugger.html 团队欢迎新的 贡献者 和改进工具的建议。如果您有兴趣帮助构建或对改进产品有建议，请查看 GitHub 页面上的 自述文件。