调试成 angular 2 typescript 源代码答案

【问题标题】：debugging into angular 2 typescript source code调试成 angular 2 typescript 源代码
【发布时间】：2016-11-05 11:51:01
【问题描述】：

我有一个由 angular-cli 生成的 angular2 项目。我希望能够在 chrome 开发工具中调试 angular2 typescript 源代码（不是我自己的 typescript 代码，而是实际的 angular2 代码）。 node_modules 下的 angular2 npm 包仅包含转译的 javascript 文件，但它们包含源映射。我怎样才能使这项工作？谢谢。

【问题讨论】：

请参考这个答案：stackoverflow.com/a/51443584/6923507

标签： angular webpack source-maps angular2-cli

【解决方案1】：

将debugger; 放在您要调试的位置怎么样，这将触发 chrome 开发工具中的断点，您可以从那里开始工作。

【讨论】：

你的意思是在 angular 2 typescript 源代码中？理想情况下，我不想自己编辑 angular 2 源代码只是为了进行调试。我认为调试器中应该有某种方法可以添加打字稿源，但无法使其正常工作。

【解决方案2】：

打开 chrome 开发者工具 (F12)。

转到源选项卡。输入ctrl+p。

在下拉列表中搜索文件名。

选择文件并在要调试的行添加断点。

并继续执行调用您要调试的行的操作。

【讨论】：

【解决方案3】：

显然，这在 angular-cli 中还不可能，因为它们忽略了 node_modules (https://github.com/angular/angular-cli/issues/1838) 中的源映射。

【讨论】：