检查已挂起的程序

调试器会话启动后，会打开 Debug工具窗口，程序将正常运行，直到遇到 breakpoint或您手动暂停程序。

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

检查调用堆栈

程序暂停时，将在帧窗格中显示将您带到当前位置的调用堆栈。

调试多进程 Node.js 应用或 Service Worker 时，您可以在线程之间切换。帧窗格显示所选线程的调用堆栈。详细信息请参见多进程调试与 Debugging Workers。

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

帧对应一个活跃的方法或函数调用。它存储被调方法或函数的局部变量、参数，以及支持表达式求值的代码上下文。

每次调用方法时，都会将一个新的帧添加至堆栈顶部。执行方法完成后，对应的帧将从堆栈中移除（按照后进先出的顺序）。

检查帧可以帮助您理解为何将特定参数传递给方法或函数，以及调用者当时的状态。

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

显示来自库的帧

要显示被隐藏的帧，请按显示所有帧切换按钮，位于帧窗格右上角。
要隐藏库帧，请释放隐藏来自库的帧切换按钮。

将堆栈复制到剪贴板

要复制当前线程的调用堆栈，请右键单击帧标签页的任意位置，然后选择复制堆栈。

检查／更新变量

变量标签页显示所选 frame/thread中的变量列表。检查变量可以帮助您理解程序为何以某种方式运行。

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

复制变量

检查变量时，您可能需要复制变量名或其值，以便粘贴到其他位置或与另一个变量 compare。

要复制变量名，请右键单击变量并选择复制名称。
要复制变量的值，请右键单击变量并选择复制值 Ctrl+C。对于非 String 类型，将复制其 toString 表示形式。

将变量与剪贴板比较

要将某变量的值与其他值比较，请使用与剪贴板比较值选项。例如，当变量包含长字符串且需要将其与另一个长字符串进行比较时，此操作非常有用。

复制您希望比较的内容，例如来自文本文件的内容。
在变量标签页中，右键点击变量并选择与剪贴板比较值。
在打开的差异查看器中检查差异。有关差异查看器的详细信息，请参见 Comparing Files and Folders。

在专用对话框中查看变量

WebStorm 允许您在专用对话框中检查变量。当您希望持续关注某个变量（或其持有引用的对象）并同时在帧与线程之间导航时，此功能非常有用。

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

设置变量值

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

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

instance="rm"/>

导航至源代码

您可以从变量窗格导航至声明位置。

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

在 Variables 视图中显示 getter 和 setter 函数

默认情况下， getter 与 setter 函数将被隐藏。

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

计算表达式

WebStorm 允许您在调试会话期间评估表达式，以获得程序状态的更多详情，或在运行时测试各种执行情景。

此功能仅在程序在遇到断点后被挂起时有效（不是暂停）。

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

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

要快速计算表达式，请将鼠标指向编辑器中的该表达式。请注意，不能以这种方式计算方法调用。

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

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

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

如果您想评估包含方法调用的表达式，或指定要评估的表达式部分，请使用快速计算表达式选项。

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

您可以配置快速计算表达式，使其在选中代码时立即生效（无需使用菜单或快捷键）。请谨慎使用此选项，因为在启用时，您可能会意外调用方法。

选中代码后一键计算表达式

转到设置 | 构建、执行、部署 | 调试器 | 数据视图并设置在代码选择时显示数值工具提示选项。

计算任意表达式

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

要评估一个任意表达式，请在计算表达式字段中输入表达式，并在变量面板内按 Enter。
结果将显示在下方。您还可以单击表达式字段右侧的来将表达式添加到监视中。

如果您需要评估较长的代码块，建议使用专用对话框：

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

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

内联查看值

WebStorm 会在变量使用位置旁边显示其值。

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

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

内联视图默认处于启用状态。如需关闭，在设置对话框中（Ctrl+Alt+S ），前往构建、执行、部署 | 调试器 | 数据视图并禁用内联显示值选项。

添加内联监视

如果您希望某个表达式的结果显示在特定行上，可以为其设置内联监视。内联监视具有持久性，在会话重启后仍保持激活状态。

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

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

要移除内联监视，请将鼠标悬停在监视表达式上，并点击其旁边的叉号。

可视化 JSON 和 XML

当展开包含 JSON 或 XML 的 inline value 或 evaluate a string expression 时，WebStorm 将为您提供结构化且格式化的数据视图。

这使您能够使用编辑器功能，例如 code folding 和 extend or shrink selection ，以处理子树并方便地在大型对象中导航。

使用预览弹出窗口中的标签页在结构化视图与原始数据视图之间切换：

监视

如果您希望跟踪某个变量或更复杂表达式的结果，请为该变量或表达式设置一个监视。这在您需要评估未定期显示在变量列表中的内容，或想要固定某个实例变量以避免每次 step 后展开树结构时非常有用。

此功能仅在程序在命中断点后挂起的情况下工作（而非 paused）。

监视将在所选帧的上下文中进行评估。当监视超出上下文或无法编译时，将无法对其进行评估。在这种情况下，监视将被标记为错误图标。

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

添加监视

这取决于您想要跟踪的表达式：

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