检查挂起的程序

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

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

检查调用栈

当程序被挂起时，将在窗口窗格中显示将您带到此点的调用栈。

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

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

帧对应于活动的方法或函数调用。它存储了被调用方法或函数的局部变量、其参数以及使表达式求值成为可能的代码上下文。

每次调用 method 时，都会在栈顶新增一个帧。当 method 的执行完成时，相应的帧将从堆栈中移除（最后一个进，最先一个出）。

检查帧有助于您理解为什么将特定参数传递给方法或函数，以及调用时调用者的状态。

默认情况下，WebStorm 会隐藏对应框架和库调用的帧。

显示来自库的帧

要显示隐藏的框架，请按右上角的显示所有框架切换按钮，该按钮位于窗口面板中。
要隐藏库帧，请释放在库中隐藏帧切换按钮。

复制堆栈到剪贴板

要复制当前线程的调用堆栈，请右键点击帧选项卡上的任意位置，然后选择 Copy Stack。

检查/更新变量

变量选项卡显示所选帧/线程中的变量列表。检查变量可以帮助您理解程序为何以某种方式运行。

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

复制变量

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

要复制变量的名称，请右键点击变量并选择 Copy Name。
要复制变量所持有的值，请右键点击变量并选择 Copy Value Ctrl+C。对于 字符串 以外的类型，将复制 toString 表示形式。

与剪贴板比较变量

将变量值与其他值进行比较，请使用 Compare Value with Clipboard 选项。这很有用，例如，当一个变量包含一个长字符串时，您需要将其与另一个长字符串进行比较。

将您想要比较的内容复制，例如，从一个文本文件中。
在变量选项卡中，右键点击一个变量并选择 Compare Value with Clipboard。
在打开的差异查看器中检查差异。如需了解更多关于差异查看器的信息，请参阅比较文件和文件夹。

在专用对话框中查看变量

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

右键点击变量或监视并选择检查。

设置变量值

如果您想测试程序在特定数据下的行为或在运行时更改其流程，可以通过更改变量值来实现。

选择一个变量并按 F2。或者，从上下文菜单中选择设置值。
请输入变量的值然后按 Enter。

instance="rm"/>

导航到源代码

您可以从变量窗格导航到声明。

要导航到变量声明的代码位置，请右键点击变量并选择跳转到源 F4。
要导航到变量类型的类声明，请右键点击该变量，然后选择跳转到类型源 Shift+F4。

在变量视图中显示 getter 和 setter 函数

默认情况下， getter 和 setter 函数是隐藏的。

要在变量视图中显示它们，请点击工具栏上的，选择调试器设置，然后选择显示 getter 和 setter 函数.。

计算表达式

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

此功能仅在程序在命中断点后暂停（而非暂停）时有效。

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

在编辑器中评估一个简单表达式

要快速评估表达式，请在编辑器中指向它。请注意，方法调用无法以这种方式评估。

指向您要计算的表达式。表达式的结果显示在工具提示中。
要查看子元素，请点击。

如果您觉得数值工具提示干扰到了您的操作，您可以增加延迟时间或完全禁用它们。为此，请在设置对话框（Ctrl+Alt+S ）中，转到构建、执行、部署 | 调试器 | 数据视图并根据您的偏好设置显示值提示和值工具提示延迟选项。

在编辑器中评估复杂表达式

如果您想在代码中评估涉及方法调用的表达式或指示要评估的表达式的特定部分，请使用对表达式快速求值选项。

选择表达式并按下 Ctrl+Alt+F8 ，或点击浮动工具栏中出现的。
或者，转到运行 | 调试操作 | 快速计算表达式，或按住 Alt 并点击所选内容。
要将调试操作添加到浮动工具栏，请点击，选择自定义工具栏，在打开的对话框中点击添加，然后选择所需的操作。

您可以配置对表达式快速求值使其只在选择一段代码时运行（无需使用菜单/快捷键）。启用此选项时请谨慎操作，因为您可能会意外调用方法。

选中代码时评估表达式

前往设置 | 构建、执行、部署 | 调试器 | 数据视图并设置在代码选择上显示值提示选项。

计算任意表达式

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

要评估任意表达式，请在对表达式求值字段中输入它，然后在变量窗格中按 Enter
结果显示在下面。您还可以通过点击表达式字段右侧的来将表达式添加到 watches。

如果您想评估长代码块，您可能需要为此使用专用对话框：

如果您想从当前在您面前的某个表达式或变量开始（例如，在编辑器或变量窗格上），请选择它。
前往运行 | 调试操作 | 计算表达式 Alt+F8 或从上下文菜单中选择对表达式求值。快捷键可能在 Ubuntu 上无法使用（为正确操作，调整快捷键配置）。
在求值对话框中，修改所选表达式或在表达式字段中输入一个新的。点击展开 Shift+Enter 以修改多行代码片段。
请注意，表达式体中声明的任何变量在表达式计算完成后都会超出作用域。
点击求值（Ctrl+Enter 以进入多行模式）。表达式结果显示在结果字段中。
表达式的结果取自返回语句。当没有 return 语句时，结果取自代码的最后一行（甚至不必是表达式：单个字面量也可以）。当没有有效的行可取值时，结果是 undefined。如果无法计算指定表达式，结果字段将指示原因。

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

内联查看值

WebStorm 在变量使用的旁边显示其值。

一旦变量值更改，内联视图将会更新为新值并更改其颜色。

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

默认情况下，内联视图是启用的。要关闭此功能，请在设置对话框（Ctrl+Alt+S ）中，转到构建、执行、部署 | 调试器 | 数据视图并禁用内联显示值选项。

添加内联监视

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

点击指向您想跟踪其字段的对象的内联提示。
在弹出窗口中，选择该字段并点击添加为内联监视。
如有需要，微调 watch。您可以使用任何有效的表达式作为监视。

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

要删除行内监视，请将鼠标悬停在监视上，然后点击旁边的叉号。

可视化 JSON 和 XML

当您展开包含 JSON 或 XML 的内联值或评估字符串表达式时，WebStorm 会为您提供数据的结构化和格式化视图。

这使您可以使用编辑器功能，例如代码折叠和扩展或缩小选择，以便处理子树并在大型对象中方便地导航。

使用预览弹出窗口中的选项卡在结构化视图和原始视图之间切换：

监视

如果您想跟踪某个变量或更复杂表达式的结果，请为此变量或表达式设置监视。当您需要计算未定期显示在变量列表中的内容，或固定某些实例变量以消除每次单步后展开树的需要时，这非常有用。

此功能仅在程序在命中断点后暂停（而非暂停）时有效。

在所选帧的上下文中评估 Watches。监视在上下文之外或编译失败时无法评估。如果是这种情况，手表将标有错误图标。

默认情况下，监视会与变量一起显示在变量窗格中。要隐藏/显示监视窗格，请使用分离 watches 选项，该选项位于布局设置菜单中。

添加监视

根据您想要跟踪的表达式：

对于编辑器中的表达式——选择表达式，然后点击浮动工具栏上出现的 Add to Watches 图标。或者，将表达式拖动到变量选项卡。
对于当前上下文中的元素——右键点击变量选项卡中的变量，然后从菜单中选择 Add to Watches。
对于任意表达式——在变量选项卡的顶部部分输入表达式，然后点击 Add to Watches。
在您将一个变量/表达式添加到监视之后，它会保留在那里，并在每个步骤中进行评估，为您提供当前上下文中的结果。