【WebStorm教程】WebStorm 断点调试检查暂停的程序

调试器会话 启动后，将出现调试工具窗口，程序将正常运行，直到遇到断点或您手动暂停程序。

之后，程序暂停，允许您检查其当前状态，控制其进一步执行，并在运行时测试各种场景。

如果您不小心关闭了调试工具窗口，请选择查看 | 工具窗口 | 从主菜单调试Alt+5或按重新打开它。

检查调用堆栈

当程序暂停时，将您带到这一点的调用堆栈将显示在Frames窗格中。

在调试多进程 Node.js 应用程序或 Service Worker 时，可以在线程之间切换。Frames窗格显示所选线程的调用堆栈。从多进程调试和Debugging Workers中了解更多信息。

在其他情况下，当只有一个线程时，框架窗格仍会在线程字段中显示主线程。

一个框架对应于活动的方法或函数调用。它存储被调用方法或函数的局部变量、其参数以及启用表达式求值的代码上下文。

每次调用方法或函数时，都会在堆栈顶部添加一个新帧。当方法或函数的执行完成时，从堆栈中删除相应的帧（以后进先出的方式）。

检查帧可以帮助您了解为什么将特定参数传递给方法或函数以及调用者在调用时的状态。

隐藏库中的框架

• 如果您的程序使用外部库，并且您想省略在库类中进行的调用，请单击“框架”选项卡右上角的“从库中隐藏框架”按钮。

将堆栈复制到剪贴板

• 要复制当前线程的调用堆栈，请右键单击Frames选项卡上的任意位置并选择Copy Stack。

检查/更新变量

变量选项卡显示所选框架/线程中的变量列表。检查变量有助于理解程序为何以某种方式运行。

注意变量范围和生命周期。如果列表中不存在变量，则意味着该变量超出了当前执行点的当前帧的范围。

每个变量左侧的图标表示其类型。

复制变量

检查变量时，您可能需要复制变量名称或值以将其粘贴到其他位置或将其与另一个变量进行比较。

• 要复制变量保存的值，请右键单击该变量并选择Copy Value Ctrl+C。对于 以外的类型String，将toString复制表示。
• 要复制变量的名称，请右键单击该变量并选择Copy Name。

将变量与剪贴板进行比较

当您需要将变量值与其他值进行比较时，请使用将值与剪贴板进行比较选项。这很有帮助，例如，当一个变量包含一个长字符串时，您需要将它与另一个长字符串进行比较。

1. 复制您要比较的内容（例如，从文本文件中）。
2. 在变量选项卡中，右键单击要与之比较的变量，然后选择将值与剪贴板进行比较。
3. 检查打开的差异查看器中的差异。有关如何有效使用差异查看器的其他信息，请参阅比较文件和文件夹主题。

在专用对话框中查看变量

WebStorm 允许您在专用对话框中检查变量。当您需要跟踪某个变量（或其引用的对象）并同时能够在帧和线程之间导航时，这很有用。

• 右键单击变量选项卡上的变量并选择检查。

设置变量值

如果需要测试程序在特定条件下的行为或在运行时修复其当前行为，您可以通过设置/更改变量值来实现。

1. 右键单击变量选项卡上的变量并选择设置值，或选择变量并按F2。
2. 输入变量的值并按Enter。

导航到源代码

如果您需要查看声明了某个变量或类的源代码，您可以直接从“变量”选项卡移到那里。

• 要导航到声明变量的代码，请右键单击变量并选择Jump to Source F4。
• 要导航到变量类型的类声明，请右键单击变量并选择Jump to Type Source F4。

评估表达式

WebStorm 允许您在调试会话期间评估表达式以获取有关程序状态的其他详细信息或在运行时测试各种场景。

在评估表达式时，请注意变量范围和生命周期。所有表达式都在当前执行点的上下文中进行评估。

在编辑器中计算一个简单的表达式

评估表达式的最简单方法是在代码中指向它。虽然这是最快的方法，但它不能用于评估方法调用。这样做是为了安全，因为它们可能会产生副作用。

当您需要从编辑器快速计算表达式时，请使用此选项。

1. 指向您要评估的表达式。表达式的结果出现在工具提示中。

1. 如果您需要查看子元素，请单击或按Ctrl+F1。

如果您发现价值工具提示令人分心，您可以增加延迟或完全禁用它们。为此，在设置/首选项对话框 ( Ctrl+Alt+S) 中，转到构建、执行、部署 | 调试器 | 数据视图并根据需要设置显示值工具提示和值工具提示延迟选项。

在编辑器中计算一个复杂的表达式

如果要计算代码中涉及方法调用的表达式，或者要具体说明要计算表达式的哪个部分，请使用“快速计算表达式”选项。

仅当程序在遇到断点后暂停（不是手动暂停）时，此选项才可用。

1. 将插入符号放在表达式上（以评估最接近的匹配表达式）或选择其中的一部分（如果您想具体说明要评估复杂表达式的哪一部分）。
2. 单击运行 | 调试操作 | 快速评估表达式 Ctrl+Alt+F8。或者，按住Alt并单击选择。

如果从表达式调用的方法内部有断点，它们将被忽略。

调用方法时，请确保您了解它们可能的副作用（例如，更改外部变量），因为它们可能会改变程序流程或结果。

您可以将快速评估配置为只需选择一段代码即可（不使用菜单/快捷方式）。请谨慎使用此选项，因为启用它时您可能会意外调用方法。

要配置代码选择的快速评估，请转到设置/首选项 | 构建、执行、部署 | 调试器 | 数据视图并将在代码选择上显示值工具提示选项设置为首选。

评估任意表达式

评估任意表达式是最灵活的评估选项。只要它在当前帧的上下文中，它就可以让您评估任何代码。使用它，您可以评估声明、方法调用、循环、匿名类、箭头函数等。

使用此功能可获取有关程序当前状态的其他信息，并在同一调试会话中测试各种场景。这通过减少您必须运行的会话数量来节省大量时间。

仅当程序在遇到断点后暂停（不是手动暂停）时，此选项才可用。

1. 如果您想从当前在您面前的某个表达式或变量开始（例如，在编辑器中或在“变量”选项卡上），请选择它。

1. 单击运行 | 调试操作 | 评估表达式 Alt+F8。快捷方式可能在 Ubuntu 上不起作用（为了正确操作，请调整快捷方式配置）。
2. 在“评估”对话框中，修改选定的表达式或在“表达式”字段中输入新的表达式。如果您要评估代码片段，请单击展开 Shift+Enter。

如有必要，调整文件大小以适应您的代码片段。

请记住，表达式主体中声明的任何变量在计算表达式后都会超出范围。

1. 单击评估（Ctrl+Enter对于多行模式）。表达式结果出现在结果字段中。

表达式的结果取自 return 语句。当没有 return 语句时，结果取自代码的最后一行（它甚至不必是表达式：文字也可以）。当没有有效的行可以取值时，结果为undefined. 如果无法评估指定的表达式，则Result字段指示原因。

如果从表达式调用的方法内部有断点，它们将被忽略。

调用方法时，请确保您了解它们可能的副作用（例如，更改外部变量），因为它们可能会改变程序流程或结果。

Evaluate对话框是非模态的，因此您可以将焦点切换回编辑器以复制其他变量和表达式。如有必要，您还可以打开多个评估对话框。

内联查看值

WebStorm 通过在变量使用旁边显示变量的值来促进调试过程。

一旦变量值改变了，内联视图就会用新值更新并改变它的颜色。

如果一行包含对对象的引用，您可以直接在编辑器中检查其字段。从此弹出窗口中，您还可以更改变量值并添加内联Watches。

默认情况下启用内联值视图。要关闭它，在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Build, Execution, Deployment | 调试器 | 数据视图并禁用显示值内联选项。

添加内联Watches

如果您希望某个表达式的结果出现在特定的行上，您可以为此设置一个内联监视。内联监视是持久的，并在会话重新启动后保持活动状态。

1. 单击引用您要跟踪其字段的对象的内联提示。
2. 在弹出窗口中，选择字段并单击Add as Inline Watch。

1. 如果需要，微调Watches。您可以使用任何有效的表达式作为Watches。

您在编辑器中设置的内联监视也显示在调试工具窗口的变量窗格中的内联监视下：

要移除内嵌Watches，请将鼠标悬停在Watches上并单击其附近的十字。

Watches

如果要跟踪某个变量或更复杂表达式的结果，请为此变量或表达式设置监视。当您需要添加一些不经常显示在变量列表中的内容或固定某个实例变量从而消除在每一步之后展开树的需要时，这很有用。

仅当程序在遇到断点后暂停（不是手动暂停）时，此选项才可用。

调用方法时，请确保您了解它们可能的副作用（例如，更改外部变量），因为它们可能会改变程序流程或结果。

Watches在所选帧的上下文中进行评估。当Watches脱离上下文或编译失败时，它们不能被评估。如果是这种情况，Watches会标有错误图标。

默认情况下，Watches选项卡处于隐藏状态，而 Watches 显示在Variables选项卡上。要隐藏/显示Watches选项卡，请使用Variables或Watches选项卡上的Show Watches in variables 选项卡按钮。

添加Watches

1. 单击 变量选项卡上的新建观察。
2. 输入要计算的变量或表达式。在表达式中，您可以评估方法调用、箭头函数、声明变量等，只要这是在本地上下文中。

如果您要跟踪的变量或表达式已经在您面前（例如，在代码编辑器中或在“变量”选项卡上），您只需选择并将其拖动到“监视”选项卡即可。对于变量，您还可以在“变量”选项卡中右键单击它们，然后选择“添加到观察”。

将变量/表达式添加到Watches后，它会保留在那里并针对每个step进行评估，从而为您提供当前上下文中的结果。

编辑Watches

• 右键单击所需的Watches并选择Edit。

复制Watches

1. 选择您要复制的Watches。
2. 单击变量/监视选项卡上的重复监视 或按。Ctrl+D

更改Watches的顺序

为方便起见，您可以更改Watches在变量/Watches选项卡上的显示顺序。

• 使用“变量/监视”选项卡上的“向上移动监视” / “向下移动监视”按钮或键盘快捷键。Ctrl+UpCtrl+Down

删除Watches

• 要删除单个监视，请右键单击它并在变量/监视选项卡上选择删除监视。 N/A
• 要删除所有监视，请右键单击变量/监视选项卡上的任意位置，然后选择删除所有监视。

监视允许与变量相同的操作。例如，您可以在专用对话框中查看它们或使用它们导航到源代码。

Watches是您项目的一部分。这意味着您可以停止并重新运行调试会话，而不会丢失它们。

返回当前执行点

检查程序状态涉及在代码中导航，并且您经常需要返回到程序暂停的地方。

执行以下操作之一：

• 从主菜单中，选择运行 | 调试操作 | 显示执行点。
• 按Alt+F10。
• 单击调试工具窗口的步进工具栏。

当前执行点用蓝线表示。此行的代码尚未执行。