douyin-crawler-poc/learning/network_basics/01_open_devtools_check_xhr.md
wangshaoqing 321bbff1c1 添加学习教程目录(learning/)及对应单元测试
- 新增 DrissionPage 基础教程(01-05)
- 新增 Playwright 基础教程(01-05)
- 新增网络基础教程(01-05)
- 新增 test_learning_examples.py 单元测试
- 更新 .gitignore 忽略 learning/*/output/ 目录
2026-05-06 16:39:55 +08:00

1.3 KiB
Raw Permalink Blame History

练习 01: 打开 DevTools只看 Fetch/XHR

目标

  1. 学会打开 Chrome DevTools
  2. 学会切到 Network
  3. 学会只看 Fetch/XHR
  4. 学会观察“页面动作”和“请求出现”之间的关系

你要动手做什么

  1. 打开一个抖音博主主页
  2. F12 或右键打开开发者工具
  3. 切到 Network
  4. 勾选或点击只看 Fetch/XHR
  5. 清空已有请求记录
  6. 手动滚动页面一次
  7. 观察滚动之后新增了哪些请求

你要重点看什么

  • 有没有请求是在你滚动之后立刻出现的
  • 哪些请求名字重复出现
  • 哪些请求的响应大小明显更大
  • 哪些请求看起来像“作品列表”而不是埋点或日志

本题不要急着做什么

  • 不要一开始就复制所有请求
  • 不要先看一堆 Headers
  • 不要马上写代码

本题完成标准

你能手写回答这 3 个问题就算完成:

  1. 滚动页面之后,Fetch/XHR 里有没有新请求出现?
  2. 哪一个请求最像“返回作品列表”的接口?
  3. 你为什么怀疑是它?

建议记录模板

页面:
抖音博主主页

触发动作:
手动向下滚动一次

看到的现象:
新增了几个 Fetch/XHR 请求

最可疑的请求:
写出它的名字或 URL 片段

怀疑原因:
比如“滚动之后立刻出现,且响应较大”