启动调试器会话

调试之前

1. 在代码中设置 断点。

2. 定义运行/调试配置。

3. 要调试编译为 JavaScript 的代码，您需要为其生成 源映射。 这将设置原始代码行与生成的 JavaScript 代码行之间的对应关系。 如果未生成源映射，您的断点将无法被正确识别和处理。

   调试 TypeScript、CoffeeScript、带 JSX 的 JavaScript、ES6 及更高版本等需要源代码映射。

开始调试

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

  

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

  

• 如果您需要通过 npm 脚本以开发模式启动应用程序，您可以修改 npm 运行/调试配置，使其同时启动应用程序的开发模式并启动调试会话。

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

  从 使用单个 npm run/debug 配置运行和调试 Angular 应用程序、 通过单个 npm run/debug 配置运行和调试 Vue.js 应用程序、 使用单个 npm run/debug 配置运行和调试 Vite 应用程序 了解更多信息。

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

  

  了解更多信息，请参阅 调试 Vue.js 应用程序、 调试 Angular 应用程序、 调试 Vite 应用程序 和 调试 React 应用程序。

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

  

  默认情况下，不显示该按钮。 要显示该按钮，请打开 设置 对话框（Ctrl+Alt+S ），转到 高级设置 ，并在 JavaScript 和 TypeScript 区域选中 在终端中为本地主机链接显示“在浏览器中开始调试”按钮 复选框。

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

  

  从 调试正在运行的 Node.js 应用程序了解更多信息。

暂停/恢复调试器会话

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

• 要暂停调试程序会话，请点击 。

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

重新启动调试器会话

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

  

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

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

  会显示一个工具提示，展示调试会话的 PID。

  

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

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

• 点击 。 所有先前的输出将被清除，调试器返回到第一个断点。 从 在浏览器中重新加载当前页面了解更多信息。

  

终止调试器会话

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

  

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