Chrome - 调试 AngularTypescript - 如何导航到 ts 文件

Chrome

Chrome - 调试 Angular/typescript - 如何导航到 ts 文件

在开发 Angular 应用时，经常需要调试 typescript 代码。使用 Chrome 开发者工具可以方便地进行调试，但有时候需要快速导航到对应的 .ts 文件来查看代码。本文将介绍如何在 Chrome 中实现这一功能。

案例代码：

假设我们有一个 Angular 组件，在组件的 typescript 文件中定义了一些函数和变量，如下所示：

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.CSS']
})
export class ExampleComponent {
  private message: string = 'Hello, world!';
  constructor() { }
  public showMessage(): void {
    console.log(this.message);
  }
}

在组件的 HTML 文件中，我们可以调用 showMessage 函数来显示 message 变量的值：

html
<button (click)="showMessage()">Show Message</button>

现在，我们希望能够在 Chrome 中快速导航到 showMessage 函数所在的 .ts 文件。

步骤 1：打开 Chrome 开发者工具

首先，在 Chrome 浏览器中打开我们的 Angular 应用，并通过右键菜单选择“检查”或按下 Ctrl + Shift + I 打开 Chrome 开发者工具。

步骤 2：切换到 Sources 面板

在 Chrome 开发者工具中，点击顶部导航栏上的 “Sources” 选项卡，即可进入 Sources 面板。

步骤 3：找到对应的 .ts 文件

在 Sources 面板中，可以看到项目的源代码树形结构。展开 “webpack://” 下的文件夹，然后找到我们的组件所在的文件夹。

步骤 4：导航到 .ts 文件

在找到组件所在的文件夹后，可以看到文件夹中列出了该组件的所有相关文件，包括 .ts、.html 和 .CSS 文件。双击打开 .ts 文件，即可导航到该文件并查看代码。

注意：如果项目使用了 Angular CLI 进行构建，那么在 Sources 面板中可能会看到多个 .ts 文件，其中包括原始 .ts 文件和编译后的 .JS 文件。我们应该选择原始 .ts 文件进行导航。

：

使用 Chrome 开发者工具的 Sources 面板，可以方便地在 Angular/typescript 项目中导航到对应的 .ts 文件进行代码查看和调试。通过按照上述步骤，在 Sources 面板中找到对应的 .ts 文件，我们可以快速定位到特定函数或变量的定义处，提高开发效率。

参考资料：

- [Chrome DevTools - Get Started With Debugging JavaScript](Chrome.com/docs/devtools/Javascript/">https://developer.Chrome.com/docs/devtools/Javascript/)

- [Debugging Angular Applications in Chrome](https://angular.io/guide/debugging#debugging-angular-applications-in-Chrome)