Question

我正在玩Angular 2 / Bootstrap 4 / Webpack project，只是为了看看新内容是如何排队的，我试图通过JetBrains在Chrome中使用IntelliJ IDEA 15进行调试Chrome扩展程序。

问题是我在TypeScript文件中设置的任何断点都会被忽略。我使用内置的转换器并将JavaScript输出文件与TypeScript文件保持相同的名称/位置，以便my-app.ts与my-app.js位于同一文件夹中-app.js.map映射文件。

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

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

我做错了什么（我以前从未使用过TypeScript调试），或者这是IDEA中的错误？

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

Answer 1

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

您可以看到.中的webpack://路径对应于我的项目文件夹（由src路径所见证）。这就是告诉我，我需要在调试配置中使用Webpack的.路径。如果您的项目排列方式不同，则必须进行相应调整。

至于为什么它是webpack:///.（有三个斜杠）而不是webpack://.，我无法回答。我看到使用了in a JetBrains post，这就是我找到添加额外正斜杠的解决方案的原因。

现在您需要创建JavaScript调试配置并将其设置如下：

调整您的localhost网址和端口，以及您的构建路径（在我的情况下为__build__，可能在您的build或dist。

既然我已经完成了上面的调试配置设置，那就可以了。

Answer 2

基于此解决方案，我已成功解决了Intellij / Webstorm中使用webpack进行调试的问题：How to debug angular 2 app using angular-cli webpack?。您必须使用.ts源将主ui项目目录和目录映射到远程URL，与解决方案的优势完全相同。

我的tsconfig.json：

flush:true