第3课：网页爬虫｜F12抓包【打开网站的“透视眼”】

学习目标

学完这一课，你将能够：

1. 打开开发者工具——知道按哪个键、点哪里能调出浏览器的“后台监控室”
2. 看懂Network面板——分清什么是文档请求、什么是XHR、什么是JS/CSS/图片
3. 精准定位数据接口——在海量请求中找到真正返回数据的那个“幕后英雄”
4. 区分静态与异步——一眼看出网页数据是直接写在HTML里，还是后来通过接口加载的
5. 查看请求详情——熟练查看请求头、请求参数、响应数据、状态码
6. 复制作为cURL——学会把浏览器的请求“翻译”成爬虫能用的格式
7. 解决抓包常见问题——遇到数据找不到、Preserve log没勾、请求太多刷屏等情况知道怎么办

这一课不需要写一行代码，但你会获得一个爬虫工程师最核心的技能——找到数据真正的家。

一、通俗原理：F12抓包就是“偷看网站的小纸条”

1.1 为什么需要抓包？

想象这样一个场景：

你走进一家神秘的工厂（网站），想知道它的生产流程。工厂的大门（网页）看起来很漂亮，但你进去后发现里面空荡荡的，机器都在地下室偷偷运转。

你站在门口大喊：“给我看你们的生产数据！” 工厂只把大门装饰给你看（HTML骨架），真正的产品数据（比如商品列表、价格、评论）是通过地下通道（异步接口）悄悄运进来的。

普通浏览：你只能看到工厂最终摆在橱窗里的成品，不知道生产过程。
F12抓包：你在工厂里装了监控摄像头，可以看到所有进出的货物——谁送了什么原料（请求），谁运出了什么产品（响应）。

抓包的本质：记录浏览器和服务器之间所有“对话”的日志。你打开开发者工具的Network面板，浏览器就会开始录音——你访问的每个链接、提交的每个表单、加载的每张图片，都会出现在列表里。

1.2 类比：快递跟踪系统

把浏览器访问网站比作你在网上购物：

• 你在浏览器地址栏输入网址= 你下了一个订单
• Network面板= 快递公司的物流跟踪系统
• 每个请求= 一个包裹的物流记录
• 请求方法(GET/POST)= 包裹类型（普通件/货到付款件）
• 状态码200/404= 妥投/查无此人
• 响应数据= 包裹里的实物

打开F12的Network，就像打开了物流后台，你能看到每一个包裹从哪里发出（请求URL）、里面装了什么（响应内容）、送到了没有（状态码）。

1.3 为什么爬虫必须学会抓包？

很多新手写爬虫的方式是：把网页URL直接丢给爬虫，然后写一堆正则表达式在HTML里找数据。结果经常发现——我要的数据怎么不在HTML里？

因为现代网站有两种数据加载方式：

你不会抓包，就永远只能爬第一种老古董网站，对第二种直接投降。

抓包教你的是：别盯着橱窗看，找到仓库在哪里。

二、手把手教学：打开F12开发者工具

2.1 三种打开方式

无论你用的是Chrome、Edge、Firefox，方法都一样：

方法1（最快）：直接按键盘上的F12键

方法2（备用）：右键点击网页空白处 → 选择“检查” 或 “Inspect”

方法3（菜单）：浏览器右上角三个点 → 更多工具 → 开发者工具

注意：有些笔记本的F12键默认是“音量-”之类的功能，需要按住Fn键再按F12，或者直接在菜单里打开。

打开后你会看到开发者工具窗口，通常出现在右侧、底部或弹出为独立窗口。点击顶部的Network标签，就进入抓包面板了。

2.2 Network面板的“第一印象”

刚打开Network面板时，里面可能是空的，因为浏览器还没有开始记录。你需要刷新页面，才能看到所有请求。

刷新（按F5或Ctrl+R）后，你会看到一堆条目瞬间刷出来，像下面这样：

┌─────────┬──────────────────────┬────────┬────────┬──────────┐ │ 名称 │ 状态 │ 类型 │ 大小 │ 时间 │ ├─────────┼──────────────────────┼────────┼────────┼──────────┤ │ www... │ 200 │ document│ 12.3 KB│ 234 ms │ │ main.css │ 200 │ stylesheet│ 45 KB│ 56 ms │ │ jquery.js│ 200 │ script │ 87 KB │ 89 ms │ │ api/products│ 200 │ xhr │ 2.1 KB │ 120 ms │ │ logo.png │ 200 │ png │ 34 KB │ 45 ms │ └─────────┴──────────────────────┴────────┴────────┴──────────┘

每一行就是一个HTTP请求，从浏览器发往服务器。你的目标是：在这堆请求里，找到那个返回了你想要的数据的请求。

2.3 Network面板的核心区域

• 顶部工具栏：红色录制按钮（默认开启）、清空按钮（🚫）、筛选框、Preserve log（保留日志）复选框等
• 请求列表：显示所有请求的瀑布流
• 底部状态栏：显示总共多少请求、传输了多少数据、总耗时
• 右侧详情区：点击某个请求后，显示该请求的详细信息（Headers、Payload、Preview、Response、Timing等）

三、核心技能：筛选和搜索请求

打开一个普通网页，Network里可能有上百个请求（图片、CSS、JS、字体、广告追踪等）。你不可能一个一个看。需要学会筛选。

3.1 按类型筛选

Network面板顶部有一排按钮：

• All：全部请求（默认）
• Fetch/XHR：最重要！异步接口请求。99%的动态数据都在这里
• Doc：文档请求（HTML页面本身）
• CSS：样式表
• JS：JavaScript文件
• Img：图片
• Media：音视频
• Font：字体文件
• WS：WebSocket连接
• Manifest：应用清单

实操：打开一个电商网站的商品列表页，点击Fetch/XHR，观察剩余请求数量。原本可能有100多个，现在只剩几个或十几个——这些就是潜在的数据接口。

为什么叫XHR？全称是XMLHttpRequest，是浏览器用来发异步请求的对象。现代也有Fetch API，所以按钮叫“Fetch/XHR”。

3.2 搜索关键词

如果你在页面上看到一段文字“iPhone 15 Pro 售价7999”，你可以在Network面板里搜索这个字符串：

• 按Ctrl+F（Mac为Cmd+F）打开搜索框
• 输入“iPhone 15 Pro”或“7999”
• 如果某个请求的响应中包含这个词，会高亮显示

这个方法可以快速定位数据源：页面上的文字，总归是从某个请求里来的。搜一下就知道是哪个请求。

3.3 按状态码筛选

有时候你想看哪些请求失败了（比如403、404），可以点击状态码列头排序，或者用筛选框输入status-code:403。

四、看懂一个请求的完整信息

点击请求列表中的任意一行，右侧会出现详情面板。这是抓包最核心的部分。

4.1 Headers标签页（请求头+响应头）

Headers分为三个子区域：

① General（通用信息）

• Request URL：请求的完整地址（复制这个可以直接拿来爬）
• Request Method：GET 或 POST
• Status Code：状态码（200表示成功）
• Remote Address：服务器IP和端口
• Referrer Policy：引用策略

② Response Headers（响应头）
服务器返回的头信息，常见的有：

• Content-Type：返回的数据类型（text/html、application/json）
• Set-Cookie：服务器让浏览器保存的Cookie
• Cache-Control：缓存策略

③ Request Headers（请求头）
浏览器发出的头信息，爬虫需要模拟这些：

• User-Agent：浏览器身份
• Referer：来源页面
• Cookie：当前保存的Cookie
• Authorization：认证令牌
• Accept、Accept-Encoding、Accept-Language等

爬虫的黄金法则：请求头里有什么，你的爬虫就应该带什么（至少带上关键的那几个）。

4.2 Payload / Request Body（请求参数）

对于POST请求，这里会显示提交的参数。

参数可能是以下格式：

• 表单格式（Form Data）：

  username: zhangsan password: 123456 page: 2

• JSON格式（Request Payload）：

  {"username":"zhangsan","password":"123456","page":2}

• 查询字符串（Query String Parameters）：对于GET请求，参数显示在URL后面，这里也会列出来。

实操：点击某个XHR请求，看Payload部分，你就知道爬虫需要提交哪些参数才能拿到数据。

4.3 Preview（预览）

这个标签页会格式化显示响应内容：

• 如果是JSON，会变成可展开的树形结构
• 如果是HTML，会渲染出大致的样子
• 如果是图片，会显示缩略图

Preview的好处是：你不用在原始文本里费力找数据，浏览器帮你把结构整理好了。

4.4 Response（原始响应）

这是服务器返回的原始文本。如果Preivew没有正确显示（比如数据是加密的），你就来这里看原始内容。

爬虫最终拿到的就是这个Response里的东西。你可以在这里确认数据是否完整。

4.5 Timing（耗时分析）

显示请求各个阶段花费的时间：DNS查询、连接、等待服务器响应、下载内容等。对爬虫来说不太常用，但可以用来判断网站慢是因为网络还是服务器。

五、实战演练：从零找到真实数据源

现在我们用一个具体例子，走一遍完整的抓包流程。

场景：抓取豆瓣电影Top250

目标：找到返回电影列表的数据接口。

步骤1：打开目标网页

在浏览器打开https://movie.douban.com/top250

步骤2：打开开发者工具，切换到Network

按F12 → Network标签。此时面板可能是空的。

步骤3：刷新页面

按F5刷新。你会看到大量请求开始出现。

步骤4：筛选XHR

点击Fetch/XHR按钮。你会发现——什么都没有？或者只有几个无关的请求（比如统计、头像）。

这是怎么回事？豆瓣Top250是静态页面，电影数据直接写在HTML里，不是通过XHR加载的。所以筛选XHR找不到。

步骤5：切换到Doc

点击Doc按钮。只有一个请求：top250，状态200。点击它。

步骤6：查看响应

点击Response标签，你会看到整个HTML源代码。按Ctrl+F搜索“肖申克的救赎”，果然在HTML里。

结论：对于这种页面，爬虫直接请求这个URL，然后解析HTML就能拿到数据。不需要找XHR接口。

步骤7：换个动态页面试试

现在打开https://movie.douban.com/explore（豆瓣电影分类页）。这个页面滚动到底部会自动加载更多电影。

重复上述步骤：打开Network → 刷新 → 筛选XHR。

你会看到一个新的请求，类似https://movie.douban.com/j/search_subjects?...。这就是异步加载的接口！

点击它，查看Preview，你会看到JSON格式的电影数据，包括标题、评分、图片链接。

这才是爬虫真正要找的东西：一个干净的结构化接口。

实战要点总结

六、区分静态数据与异步接口（重要）

这是新手最容易卡住的地方。我们用一个表格彻底讲清楚：

如何一眼识别？

技巧1：打开页面后，先清空Network（点击🚫），然后滚动页面或点击按钮，观察是否有新的XHR请求出现。如果有，那极大概率是异步接口。

技巧2：右键点击网页上的某个数据（比如价格），选择“检查”。如果该数据所在的HTML元素周围没有其他内容，而是孤零零的一个<span>，那数据很可能后来才填进去的。

技巧3：看网页源代码（Ctrl+U）。如果数据不在源代码里，那就是异步加载。

七、抓包进阶：处理翻页和参数

7.1 找翻页规律

很多异步接口的分页是通过参数控制的。比如豆瓣分类页的接口：

https://movie.douban.com/j/search_subjects?type=movie&tag=热门&page_limit=20&page_start=0

参数含义：

• type=movie：类型是电影
• tag=热门：标签
• page_limit=20：每页20条
• page_start=0：从第0条开始

翻到第二页，page_start变成20；第三页变成40。非常规律。

爬虫只需要改变page_start参数，就能拿到所有页。

7.2 观察请求是否携带加密参数

有些网站的接口参数是动态生成的，比如包含sign、token、timestamp。例如：

https://api.某网站.com/list?page=2&sign=7a8f3b2c1d&_t=1699876543

sign是前面所有参数加上密钥计算出来的哈希值，服务器会校验。这种接口很难直接爬，需要逆向JS。

抓包时要注意：如果参数里有看起来像随机字符串的东西（sign、nonce、token），说明可能有反爬。

7.3 查看请求的调用栈（高级）

有时你想知道是哪个JS文件发起了这个XHR请求，可以用Initiator列。

在Network请求列表中，有一列叫Initiator（发起者），点击展开可以看到是哪一行代码调用的。这对逆向加密逻辑很有帮助。

八、抓包常用技巧和快捷操作

8.1 Preserve log（保留日志）

问题：你点击了一个链接或提交了一个表单，页面跳转了，Network里的请求全部消失。

解决：勾选顶部的Preserve log。这样即使页面跳转或刷新，之前的请求也不会被清空。

使用场景：

• 登录流程（从登录页跳转到首页，需要看登录请求）
• 分步骤的表单提交
• 单页应用（SPA）的路由切换

8.2 Disable cache（禁用缓存）

问题：修改了页面代码，刷新后还是旧的，因为浏览器用了缓存。

解决：勾选Disable cache。刷新后所有资源都会重新从服务器获取。

注意：只在开发时勾选，平时浏览可以关掉，否则每次加载都变慢。

8.3 模拟慢速网络

在Network面板顶部有一个下拉菜单，默认是Online。你可以改成Slow 3G、Fast 3G等，模拟弱网环境。

爬虫用途：测试你的爬虫在网络差时的重试机制。

8.4 复制请求为cURL

右键点击某个请求 → Copy → Copy as cURL。你会得到一段命令，可以在终端直接执行来复现这个请求。

这个功能超级有用：

• 你可以把cURL命令发给别人，他们就能复现你的请求
• 很多在线工具可以把cURL转换成Python/JavaScript/Java代码
• 测试接口是否可用，不需要写代码，直接在终端跑cURL

8.5 用过滤框精确查找

Network面板左上角有个过滤框，支持高级语法：

• 输入/api：只显示URL中包含api的请求
• 输入-font：排除所有字体请求
• 输入status-code:200：只显示状态码200的请求
• 输入method:POST：只显示POST请求
• 输入larger-than:1000：只显示大于1KB的请求

九、实战场景举例

场景1：爬取淘宝商品详情（需要登录）

淘宝的商品详情页，数据是异步加载的。你打开商品页，Network里会有一个XHR请求，URL类似：

https://detailskip.taobao.com/service/getData/1/p1/q...

但这个请求带了复杂的签名参数，直接复制URL用爬虫访问会返回403。

抓包解法：

1. 先通过模拟登录拿到Cookie
2. 把浏览器里的Cookie复制到爬虫
3. 完整复制请求头（包括Referer、User-Agent等）
4. 有些参数是动态的，需要找到生成方式（逆向JS）

场景2：爬取微信公众号文章（反爬较强）

微信公众号文章在PC浏览器打开，文章内容可能在HTML里，但阅读量、点赞数是通过XHR加载的。你需要找到那个XHR接口，一般URL里包含getappmsg之类的关键词。

抓包难点：需要先在微信内打开文章（或模拟微信UA），否则直接访问会被拦截。

场景3：爬取政府公开数据（友好）

很多政府数据开放平台提供JSON接口，抓包后你会发现参数很直接，没有反爬。例如某些统计局网站，数据接口的URL规律是/api/getData?year=2023。

这种是最理想的爬取目标。

场景4：爬取股票实时行情（WebSocket）

有些股票网站的数据不是通过普通HTTP请求，而是通过WebSocket推送。在Network里你会看到类型为ws或websocket的连接。

爬虫处理：需要用支持WebSocket的库（如websocket-client）来连接，而不是普通的requests。

场景5：爬取无限滚动页面（懒加载）

今日头条、小红书这类信息流，滚动到底部会触发新请求。抓包时打开Network，勾选Preserve log，然后滚动页面，你会看到每滚动一次就多一个XHR请求，参数里通常包含offset或cursor。

爬虫策略：找到第一页的请求，观察参数变化规律，循环改变参数即可。

十、新手常见抓包问题及解决

问题1：打开Network什么都没有

原因：刷新页面之前没开Network，或者页面还没加载完就打开了。

解决：先打开开发者工具到Network，然后刷新页面。如果还是空白，检查顶部的红色录制按钮是否点亮（应该红色）。

问题2：页面刷新后请求列表清空了

原因：页面跳转或刷新时，默认会清空之前的请求。

解决：勾选Preserve log。

问题3：找不到我要的数据

原因：

• 数据在Doc的HTML里，你却只看了XHR
• 数据是加密的，Response里是乱码
• 数据是通过WebSocket推送的
• 页面需要滚动或点击才能触发请求，你没做这些操作就去看Network

解决：

• 先搜页面上的关键词（Ctrl+F）在Network里搜
• 检查Doc类型请求的响应
• 尝试在页面上执行操作（点击、滚动）然后观察新请求

问题4：XHR请求太多了，不知道是哪一个

原因：很多网站有统计、广告、推荐等多个XHR。

解决：

• 清空Network，然后只做一个操作（比如点击“加载更多”），看新出现的请求
• 按文件大小排序，数据接口通常不会很大（几KB到几十KB），也不会特别小
• 看Preview，哪个返回的内容包含页面上的文字，就是哪个

问题5：复制cURL后执行，返回的内容和浏览器不一样

原因：cURL缺少了浏览器环境的一些特征，比如Cookie过期、缺少某些头。

解决：

• 检查cURL命令里是否带了--cookie（如果没有，说明你的Cookie没复制完整）
• 有些网站需要特定的Accept-Encoding，cURL可能默认不同
• 尝试在cURL里加上-H 'User-Agent: ...'精确匹配

问题6：接口返回的数据是加密的

现象：Preview显示乱码或不可读字符，Response里像是一堆二进制或Base64。

原因：网站对数据做了加密或压缩。

解决：需要逆向JS找到解密函数。这属于高级反爬，后续课程会涉及。

问题7：页面有登录态，但爬虫复制Cookie后还是401

原因：Cookie可能绑定了IP、User-Agent或有过期时间。服务器检测到环境变化，拒绝了。

解决：

• 确保爬虫的User-Agent和复制Cookie时的浏览器一致
• 使用相同的IP（如果Cookie绑IP，需要代理）
• 重新登录获取新Cookie

问题8：抓包时看到请求，但关闭开发者工具后页面表现不同

原因：有些网站会检测开发者工具是否打开，如果打开则返回正常数据，关闭后返回假数据或触发反爬。这是一种反调试手段。

解决：比较麻烦，需要找到检测的JS并绕过。或者用无头浏览器（如Puppeteer）来规避。

十一、总结

抓包的核心价值

一句话：抓包让你从“猜”数据在哪，变成“看”数据在哪。

没有抓包能力，你写爬虫就像闭着眼睛走路——碰运气。有了抓包，你可以精确地知道：

• 数据是静态的还是异步的？
• 异步接口的URL是什么？
• 需要发送哪些参数？
• 需要哪些请求头？
• 返回的数据格式是什么？

抓包实战流程（必背口诀）

1. 开F12→ Network
2. 勾Preserve（如果需要保留日志）
3. 刷新/操作页面
4. 筛选XHR（或Doc）
5. 找请求（搜关键词、看Preview）
6. 看Headers（URL、方法、请求头）
7. 看Payload（参数）
8. 看Response（数据）
9. 复制cURL（或直接写爬虫）

抓包与后续课程的关系

• 第2课（HTTP）让你理解请求头和状态码的意义
• 第3课（抓包）让你动手看到真实的请求
• 第4-5课将教你如何用代码发送这些请求，并处理返回的数据

抓包是所有爬虫的起点。没有抓包，后面的一切都是空中楼阁。

十二、课后作业

作业1：基础抓包（必做）

打开https://www.bilibili.com（B站首页），完成以下操作：

1. 按F12进入Network
2. 刷新页面
3. 筛选XHR，找到一个返回视频列表数据的接口（提示：URL中包含popular或recommend，Preview里能看到视频标题）
4. 点击该请求，记录以下信息：
   • 请求URL
   • 请求方法（GET还是POST？）
   • 响应状态码
   • 在Preview里，你能看到几个视频标题？（截图或记录）
5. 再筛选Doc，找到返回首页HTML的请求，记录其状态码和大小。

作业2：区分静态与异步（必做）

分别打开以下两个网站，判断数据是静态还是异步：

1. https://www.zhihu.com/question/358553322（任意一个知乎问题页面）
2. https://www.xiaohongshu.com/explore（小红书发现页）

要求：

• 对每个网站，说明你判断的依据（比如：查看网页源代码、筛选XHR、搜索页面关键词等）
• 如果是异步，找出返回主要数据的XHR请求的URL
• 如果是静态，在Doc的Response里搜索任意一个问题标题，确认它存在

作业3：分析翻页接口（选做，进阶）

打开https://movie.douban.com/explore，滚动页面到底部，观察加载更多时出现的XHR请求。

1. 记录接口URL
2. 查看请求参数，找出哪两个参数控制分页（提示：page_limit和page_start）
3. 修改参数值，手动构造一个URL，直接在浏览器地址栏打开，看能否返回JSON数据（例如把page_start改成20）
4. 如果你能成功，说明这个接口可以直接用爬虫批量爬取。

作业4：复制cURL并转换（选做）

在作业1中找到的B站XHR请求，右键 → Copy → Copy as cURL。

1. 打开一个能在线的cURL转代码工具（如curlconverter.com）
2. 把cURL粘贴进去，转换成Python代码。
3. 观察生成的代码中包含哪些请求头。
4. 思考：如果不用这些头，可能发生什么？

（如果还没学过Python，可以先记录cURL命令，以后学了再转）

作业5：排查抓包问题（必做）

阅读以下情景，写出你的排查思路：

情景A：你在抓包一个直播网站，页面滚动时确实加载了新的评论，但Network的XHR筛选结果里什么都没有。可能是什么原因？（提示：WebSocket？）

情景B：你复制了浏览器的Cookie到爬虫，但爬虫请求某个接口时返回401。你的排查步骤是什么？

情景C：你在看一个电商商品页，页面上的价格显示“￥199”，但你在Network的所有请求的Response里搜“199”都搜不到。可能是什么原因？（提示：价格可能是图片？或者前端JS计算？）

情景D：你打开Network，发现某个XHR请求的Preview显示“…”而不是JSON，而且里面写着“请开启JavaScript”。这是什么意思？

结束语

抓包是爬虫工程师的“X光眼”。从这一课开始，你不再是站在网页外面瞎猜的门外汉，而是能钻进网络管道里，看清每一次数据交换的“内部工程师”。

熟练使用F12的Network面板，会让你在后续课程里学习爬虫框架（Requests、Scrapy）时如虎添翼——因为你会清楚地知道每个请求该长什么样。

下一课预告：第4课，我们将用Python的Requests库，把你抓包看到的请求“翻译”成代码，真正发出第一个爬虫请求。你会惊讶地发现：原来爬虫就是“抄作业”——把浏览器做的事用代码重做一遍。

在那之前，请务必完成作业1和作业2。它们是你通向数据自由的第一把钥匙。

🔗《20节课精通网页爬虫》系列课程导航

GO

🌟 感谢您耐心阅读到这里！
💡 如果本文对您有所启发欢迎：
👍 点赞📌 收藏 📤 分享给更多需要的伙伴。
🗣️ 期待在评论区看到您的想法, 共同进步。
🔔 关注我，持续获取更多干货内容～
🤗 我们下篇文章见～