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

Question

Angular2是用TypeScript编写的。

我正在使用Angular2 seed project而我无法让PhpStorm（WebStorm）对其进行调试 - 它不会停留在.ts个文件中的断点上。

何去做？

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

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

您可以使用＆＃34; Angular batarang＆＃34; 工具进行调试

Answer 4

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

你试过吗？

希望它对你有所帮助。 亨利