如何使用 Chrome DevTools 为 .NET Core Web 应用程序调试我的 typescript 页面？答案

【问题标题】：How do I debug my typescript pages with Chrome DevTools for a .NET Core web application?如何使用 Chrome DevTools 为 .NET Core Web 应用程序调试我的 typescript 页面？
【发布时间】：2021-10-14 22:56:02
【问题描述】：

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

【问题讨论】：

标签： typescript google-chrome google-chrome-devtools angular7

【解决方案1】：

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

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

在代码中添加debugger 语句可能是最直接的方法。当 Chrome 执行页面时，如果在 DevTools 打开时遇到debugger 语句，它会在该代码行暂停。

在上面的屏幕截图中，我将debugger 语句添加到了click 侦听器，因此页面仅在我单击按钮后才暂停。 调用堆栈窗格显示导致我暂停的那一刻的调用。 Scope 窗格显示了范围内的变量。

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

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

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

如果有任何帮助或不起作用，请告诉我。

【讨论】：

【解决方案2】：

这仅适用于本地：

首先在 Chrome 中打开应用程序
打开开发工具
点击来源
按Ctrl+P，写下你要调试的文件名
如果查找有困难，请使用左侧文件系统查找。
单击要调试的行。
Chrome 通常会停在那里，但在 React 中你可能会遇到麻烦，因为它以声明方式运行，也许 Angular 可能会导致同样的问题。

【讨论】：

【解决方案3】：

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

【讨论】：