Chrome DevTools中请求发起者显示异常的问题咨询

嗨，我来帮你搞定这个问题～ 这种情况在Angular项目里挺常见的，主要是Zone.js的异步包装机制在“搞鬼”，下面给你拆解原因和解决办法：

为什么会变成只显示zone.js:2183？ #

Angular依赖Zone.js来追踪所有异步操作（比如HTTP请求、定时器这些），它会把你的业务代码包裹在自己的上下文里执行。如果DevTools的栈追踪设置不对，或者Zone.js的默认配置变了，就会优先显示Zone.js的调用栈，而不是你写的原始TypeScript代码位置。你提到之前能正常显示，大概率是某个设置或者依赖版本更新后触发了这个变化。

恢复显示自己代码位置的具体方法 #

• 先检查Chrome DevTools的核心设置

  1. 打开DevTools，点击右上角的齿轮图标进入设置页面
  2. 切换到「Debugger」标签页：
     • 确保「Enable JavaScript source maps」是勾选状态——这个选项是DevTools能映射到你的TypeScript原始代码的关键，要是关了就只能看到编译后的框架代码
     • 试试开启「Hide framework code」选项，它会自动隐藏Zone.js这类框架库的调用栈，直接显示你的业务代码发起位置
  3. 保存设置后，刷新页面再看Network面板的Initiator列

• 调整Zone.js的配置（针对依赖版本变更的情况）
  如果DevTools设置没问题，那可能是Zone.js的默认行为变了。你可以在项目的polyfills.ts文件里添加一行配置，让它保留原始的异步调用栈：

  (window as any).__Zone_enable_async_stack_traces = true;
  

  添加后重启你的Angular开发服务器（ng serve），再打开DevTools看看效果。要是之后不需要了，把这行代码注释掉就行，避免影响性能。

• 临时快速定位的小技巧
  要是你着急找发起位置，也可以点击Initiator列里的zone.js:2183，跳转到Sources面板的Zone.js代码后，在右侧的「Call Stack」面板里展开异步调用栈，就能找到属于你自己的代码（比如myComponent.ts:21）的调用记录啦。

内容来源于stack exchange