WebStorm JavaScript 调试终端

Question

在 VSCode 中，有一种特殊的终端，当在此终端上运行命令时，它会神奇地停止在源代码上的断点处。这个终端在 VSCode 中称为“JavaScript 调试终端”。

我正在寻找 JetBrains WebStorm IDE 中的等效工具。

在 WebStorm 中，您可以运行某些命令，例如

npm run <command>

，通常它会以绿色突出显示，这意味着您可以按 Ctrl + Shift + Enter，该命令将在调试会话中运行。但是，此选项是有限的，即使在支持的命令（如

npm run <command>

）上，绿色突出显示也并不总是出现。

这应该是绿色突出显示的，但事实并非如此

注意：我可以手动为我的案例配置节点调试选项（类似于here for typescript的解释方式），但想避免它。

WebStorm 中是否存在类似于 VSCode 中的调试终端的等效项？

Answer 1

我不确定我是否正确理解了你的问题，但 WebStorm 有一个非常简洁的内置 JavaScript 调试器功能。

官方文档免责声明：

JavaScript 代码的调试仅在 Google Chrome 和 其他基于 Chromium 的浏览器。

这是有关如何启动它的快速指南：

1. 运行您的应用程序（通过运行配置、内置终端或您选择的外部终端）
2. 获取您的应用程序 URL（例如 http://localhost:3000）
3. 从工具栏打开编辑配置...（您可能需要展开运行配置下拉菜单才能显示此选项）
4. 添加新的运行配置并选择 JavaScript 调试
5. 默认设置应该没问题，但请确保您的应用程序 URL 正确
6. 单击“应用/确定”（“应用”不会关闭“运行配置”模式窗口）
7. 您现在可以在调试模式下运行调试运行配置（通过工具栏上的错误图标或 Shift+F9）
8. 现在您可以设置断点来中断代码执行

Aaaaand，最后回答您的问题 - 您可以使用 Evaluate Expression 功能。

当您遇到断点时，WebStorm 应显示调试选项，您可以在其中找到类似计算器的图标（或按 Alt+F8）。

显示模式窗口后，您可以执行任何您认为有用的内容（例如，单个 console.log、复杂的方法或变量）。

我希望这会有所帮助。

官方文档链接：

有关评估表达式的更多信息

在 Chrome 中调试 JavaScript

JavaScript 调试配置

Answer 2

只需使用内置工具在 Webstorm 中运行和调试您的应用程序即可。

https://www.jetbrains.com/help/webstorm/installing-and-removing-external-software-using-node-package-manager.html#ws_npm_running_scripts_from_editor

Answer 3

JetBrains Chrome 扩展怎么样

从 WebStorm 或 IntelliJ IDEA 调试 JavaScript 代码

Answer 4

现已支持WebStorm 2023.3.6