如何使用.NET Core Web应用程序的Chrome DevTools调试我的打字稿页面？

Question

我正在向现有的Angular 7应用程序添加功能。但是，我需要能够调试打字稿，以检查对象或数组中的值。如何启用Chrome Dev工具能够调试ts文件？

Answer 1

您必须调试编译的JavaScript，因为它在构建过程中已全部转换。您可以在调试选项卡的“源”部分中看到这一点，在其中可以添加断点以及此处的所有内容。如果您想轻松地找到一个部分，只需将其记录下来，控制台应为您提供JavaScript行，例如。

Answer 2

  

但是，我需要能够调试打字稿，以检查对象或数组中的值。如何启用Chrome Dev工具能够调试ts文件？

我不确定您需要启用什么功能。我现在正在修补Angular 7应用程序。以下是一些可能对您有所帮助的工作流程。

在您的代码中添加debugger语句可能是最简单的方法。 Chrome执行页面时，如果在DevTools打开时遇到debugger语句，它将暂停在该行代码上。

在上面的屏幕快照中，我向debugger侦听器添加了click语句，因此该页面仅在单击按钮后才暂停。 呼叫堆栈窗格显示直到我暂停的那一刻的呼叫。 范围窗格显示范围内的变量。

在暂停状态下，您可以按 Escape 在控制台中运行JS。上下文还与您暂停的时间点匹配。例如，在下面的屏幕截图中，您可以看到this解析为我暂停的组件。

从DevTools UI设置断点似乎也可以。要打开我的源文件，我导航到webpack://> .> src> app

我尚未与Angular进行广泛合作，因此，如果您使用的开发环境与默认ng serve --open不同，这些工作流程可能无法正常工作。

让我知道这些帮助中的任何一个还是不起作用。