跳到主要内容

Network

一、认识


Network 用于监视和分析网络请求和响应。可以用来查看网络请求的详细信息,包括加载时间、状态码和响应内容。帮助你分析性能问题,调试 API 请求等。

二、核心


2.1 Headrs

2.2 Preview

2.3 Response

2.4 Initiator

在谷歌浏览器(Google Chrome)的开发者工具中,Initiator(发起者) 工具栏用于显示和跟踪网络请求的源头。当你使用开发者工具的 网络 (Network 面板时,你可以看到每个网络请求的详细信息,包括其发起者。如下所示:

Preview

具体来说,Initiator 工具栏 的作用包括:

  1. 显示请求来源:在网络请求列表中,Initiator 列显示了每个请求的起始源。这可以帮助你了解哪个脚本、函数或事件触发了某个特定的网络请求。

  2. 调试网络请求:通过查看 Initiator 信息,你可以追踪到发起网络请求的代码行,这对调试非常有用。例如,如果你发现某个请求未按预期工作,Initiator列可以帮助你定位问题的代码部分,从而更快地解决问题。

  3. 分析性能: 了解请求的发起源可以帮助你识别性能瓶颈。例如,如果多个请求由某个特定的脚本发起,你可以优化这个脚本以提高整体性能。

2.5 Cookies

三、用法


四、场景


4.1 定位页面请求的发起者

Preview

如图所示:

  1. 点击 网络Network面板, 点击 1723024419 这个页面请求, 点击 Initiator 工具栏

  2. 通过 Request call stack 模块得出,1723024419 这个页面请求的发起者为 forceRefreshPage 函数

  3. 鼠标点击 1723024419 这个请求, command + F 输入 forceRefreshPageEnter, 进行搜索,如下图所示:

    Preview