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

Question

Angular2是用TypeScript编写的。

我正在使用 Angular2 种子项目，但我无法让 PhpStorm （WebStorm） 对其进行调试 - 它不会停止在.ts文件中的断点上。

何做？

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

Answer 1

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

devtool: 'source-map',

到 webpack 配置;然后使用 http://localhost:8080/ URL 创建 javaScript 调试运行配置，并为项目根目录添加以下Remote URL映射

webpack:///.

现在，使用 npm start 启动服务器;服务器启动后，按 Debug 在调试器中运行上述配置

Answer 2

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

debugger;

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

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

Answer 3

您可以使用"Angular batarang"工具进行调试

Answer 4

在

Chrome Dev Tools 中，可以将断点放入 TypeScript 文件中并在其中执行分步处理。

你试过了吗？

希望对您有所帮助。蒂埃里