侦察兵的艺术：能够看见的秘密与 Network 面板深度解析

这是《Python爬虫进阶》专栏的第二篇。

在上一篇中，我们搭建好了"军火库"。这一篇，我们不写一行 Python 代码，而是要学会如何像侦察兵一样，通过浏览器自带的 DevTools（开发者工具） 彻底摸清敌人的底细。

很多新手爬虫写不出来，不是因为 Python 语法不熟，而是因为找不到数据的源头。

侦察兵的艺术：能够看见的秘密与 Network 面板深度解析

摘要：

爬虫开发的"二八定律"：80% 的时间在分析 Network 和调试 JS，只有 20% 的时间在写 Python 代码。本篇将深入 Chrome DevTools 的 Network 面板，教你利用 XHR 断点 、调用栈（Call Stack） 和 全局搜索，精准定位 Libvio 等复杂站点的加密数据入口。

一、为什么你的爬虫总是"找不到数据"？

打开一个网页（比如 Libvio），你能看到视频在播放，能看到标题和简介。但当你右键"查看网页源代码"时，却发现里面空空如也，找不到 .mp4 或 .m3u8 链接。

这是因为现代网页（SPA/PWA）大量使用了 AJAX (XHR/Fetch) 技术。数据不是写死在 HTML 里的，而是页面加载后，通过 JavaScript 悄悄向服务器请求的。

侦察兵的第一原则：

所见非所得。 你眼睛看到的（渲染后的页面），和爬虫看到的（初始 HTML），往往是两码事。

二、 Network 面板：战场的全景地图

按 F12 打开 DevTools，切换到 Network (网络) 面板。这里记录了浏览器和服务器之间发生的一切对话。

1. 关键设置（必开）

在开始抓包前，请务必勾选这两个选项：

☑️ Preserve log (保留日志)： 非常重要！防止页面跳转（302 Redirect）或刷新时，之前的关键请求包被清空。
☑️ Disable cache (禁用缓存)： 确保每次刷新都能拿到最新的数据，而不是浏览器的缓存副本。

2. 过滤器（Filter）的妙用

面对成百上千个请求，你需要通过过滤器降噪：

All: 查看所有。
Doc: (Document) 初始的 HTML 文档。如果数据在源码里，看这里。
XHR / Fetch: 这是爬虫的"金矿"。90% 的 API 接口、JSON 数据、加密参数都在这里。
JS: 加载的 JavaScript 文件（逆向分析的目标）。
WS: (WebSocket) 如果网站是即时通讯或直播弹幕，看这里。
Media: 图片、音频、视频文件。

三、实战：寻找 Libvio 的视频"七寸"

现在，我们打开 Libvio 的任意一个视频播放页。我们的目标是：找到视频的真实播放地址（m3u8）。

步骤 1：捕获流量

打开 Network 面板。
刷新页面。
点击播放视频。
观察 Network 面板的数据滚动。

步骤 2：关键词搜索（Search）

这是最简单粗暴的方法。

按下 Ctrl + F (Mac: Cmd + F)，会弹出一个全局搜索框。

尝试搜索关键词：

m3u8
mp4
video
player

结果分析：

在 Libvio 上，你可能搜不到直接的 .m3u8 后缀链接。为什么？

因为它的 URL 可能是加密的，或者是通过一个看不出后缀的 API 返回的。

步骤 3：XHR/Fetch 筛选与排查

点击 XHR 过滤器。逐个查看响应内容（Response）。

你会发现一些可疑的请求，比如：

GET /api/v1/video/key...
POST /player/get_config...

点击这些请求，查看 Preview (预览) 或 Response (响应) 。

如果看到类似 {"url": "aHR0cHM6Ly9..."} 或者一堆乱码，恭喜你，你找到宝藏了。这就是我们需要逆向的加密数据。

四、核心杀招：XHR 断点 (XHR Breakpoints)

如果你在 Network 里找得眼睛都花了还没找到，或者请求太多根本看不过来，这时候就要用XHR 断点。

这是"让时间静止"的魔法。

怎么用？

切换到 Sources (源代码) 面板。
在右侧栏找到 XHR/fetch breakpoints。
点击 + 号。
输入 URL 的一部分关键词。

如果你发现关键请求的 URL 包含 get_video，就输入 get_video。
如果你不知道关键词，可以留空（虽然这会拦截所有请求，比较烦）。

刷新页面 或 触发动作（点击播放）。

发生什么了？

浏览器会立刻暂停（Paused in debugger），画面变灰。

此时，浏览器正准备发送那个包含关键词的请求，但还没发出去。你就停在案发现场的前一秒。

Image suggestion: Screenshot of Sources panel with an XHR breakpoint active

五、调用栈（Call Stack）：顺藤摸瓜

当浏览器因为断点暂停时，不要慌。看向右侧的 Call Stack (调用栈)。

这是函数的"族谱"。它告诉你：

是谁调用了谁，最后发出了这个 HTTP 请求。

逆向分析的"黄金法则"：

忽略框架代码： 看到 jquery.min.js, react-dom.js, vue.runtime.js, axios.js 这些名字，统统跳过。这些是库文件，不是业务逻辑。
寻找业务代码： 寻找类似 app.js, index.js, player.js, detail.js 这种名字的文件。
点击跳转： 点击栈帧（Stack Frame），DevTools 会自动跳转到对应的 JS 代码行。

实战场景：

假设你在 Call Stack 里点了一下 app.js:1234，发现代码停在了一行：

javascript 复制代码

let encrypted_url = _0x5a1b(video_id, token);
http.get(encrypted_url);

BINGO！

_0x5a1b 就是那个加密函数。
video_id 和 token 就是它的参数。

六、总结与作业

通过今天的侦察，我们在 Libvio 上应该会有如下发现（仅作假设，具体以实际为准）：

视频链接不在 HTML 里。
在 XHR 里有一个请求返回了一串奇怪的字符。
通过 Call Stack，我们定位到了生成这串字符的 JS 文件位置。

这就是逆向工程的入口。

🛠️ 课后作业 (Homework)

打开 Libvio 或任意视频网站。
使用 Network 面板找到加载视频列表的 API 接口。
尝试使用 XHR Breakpoint 拦截这个 API 请求。
查看 Call Stack，尝试找到发起请求的那行 JS 代码。

下期预告：

找到了 JS 代码，但全是 var _0x2b3c = ... 这种看不懂的乱码（混淆代码）怎么办？

下一篇，我们将深入敌后，讲解 JS 逆向的核心------断点调试、Scope 作用域分析与扣代码实战。

下期主题：
《Ep.03 庖丁解牛：读懂混淆 JS 与 Scope 作用域分析》

别忘了点赞关注，我们下期见！

侦察兵的艺术：能够看见的秘密与 Network 面板深度解析