诀窍是增加了WebPACK中内部URL到调试配置的参考。要使用的路径为WebPACK中URL中的应用程序运行时将来自调试器的脚本标签。你也可以看到它在Chrome浏览器的脚本标签很容易，但我已经有来自的IntelliJ IDEA这里查看：

The trick was adding a reference to the Webpack internal URL to the debug config. The path to use for that Webpack URL will come from the scripts tab of the debugger when the application is running. You can also see it in Chrome's scripts tag just as easily, but I've included the view from IntelliJ IDEA here:

您可以看到，在的 路径的WebPack：// 对应到我的项目文件夹中（如目击在的src 在其路径）。这就是告诉我，我需要使用。路径WebPACK中的调试配置。如果你的项目排队不同，你必须做出相应的调整。

You can see that the . path in webpack:// corresponds to my project folder (as witnessed by the src path in it). That's what told me that I needed to use the . path for Webpack in the debug config. If your project lines up differently, you'll have to adjust accordingly.

至于为什么它是的WebPack：/// （三斜杠）代替的WebPack：// ，我不能回答。我看到使用在JetBrains的帖子而这正是使我增加一个额外的正斜杠的解决方案。

As to why it is webpack:///. (with three slashes) instead of webpack://., that I can't answer. I saw that used in a JetBrains post and that's what led me to that solution of adding an additional forward slash.

现在你需要创建你的JavaScript调试配置，并将它设置如下所示：

Now you need to create your JavaScript debug configuration and set it up like the following:

调整你的本地主机 URL和端口，以及您的构建路径（ __构建__ 于我而言，也许建立或 DIST 在你）。

Adjust your localhost URL and port, as well as your build path (__build__ in my case, maybe build or dist in yours).

现在，我有调试配置设置像上面，它工作得很好。

Now that I have the debug configuration setup like the above, it works just fine.