浏览器DevTools系列-通过分析ChatGPT官网了解网络活动工具的使用

本文希望通过对ChatGPT官网的网络活动进行分析, 以此来了解如何使用Chrome devTools的网络栏如何使用?同时, 会结合我们经常会用到的一些调试技巧, 让我们更快速的定位问题.

1.访问chatGpt官网

通过简单的输入chatGPT的官网url, 我们就得到了一个这样的页面,显然这其中一定发生了很多事情才能让我们看到下面的图片: 

接下来我们通过检查我们输入url后我们向open.ai的Web服务器发送的请求有哪些,具体我们之间又发生了什么.

2.检查网络活动

按 Ctrl+Shift+J 或 Command+Option+J (Mac) 打开开发者工具,选择网络活动页面后,打开监视按钮重新刷新页面后, 我们可以看到如下: 

相信眼力劲好的小伙伴已经看到了, openai的服务器首先给我们返回了一个document, 这就是我们再熟悉不过的HTML文件, 点击preview后我们可以发现它长这样: 

正是通过这个document, 我们在之后的几秒中内继续交流这个document关联的其他资源, 最终得到了我们可以看到的完整的ChatGPT官网.

3. document请求的详细信息查看

当我们的tag从预览切换到标头时, 这里主要展示的是HTTP标头(这里之后会在网络部分解释), 如下: 

这里的标头主要是一些相互信息的确认, 可以理解为, 这些标头的作用就是为了确认通信双方关系, 状态等.补充: 这里, 我们还可以使用上一节我们说到的方法来hack响应标头,通常有一些需要调试的地方时,我们可以这样来访问: 

刷新后

4.时间标签

切换到时间tag我们其实可以看到整个请求网络的建立和连接, 在这里我们可以明确的查看某个请求/响应的时间(这里仅供参考,具体性能问题使用lighthouse tag去分析会更好)

5.利用filter来精确找到某个/某类请求

在这里我们就需要把注意力集中到录制按钮的旁边几个按钮, 如图: 

6.接口问题排查方法

假设我们是open.ai的后端人员, 我们提供的接口返回的某些数据有问题, 我们如何拿到这个接口相关的信息?如下: 

7.快速查看/验证Ajax请求

有时候我们需要快速的验证一个ajax请求, 可以在开发工具中这样, 点击重放XHR即可

 

8.结合source标签栏快速定位请求

有时候, 我们正在source下面查看一个文件, 我们想要确认这个文件涉及的请求相关的cookie,请求位置等等, 这时候我们可以: 

附带一下, 我们还可以通过高级搜索, 查看网页中对应文件和我们想要查看/调试的具体文件: