在 WebStorm 和 npm 中调试答案

【问题标题】：Debugging in WebStorm and npm在 WebStorm 和 npm 中调试
【发布时间】：2017-01-18 11:38:56
【问题描述】：

我是 Web 开发新手（通常是后端开发人员）。

我正在尝试建立一个开发环境来反映我当前的工作流程。我在 IntelliJ Ultimate 中开发 Java，我喜欢如何逐步调试。

目前前端开发团队启动npm，然后使用Chrome开发者工具窗口调试。

有没有办法将 WebStorm 连接到此进程，以便我可以在 WebStorm 中设置断点，而不是使用 Chrome 开发者工具窗口？

我已在 Chrome 中安装了 JetBrains 扩展程序，但在他们的网站上找不到如何执行此操作。

再次，请原谅我的无知，因为我对前端开发非常陌生。但如果我能得到这个功能，那就太棒了。

非常感谢任何帮助或指导。

【问题讨论】：

先查看这个页面：confluence.jetbrains.com/display/WI/Tutorials；这个也可能有用confluence.jetbrains.com/display/PhpStorm/…（有点重复以前的内容；可能描述有点不同——对于 PhpStorm/WebStorm 的 JS 调试将是相同的）

【解决方案1】：

按照https://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusingadifferentwebserver 的说明创建 JavaScript Debug 运行配置，添加断点，通过 npm 启动服务器，然后选择上面的配置并按 Debug。另请参阅以下视频：

【讨论】：

【解决方案2】：

您需要已在此处安装的 chrome 扩展程序链接也是 ExtensionJetBrains IDE Support

安装后知道启用断点这是完成所有步骤的方法，您也可以看到快捷键

启用断点后，只需单击行号附近即可设置断点另一个选项转到文件-> 设置并启用断点

当你运行你的代码打开检查时，你会看到这个魔法:D :)

【讨论】：