如何使用WebStorm调试JavaScript断点

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

---

我必须做些什么才能让这些断点工作？

我发现，在我需要实际命中断点之前的某个位置使用“调试器”就足以让它在“本地”调试会话中工作。 如果没有这一点，无论我做了什么，运行节点引擎的webstorm只会运行我的javascript，完全忽略断点

这里有一个虚拟的例子。我无法让调试器在第20行的断点处停止。我输入了“调试器；”它上面的入口，一切又开始工作了。如果我把它拿出来，它就会停止工作，这是一种痛苦，但它让我现在继续工作。当我进行部署时，我迟早会意外地将其中一个留在…：\

---

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

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

如果您的文件位于例如

“mydir/html/workspace/Project/”

中，并且可以通过

访问http://localhost/Project“

然后输入

”http://localhost/Project/“

---

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

我使用的是Webstorm 2019.2，我能够为创建的基本react应用程序设置断点调试，如下所示：

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

在WebStorm中创建新的JavaScript调试配置（菜单运行–编辑配置…–添加–JavaScript调试）。粘贴到URL字段中

• 非常重要：选中“确保加载脚本时检测到断点”复选框，因为默认情况下未选中该复选框，并且我的断点无法使用它

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

设置一些断点

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

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

一旦web浏览器出现并且您到达了有断点的代码，断点应该立即触发

其中一些来自

---

有关非常好的演示，请参见但不要忘记上面非常重要的步骤。

我有本地调试。如果使用http://而不是file:///进行调试，则无所谓，必须使用远程配置。我像在wiki中一样进行远程配置，但没有任何更改。“鼠标右键点击”->“开源”是没有什么我也有这个问题，并把“调试器”；在代码工作。我发现无需在js中输入“debugger”即可使其工作；在js中，转到Preferences->debugger->JavaScript并取消选中“Do not step into scripts”