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

Question

Angular2是用TypeScript编写的。

我正在使用Angular2 seed project，我无法让PhpStorm（WebStorm）调试它 - 它不会停止在.ts文件中的断点。

怎么做？

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

Answer 1

要在WebStorm中进行调试，您需要确保生成源图。为此，打开angular2-seed\webpack.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文件并将no-debugger设置为true

Answer 3

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

Answer 4

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

你试过试试吗？

希望它能帮到你。蒂埃里