如何使用JavaScript断点WebStorm进行调试

Question

在WebStorm 6的调试器面板中，我看到了：

我必须做些什么来让这些断点起作用？

Answer 1

我发现在我需要实际点击断点之前的某个地方使用'调试器'足以让它真正适用于'本地'调试会话。 没有它，我做了什么并不重要，webstorm运行节点引擎只是简单地运行我的javascript，完全忽略了断点。

这是一个虚拟的例子。我无法让调试器永远停在第20行的断点处。我放入了'调试器';进入它之上，一切都开始了。如果我把它拿出来，就会停止工作，这很痛苦，但它让我现在继续工作。迟早，当我进行部署时，我会不小心将其中一个留在......：\

Answer 2

您必须使用删除调试，并且必须在调试配置中为URL提供映射，以便webstorm可以找到这些文件。

这可以通过“运行”/“编辑配置...”来完成。在那里单击您的项目基础目录，然后双击右侧输入文本。

如果您的文件是在"mydir/html/workspace/Project/"中，可以通过"http://localhost/Project"访问，然后输入"http://localhost/Project/"。

您会注意到，现在当您点击日志时，打开的文件是您可以编辑的本地文件，而之前它是远程文件。

Answer 3

我正在使用Webstorm 2019.2，并且能够为使用create-react-app创建的基本React应用设置断点调试，如下所示：

1. 运行npm start可以使应用程序在开发模式下运行。 您可以在终端中执行此操作，也可以在WebStorm的npm工具窗口中双击该任务。

2. 在WebStorm中创建新的JavaScript调试配置（菜单运行–编辑配置…–添加– JavaScript调试）。将http://localhost:3000/粘贴到URL字段中。

   • 非常重要 ：选中“确保在加载脚本时检测到断点”框，因为默认情况下未选中它，而我的断点也无法使用。< / li>

3. 单击“确定”关闭“运行/调试配置”

4. 设置一些断点

5. 从“播放”按钮旁边的下拉框中选择新的运行配置

6. 按下播放按钮旁边的错误按钮

7. 断点应该在网络浏览器启动后立即触发，并且您到达具有断点的代码

其中一些来自Debugging React apps created with Create React App in WebStorm

有关很好的演示，请参见Debugging JavaScript in WebStorm and Chrome: create a debug configuration，但不要忘记上面的 非常重要 步骤。