WebStorm 2021.2 Help

Breakpoints断点

Breakpoints are source code markers that let you suspend program execution at a specific point and examine its behavior.断点是源代码标记,允许您在特定点暂停程序执行并检查其行为。

Breakpoints

Once set, a breakpoint remains in your project until you remove it explicitly (except for temporary line breakpoints).设置后,断点将保留在项目中,直到您显式删除它(临时行断点除外)。

If a file with breakpoints was modified externally, for example, updated through a VCS or changed in an external editor, and the line numbers have changed, breakpoints will be moved accordingly. 如果带有断点的文件在外部修改,例如,通过VCS更新或在外部编辑器中更改,并且行号已更改,则断点将相应地移动。Note that WebStorm must be running when such changes are made, otherwise they will pass unnoticed.请注意,进行此类更改时,WebStorm必须正在运行,否则它们将被忽略。

Line breakpoints行断点

Line breakpoints can be set on executable lines of code. 可以在可执行代码行上设置行断点。Thread execution is suspended before the line with such breakpoint, and WebStorm displays the stack frames on that thread's stack.线程执行在具有此类断点的行之前暂停,WebStorm将在该线程的堆栈上显示堆栈帧。

Set a line breakpoint设置一个行断点

  • Click the gutter next to the executable line of code where you want to set a breakpoint.单击要设置断点的可执行代码行旁边的左侧列。

    Alternatively, place the caret at this line and press Ctrl+F8.或者,将插入符号置于此行,然后按Ctrl+F8

  • To set a temporary line breakpoint, press Ctrl+Alt+Shift+F8. 要设置临时行断点,请按Ctrl+Alt+Shift+F8The breakpoint will be removed from your project right after it is hit.断点将在命中后立即从项目中删除。

  • For arrow functions, you can set multiple breakpoints within a single line. 对于箭头函数,可以在一行内设置多个断点。Click the gutter and select the functions where you want to set breakpoints.单击檐槽并选择要在其中设置断点的函数。

    Multiple breakpoints in a line for an arrow function

Remove a line breakpoint删除行断点

  • Click the breakpoint icon in the gutter.单击左侧列中的断点图标。

To avoid accidentally removing a breakpoint and losing its parameters, you can choose to remove breakpoints by dragging them to the editor, or by clicking the middle mouse button: open the Settings/Preferences dialog Ctrl+Alt+S, go to Build, Execution, Deployment | Debugger, and select Drag to the editor or click with middle mouse button. 为了避免意外删除断点并丢失其参数,可以通过将断点拖动到编辑器或单击鼠标中键来选择删除断点:打开“设置/首选项”对话框Ctrl+Alt+S,转到“生成、执行、部署”|“调试器”,然后选择“拖到编辑器”或单击鼠标中键。Clicking a breakpoint will then toggle its state (enabled/disabled).单击断点将切换其状态(启用/禁用)。

Exception breakpoints异常断点

Exception breakpoints are triggered when the specified exception is thrown.引发指定的异常时会触发异常断点。

Set an exception breakpoint设置异常断点

  1. Press Ctrl+Shift+F8 or select Run | View Breakpoints from the main menu.Ctrl+Shift+F8或从主菜单中选择“运行”|“查看断点”。

  2. In the Breakpoints dialog, select the Any exception checkbox.在“断点”对话框中,选中“任何异常”复选框。

    Exception breakpoint: Any breakpoint

    To have the debugger stop at exceptions of a specific type, press Alt+Insert or click the Add button and select JavaScript Exception Breakpoint. 要使调试器在特定类型的异常处停止,请按Alt+Insert或单击the Add button并选择JavaScript异常断点。Then, in the Add Exception Breakpoint dialog that opens, specify an exception class from a library or from your project.然后,在打开的“添加异常断点”对话框中,指定库或项目中的异常类。

    Exception breakpoints

Remove an exception breakpoint删除异常断点

  1. Press Ctrl+Shift+F8 or select Run | View Breakpoints from the main menu.Ctrl+Shift+F8或从主菜单中选择“运行”|“查看断点”。

  2. In the Breakpoints dialog, select the breakpoint you want to delete under JavaScript Exception Breakpoints or Dart Exception Breakpoints and click the Remove button or press Alt+Delete.在““断点””对话框中,在““JavaScript异常断点””或““Dart异常断点””下选择要删除的断点,然后单击the Remove button或按Alt+delete

Breakpoints properties断点属性

Depending on the type of a breakpoint, you can configure the following additional breakpoint properties:根据断点的类型,您可以配置以下其他断点属性:

  • Actions to be performed when the breakpoint is hit命中断点时要执行的操作

  • A suspend policy that defines whether the application must be suspended when the breakpoint is hit一种挂起策略,用于定义在命中断点时是否必须挂起应用程序

  • Dependencies on other breakpoints对其他断点的依赖关系

  • Conditions that define when the breakpoint must be hit定义何时必须命中断点的条件

To edit the properties of a breakpoint, press Ctrl+Shift+F8, or right-click the breakpoint in the editor gutter.要编辑断点的属性,请按Ctrl+Shift+F8,或在编辑器左侧列中的断点上单击鼠标右键。

Option选项Description描述Breakpoint type断点类型
Enabled启用Clear the checkbox to temporarily disable the breakpoint without removing it from the project. Disabled breakpoints will be skipped during the debugging process.清除该复选框可暂时禁用断点,而不将其从项目中删除。调试过程中将跳过禁用的断点。All types所有类型
Suspend挂起

Select the checkbox to pause the program execution when the breakpoint is hit. 选择复选框以在遇到断点时暂停程序执行。Suspending an application is useful if you need to obtain logging information or calculate an expression at a certain point without interrupting the program. 如果需要在不中断程序的情况下获取日志信息或计算某一点上的表达式,则挂起应用程序非常有用。If you need to create a master breakpoint that will trigger dependent breakpoints when hit, choose not to suspend the program at that breakpoint.如果需要创建一个断点,当被命中时将触发依赖断点,请选择不在该断点处挂起程序。

All types所有类型
Condition条件

Select this checkbox if you want the debugger to stop at the breakpoint only when a certain condition is met. 如果您希望调试器仅在满足特定条件时才在断点处停止,则选择此复选框。Define the condition through a JavaScript boolean expression that evaluates to true or false, for example, color == "pink". 通过计算结果为truefalse的JavaScript布尔表达式定义条件,例如,color == "pink"This expression must be valid at the line where you set the breakpoint.此表达式必须在设置断点的行有效。

You can type multiline expressions, for example:可以键入多行表达式,例如:

typeof scope === 'string' || (!Array.isArray(scope) && typeof scope === 'object' && scope !== null)

Optionally, specify the actions that you want WebStorm to perform if the condition is met and the debugger stops at the breakpoint, learn more from Log below.或者,指定在满足条件且调试器在断点处停止时希望WebStorm执行的操作,从下面的“日志”了解更多信息。

Conditional breakpoint: define consition through a boolean expression

When the debugger reaches the line with a conditional breakpoint, the specified boolean expression is evaluated. 当调试器到达带有条件断点的行时,将计算指定的布尔表达式。If the expression evaluates to true, the program is suspended. 如果表达式的计算结果为true,则程序将挂起。If you selected any logging actions in the Log area, the Console tab shows the corresponding message:如果在“日志”区域中选择了任何日志记录操作,“控制台”选项卡将显示相应的消息:

Conditional breakpoint is hit, which is logged in the Console tab

Line breakpoints行断点
Log记录

Select if you want to log the following events to the console:选择是否要将以下事件记录到控制台:

  • "Breakpoint hit" message“断点命中”消息: a log message will be displayed in the console output when the breakpoint is hit.:命中断点时,控制台输出中将显示日志消息。

  • Stack trace堆栈跟踪: when the breakpoint is hit, its stack trace will be printed to the console.:当断点被命中时,其堆栈跟踪将打印到控制台。

    This is useful if you want to check what paths have led to this point without interrupting the program's execution.如果您想在不中断程序执行的情况下检查哪些路径已经到达这一点,这将非常有用。

All types所有类型
Evaluate and log评估并记录

Select to evaluate an expression when the breakpoint is hit, and show the result in the console output.选择此选项可在命中断点时计算表达式,并在控制台输出中显示结果。

Line breakpoints行断点
Remove once hit一次命中就删除Select to remove the breakpoint from your project right after it has been hit.选择此选项可在命中断点后立即将其从项目中删除。All types所有类型
Disable until breakpoint is hit禁用,直到达到断点Select the breakpoint that will trigger the current breakpoint. 选择将触发当前断点的断点。Until that breakpoint is hit, the current breakpoint will be disabled. 在命中该断点之前,当前断点将被禁用。You can also select if you wish to disable it again or leave it enabled once it has been hit.您还可以选择是否希望再次禁用它或在命中它后保持启用状态。All types所有类型

Productivity tips生产力提示

Quick access to most common settings快速访问最常用的设置

Right-click a breakpoint in the editor gutter to quickly disable or suspend it, or set a condition.右键单击编辑器边栏中的断点以快速禁用或挂起它,或设置条件。

Breakpoints intentions断点意图

You can get access to the most common breakpoint actions and filters through intention actions(Alt+Enter).您可以通过意图操作Alt+Enter)访问最常见的断点操作和筛选器。

Breakpoint intentions
Group breakpoints组断点

You can organize breakpoints into groups, for example, if you need to mark out breakpoints for a specific problem.例如,如果需要为特定问题标记断点,可以将断点组织到组中。

In the Breakpoints dialog Ctrl+Shift+F8, select a breakpoint you want to place in a group and choose Move to group | <group_name>/Create new from the context menu.在“断点”对话框Ctrl+Shift+F8中,选择要放置在组中的断点,然后从关联菜单中选择“移动到组”|<group_name>/“创建新组”

Move breakpoints移动断点

To move a line breakpoint, drag it to the target line.要移动线断点,请将其拖动到目标线。

Copy breakpoints复制断点

To copy a breakpoint, press Ctrl and drag it to the target line.要复制断点,请按Ctrl键并将其拖动到目标行。

Disable breakpoints禁用断点

To temporarily disable a breakpoint without removing it from the project, hold down the Alt key and click the breakpoint icon in gutter.若要暂时禁用断点而不将其从项目中删除,请按住Alt键并单击左侧列中的断点图标。

Quick search快速搜索

If you have many breakpoints in your project, you can add short descriptions to them to search for them easily: right-click a breakpoint in the Breakpoints dialog Ctrl+Shift+F8 and select Edit description from the context menu. 如果项目中有多个断点,可以向其添加简短的描述以轻松搜索:在“断点”对话框Ctrl+Shift+F8中的断点上单击鼠标右键,然后从关联菜单中选择“编辑描述”。Now when you start typing a breakpoint's name, it gets the focus.现在,当您开始键入断点的名称时,它将获得焦点。

Jump to source跳转到源

To jump from the Breakpoints dialog to the line of code where the selected breakpoint is set, press F4.要从“断点”对话框跳转到设置选定断点的代码行,请按F4

Last modified: 20 July 2021