谁能指出如何在 chrome 中调试 Angular 2 源代码打字稿文件。 webpack 为 Angular 项目的 typescript 文件提供服务（文件包含在 Angular 项目的“src”文件夹中）
但不提供 Angular 源代码的打字稿文件。
【问题讨论】：
标签： angular typescript debugging google-chrome-devtools
也许这会有所帮助。您不能直接将断点添加到任何导入语句中。但有一个替代方案。
第 1 步：在您的项目中集成终端 ng s or ng serve 为您的 Angular 应用程序提供服务。
第 2 步：打开 Chrome 开发工具。从层次结构中选择webpack。
第 3 步：确保从 webpack 中选择点 (.)
第 4 步：例如，如果您想查看路由器发生的情况。您添加一个断点，您需要选择 "Step In" 。请看下面的截图。
第 5 步：使用 cmets 进行屏幕截图。这将带您到相关库，您也可以在那里添加断点。！！ （希望这一步是你正在寻找的那一步）
提示：您可以使用“Step In and Step out”来获得更多见解。
希望这会有所帮助。
【讨论】：
【讨论】：
使用开发者工具调试 Angular 应用程序的步骤->
构建启用了监视的应用程序（ng build -w -env=test）。
现在转到浏览器并打开开发者工具，然后转到源选项卡并从文件系统添加项目。
项目添加到浏览器后，点击 ctrl+p 并搜索要调试的文件（webpack 或 typescript）。
然后根据需要添加断点并刷新应用程序。
在右侧（在 chrome 中），您将看到处理断点的工具栏。
谢谢，调试愉快。
【讨论】：
在我们的例子中，只有一些源文件丢失：即
webpack://./src/somedir/ 中的 Sources - Page 选项卡上
在我们的例子中，原因是这些文件属于一个延迟加载的模块。
延迟加载的一个迹象是 webpack 显示一个像这样的节点：
在我们导航到应用程序中的组件后（实际加载模块时），文件显示出来了，CTRL-P 也可以找到它们。
为了让文件立即可用，我们可以使用Workspaces。
即转到Sources - Filesystem 选项卡并选择您的源文件夹。
这样做的另一个优点是您现在可以在 chrome 中编辑文件，当您保存它时，所做的更改实际上会保存到磁盘上的源文件中。
当angular serve 进程仍在运行时，它会注意到更改并重新构建您的应用程序。
使用此功能时的一个警告：
确保工作区指向正确的位置：即我们有时会签出源的不同分支，当您指向错误的分支时，可能会导致混淆，因为您在开发工具中的更改不会显示在IDE 显示的预期源文件。
【讨论】：
我发现使用 Angular Augury chrome 扩展程序调试 Angular 应用程序非常有帮助。
【讨论】：