在WebStorm和npm中debugging

我是networking开发新手(通常是后端开发人员)。

我正在设置一个开发环境来反映我目前的工作stream程。 我在IntelliJ Ultimate中开发了Java,我喜欢如何通过和debugging。

目前的前端开发团队启动npm,然后使用Chrome开发者工具窗口进行debugging。

有没有办法将WebStorm连接到这个过程,以便我可以在WebStorm中设置一个断点而不是使用Chrome开发者工具窗口?

我已经在Chrome中安装了JetBrains扩展,我无法find如何在他们的网站上做到这一点。

再次请原谅我的无知,因为我对前端开发很陌生。 但是如果我能得到这个function,那将是太棒了。

任何帮助或指导将非常感激。

创buildJavaScriptdebugging运行configuration按照说明https://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusing不同的networking服务器,添加断点,通过npm启动您的服务器,然后select上面的configuration然后按debugging。 另请参阅这些video:

  • 快速入门: https : //www.youtube.com/watch?v=a-IsnxZpRrQ
  • 断点,步进,观看: https : //www.youtube.com/watch?v=CdXoeVRN1JU

你需要chrome扩展,你已经安装的链接也是ExtensionJetBrains IDE支持

一旦你安装知道启用断点这里是做所有步骤你也可以看到快捷键的方式

在这里输入图像说明

一旦你启用断点,然后只需点击附近的行号来设置断点 在这里输入图像说明 另一个选项转到文件 – >设置并启用断点

在这里输入图像说明

在这里输入图像说明

当你运行你的代码打开检查,那么你会看到这个神奇的:D 🙂