如何调试angular 2源代码typescript文件

Question

有人能指出如何在chrome中调试角度2源代码打字稿文件。 webpack提供angular项目的打字稿文件（角项目中“src”文件夹中包含的文件）

但不提供角度源代码的打字稿文件。

Answer 1

我正在使用angular 8，并且在开发过程中没有设置任何特殊配置，您可以使用chrome开发人员源面板，如果您要查找ng-if指令，我将寻找@angular/common模块，因此，按 Ctrl + P 并输入common.js，即可找到与ng-if（NgIf）相关的类。

查找与指令NgIf相关的类，现在您可以设置断点

  

您可以轻松地知道它们存在于任何Angualr核心库的模块中   在angular.io上检查文件，然后单击顶部的source   将带您到github的角度仓库和相关文件。

Answer 2

我发现使用Angular Augury chrome扩展程序调试Angular应用程序非常有用。

Answer 3

也许这会有所帮助。您不能将断点直接添加到任何import语句中。但是还有另一种选择。

步骤1：在项目集成终端ng s or ng serve中为Angular应用提供服务。

第2步：打开Chrome开发者工具。从层次结构中选择webpack。

第3步：确保您从Web Pack中选择了dot（。）

第4步：举例说一下，如果您想了解路由器的情况。您添加一个断点，然后需要选择“ Step In”。请参见下面的屏幕截图。

第5步：带有注释的屏幕截图。这将带您到相关的库，您也可以在此处添加断点。 （希望这一步是您要寻找的一步）

提示：您可以尝试“逐步入门”以获取更多见解。

希望这会有所帮助。

Answer 4

使用开发人员工具调试角度应用程序的步骤->

1. 构建启用了监视功能的应用程序（ng build -w -env = test）。

2. 现在打开浏览器并打开开发人员工具，然后转到“源”选项卡，然后从文件系统中添加项目。

3. 将项目添加到浏览器后，单击ctrl + p并搜索要调试的文件（webpack或打字稿）。

4. 之后，根据需要添加断点并刷新应用程序。

5. 在右侧（镀铬）中，您将看到用于处理断点的工具栏。

感谢调试！

Answer 5

在我们的例子中，只有一些源文件丢失：即

• CTRL-P 现在会显示它们
• 并且它们也从源目录中丢失：即在节点 Sources
中的 Page - webpack://./src/somedir/ 选项卡上

在我们的案例中，原因是这些文件属于延迟加载模块。
延迟加载的一个迹象是 webpack 显示这样一个节点：

在我们导航到应用程序中的组件后（当模块实际加载时），文件显示出来，CTRL-P 也可以找到它们。

要使文件立即可用，我们可以使用 Workspaces。
即转到 Sources - Filesystem 标签并选择您的源文件夹。
这样做的另一个优点是您现在可以在 chrome 中编辑您的文件，当您保存它时，所做的更改会真正保存到磁盘上的源文件中。
当 angular serve 进程仍在运行时，它会注意到更改并重建您的应用。

使用此功能时的一个警告：
确保工作区指向正确的位置：即我们有时会检出不同的源代码分支，当您指向错误的分支时，可能会导致混淆，因为您在开发工具中的更改不会显示在IDE 显示的预期源文件。