启动调试器会话

调试前

1. 在代码中设置 breakpoints。

2. 定义 run/debug 配置。

3. 要调试编译为 JavaScript 的代码，必须为其生成 source map。 这将建立原始代码与生成的 JavaScript 代码之间的行对应关系。 如果未生成 source map，您的断点将无法被识别和正确处理。

   调试 TypeScript、Dart、CoffeeScript、带 JSX 的 JavaScript、ES6 及更高版本等语言时需要使用 source map。

开始调试

• 从工具栏的 运行 小部件中选择所需配置，然后点击其旁边的 。

  

• 如果您的应用由一个包含 JavaScript 代码引用的 HTML 文件组成，并且应用运行在 内置服务器 上，只需打开此 HTML 文件或在 项目工具窗口 中选中它，然后从上下文菜单中选择 调试 <HTML_file_name>。 WebStorm 会生成一个临时调试配置并通过该配置启动调试会话。

  

• 如果需要通过 npm 脚本以开发模式启动应用程序，您可以修改 npm run/debug 配置，使其既可在开发模式下启动应用程序，也能同时启动调试会话。

  为此，请打开用于以开发模式启动应用的 npm run/debug 配置，切换到 浏览器 / 实时编辑 选项卡，勾选 启动后 复选框，指定应用将运行的 URL 地址，并选择 Google Chrome 或其他基于 Chromium 的浏览器来打开应用。

  详细了解 使用单个 npm 运行/调试配置运行并调试 Angular 应用、 使用单个 npm 运行/调试配置运行并调试 Vue.js 应用、 使用单一 npm 运行/调试配置运行并调试 Vite 应用。

• 如果您的应用以开发模式运行在 localhost 上，您可以从内置 终端 （Alt+F12）、 Run 工具窗口 或 Debug 工具窗口 启动调试。 只需按住 Ctrl+Shift 并点击应用运行的 URL。

  

  详细了解： 调试 Vue.js 应用、 调试 Angular 应用、 调试 Vite 应用 和 调试 React 应用。

• 如果在 New Terminal 中以开发模式启动了应用程序，您只需点击链接旁的 在浏览器中开始调试 按钮即可。

  

• 您还可以通过内置 终端 （Alt+F12 ）或 运行 工具窗口将调试器附加到运行中的 Node.js 应用程序。 要开始调试，请按住 Ctrl+Shift ，然后点击信息消息 Debugger listening <host>:<port> 中的 URL 链接。

  

  详细了解： 调试运行中的 Node.js 应用程序。

暂停／恢复调试器会话

当调试器会话正在运行时，您可以使用 调试 工具窗口工具栏上的按钮进行暂停或恢复：

• 要暂停调试器会话，请单击 。

• 要继续调试器会话，请单击 F9。

重启调试器会话

• 在 调试 工具窗口中单击 重新运行 按钮，或按 Ctrl+F5。

  

定位调试会话的进程 ID（PID）

• 要查看当前调试的应用程序的 PID，请将鼠标悬停在 调试 工具窗口中的对应会话标签上。

  将出现一个工具提示，显示调试会话的 PID。

  

在浏览器中重新加载当前页面

在 WebStorm 内置服务器上调试简单的 HTML+JavaScript 应用程序时，您可以重新加载当前访问的页面，而无需完全重新启动应用程序。

• 单击 。 所有之前的输出将被清除，并且调试器将回到第一个断点。 详细了解请参见 Reload the current page in browser。

  

终止调试器会话

• 在 调试 工具窗口中单击 。

  

  或者，按 Ctrl+F2 并选择要终止的进程（如果有两个或更多）。