如何在 PhpStorm/WebStorm 中调试 angular2 种子项目？

How to debug angular2 seed project in PhpStorm/WebStorm?

Angular2 是用 TypeScript 编写的。

我正在使用 Angular2 seed project，但无法让 PhpStorm (WebStorm) 对其进行调试 - 它不会在 .ts 文件中的断点处停止。

何去何从？

现在我使用 JavaScript Debug 和 http://localhost:8080 作为 URL - 没有断点 :/

可以使用"Angular batarang"调试工具

可以在 Chrome 开发工具中将断点放入您的 TypeScript 文件并在其中执行逐步处理。

你尝试了吗？

希望对你有帮助。 蒂埃里

如果您正在使用 Chrome，请在您的代码中写入（您要中断的地方）：

debugger;

打开浏览器，按 F12（开发者控制台），然后刷新页面。您的应用程序的执行应停止在该命令上。

请注意，您的 tslint（如果您使用它）可能会抱怨使用调试器命令。编辑您的 tslint.json 文件并将 no-debugger 设置为 true

要在 WebStorm 中调试，您需要确保生成源映射。为此，打开 angular2-seed\webpack.config.js 并添加 

devtool: 'source-map',

到webpack配置；然后用http://localhost:8080/URL创建javaScriptdebug运行配置，为项目根目录

添加如下Remote URL映射 
webpack:///.

现在，用 npm start 启动你的服务器；服务器启动后，运行 通过按 Debug

在调试器中进行上述配置