在前端开发中，我们经常在调试接口请求时看到页面不断地发送 API 调用、重复加载图片、或者某个请求时不时多发几次。
但很多时候你可能会疑惑——到底是谁触发的这个请求？
是 HTML 中的资源引用？还是某个 JavaScript 逻辑？又或者是框架的某个钩子函数？

其实，答案就藏在 Chrome DevTools 的 Network 面板中，一个叫 Initiator 的小字段里。

什么是 Initiator

Initiator 表示：当前请求是由谁发起的。

每一个网络请求（JS、CSS、图片、XHR、fetch、import 等）在浏览器里都有一个触发来源。
Initiator 就是帮助我们追踪这个来源的“发起者”。

它能告诉你什么？

在 Network 面板里，当你查看一个请求时：

1. 你会看到一列叫 “Initiator”；

2. 这一列会显示请求的类型（例如：parser、script、redirect 等）；

3. 如果是由 JavaScript 触发的，还会显示具体的文件名和代码行号（例如 main.js:85）；

4. 点击它，浏览器会直接跳到对应的代码位置。

常见的 Initiator 类型

类型	意思	示例
parser	浏览器解析 HTML 时自动发起的请求	<script src="app.js">, <img src="banner.png">
script	由 JavaScript 主动发起	fetch('/api/list'), axios.get('/user')
redirect	因 HTTP 重定向触发	访问 /login 被 302 到 /auth
preload	来自 <link rel="preload"> 或浏览器优化	<link rel="preload" href="main.js">
preflight	跨域请求的预检（OPTIONS 请求）	CORS 请求触发
other	其他内部加载	manifest、service worker 资源等

进阶用法：查看调用栈！

这可能是最容易被忽略、但最有价值的功能👇

1. 打开 Network 面板；

2. 选择一个请求；

3. 点击右侧面板的 Headers → Initiator → 鼠标hover →显示调用栈（Call Stack）；

4. 你会看到一个完整的调用链，比如：

axios.get('/api/user')
    at fetchUser (userService.js:12)
    at onMounted (profile.vue:38)
    at callWithErrorHandling (runtime-core.esm.js:185)

这意味着：

• 请求是由 axios.get 触发；

• 来自 userService.js 第 12 行；

• 被 profile.vue 组件在挂载时调用；

• 最终由 Vue 的生命周期函数执行。

这就是完整的触发路径。

你可以顺着调用栈直接跳转回源码定位问题，非常适合排查：

• 重复请求；

• 首屏加载太多接口；

• 某个逻辑重复触发；

• 组件生命周期问题（比如 mounted 被调用多次）。

下图是，扣子空间的某个页面请求的截图，虽然是打包后的 js， 但是如果你是本地开发会很好的定位你的 js 文件，方便你排查问题。

 选中某个请求后，会有个 Initiator 面板

小技巧

• 如果没有看到 “Initiator” 这一列：
  → 在 Network 面板的表头右键，勾选 Initiator 即可。

• 对于框架项目（Vue、React、Next.js 等），配合 SourceMap 可以直接跳回源码行，非常方便。

总结

功能	说明
查看 Initiator 列	了解请求由谁发起
点击文件名行号	跳转到对应 JS 源码
展开调用栈	还原完整触发链路
配合 SourceMap	快速回溯到源码文件

在排查网络请求问题时，很多人只看 Request URL、Status、Timing，
但真正能告诉你“是谁让这个请求发生的”，其实是 Initiator。

掌握这个小技巧，就能轻松定位：

• 为什么页面会重复请求？

• 某个接口是在哪里被调用的？

• 哪段代码触发了这个资源加载？

---

🔧 一句话总结：
“Initiator = 请求的源头。点击它，就能找到问题的根。”