IntelliJ IDEA TypeScript/Webpack调试仅适用于JavaScript断点

Question

我正在玩一个Angular 2/Bootstrap 4/Webpack项目,只是为了看看新东西是如何排队的,我正试图通过JetBrains Chrome扩展程序在Chrome中的IntelliJ IDEA 15中进行调试.

问题是我在TypeScript文件中设置的任何断点都会被忽略.我正在使用内置的转换器并保留JavaScript输出文件与TypeScript文件具有相同的名称/位置,因此my-app.ts与my-app.js和相关的my-app位于同一文件夹中.js.map映射文件.

奇怪的是,如果我在生成的JavaScript文件中设置断点,则IDE会在TypeScript文件中的相应位置中断(即使它没有显示断点).然后我可以正常步骤,因为映射似乎有效.

问题似乎是在.ts文件中设置断点不会在相应的.js文件中设置所需的断点.

我做错了什么(我之前从未使用过TypeScript调试),或者这是IDEA中的错误？

PS无论是进行远程JavaScript调试还是通过IDEA的内置Web服务器进行本地调试,我都会得到相同的结果.

Answer 1

诀窍是将 Webpack 内部 URL 的引用添加到调试配置中。当应用程序运行时，用于该 Webpack URL 的路径将来自调试器的脚本选项卡。您还可以在 Chrome 的脚本标签中轻松查看它，但我在此处包含了来自 IntelliJ IDEA 的视图：

您可以看到.中的路径webpack://对应于我的项目文件夹（正如src其中的路径所证明的那样）。这就是为什么我需要.在调试配置中使用 Webpack 的路径。如果您的项目安排不同，您就必须进行相应调整。

至于为什么是webpack:///.（带有三个斜杠）而不是webpack://.，我无法回答。我在 JetBrains 帖子中看到了这一点，这就是我找到添加额外正斜杠的解决方案的原因。

现在您需要创建 JavaScript 调试配置并按如下所示进行设置：

调整您的localhostURL 和端口，以及您的构建路径（__build__在我的情况下，也许build或dist在您的情况下）。

现在我已经有了像上面这样的调试配置设置，它工作得很好。