如何在Angular中追踪性能分析场景下的匿名函数并定位其关联代码

• 给匿名回调显式命名，消除anonymous标记
  你可以将原本直接传入的匿名函数先赋值给有语义的变量，或者使用命名函数表达式，性能分析工具会自动识别变量/函数名替换anonymous标记，以你的示例代码为例修改后如下：

  <button (click)="startTimeout()">Start timer</button>
  

  // app.component.ts
  public startTimeout() {
    // 给回调函数定义有语义的变量名
    const startTimeoutTimerCallback = () => {
      this.onStartTimeoutTimer();
    };
    setTimeout(startTimeoutTimerCallback, 1000);
  }
  
  private onStartTimeoutTimer(): void {
    const x = 1;
  }
  

  修改后性能面板中会直接显示startTimeoutTimerCallback函数名，无需再猜测对应关系。
• 开启Source Map直接定位原始代码位置
  开发环境构建时保留Source Map生成配置，同时确保Chrome DevTools设置中开启了「Enable JavaScript source maps」选项，后续性能录制后，直接点击你要查询的anonymous函数条目，就能自动跳转到Sources面板中该匿名函数的定义行，精确对应原始TypeScript/JavaScript的具体代码片段，无需手动排查。
• 通过调用栈回溯匿名函数生成位置
  若未开启Source Map，你可以点击anonymous函数条目展开完整调用栈，向上追溯调用栈记录即可找到创建该匿名函数的上层业务函数，对应到具体的代码生成场景，比如你的示例中匿名函数的调用栈向上翻就可以看到startTimeout的调用记录，即可确定该匿名函数是在startTimeout执行时创建的定时器回调。

内容的提问来源于stack exchange，提问作者Nicolò Bracchi