浏览器开发者工具使用

开发者工具（DevTools）是浏览器自带的调试工具。写爬虫程序前，先用它观察"浏览器和服务器之间传输了什么数据"，是我们分析网页的第一步。本节以 Chrome 浏览器 + 百度首页 为例，演示如何打开开发者工具并查看网络请求。

一、打开开发者工具

第1步 ：打开 Chrome 浏览器，访问 https://www.baidu.com/。

第2步 ：按下键盘上的 F12 键，页面右侧会弹出开发者工具面板。

⚠️ 部分笔记本电脑上 F12 键默认是功能键，如果按了没反应，请尝试 Fn + F12 组合键。

如果 F12 无效，也可以通过菜单打开：

第1步 ：点击浏览器 右上角的"三个点" 按钮（自定义及控制菜单）。

第2步 ：在弹出的菜单中，依次选择 更多工具 → 开发者工具，即可打开开发者工具面板。

💡 首次打开时顶部可能提示 DevTools is now available in Chinese，可以点击 Switch DevTools to Chinese 把面板切换成中文显示，或点击 Don't show again 关闭该提示，不影响使用。

第1步 ：在开发者工具顶部的一排选项卡中，点击 Network（网络）（图中 ①）。

第2步 ：确认左侧的 录制按钮（圆点图标）处于红色高亮状态（图中 ②），红色表示"正在录制网络活动"。

第3步 ：此时 Network 面板是空的（提示 Currently recording network activity）。点击 浏览器左上角的刷新按钮 （图中 ③），或直接按 F5 / Ctrl + R 重新加载页面。

💡 为什么要刷新？开发者工具只能记录"打开之后"发生的网络请求。页面早就加载完了，所以要先刷新一次，让工具把整个加载过程的请求都录下来。

刷新后，Network 面板中会出现一 列表格 ，每一行就是浏览器向服务器发送的一次请求（www.baidu.com、图片、css、js 文件等）。

第1步 ：点击列表第一行 www.baidu.com（图中 ①），这是请求百度首页主文档的记录。

第2步 ：在右侧详情区点击 Headers（标头）选项卡（图中 ②），即可查看这次请求的详细信息。

General（基本信息）：

字段	截图中的值	含义
Request URL	`https://www.baidu.com/`	请求地址，浏览器向哪里发送了请求
Request Method	`GET`	请求方式（常见的是 GET 和 POST）
Status Code	`200 OK`	状态码。200 表示请求成功，其余常见值：404 找不到页面、403 被拒绝、500 服务器出错
Remote Address	`110.242.70.57:443`	服务器 IP 地址和端口

Request Headers（请求头）------浏览器发给服务器的"自我介绍"，爬虫程序中经常需要伪造这些内容：

请求头	含义
Accept	浏览器能接收的文件类型
Accept-Encoding	支持的压缩格式（gzip、deflate、br、zstd）
Accept-Language	接收的语言（zh-CN 表示中文）
Cache-Control	缓存策略
Connection	连接类型，keep-alive 表示保持长连接
Cookie	保存在本地的用户信息（如登录状态），爬虫中最常用的请求头

📌 后续编写爬虫时，最基本的一步就是把这里的 Request URL、Request Method 和 User-Agent、Cookie 等请求头信息，用 Python 的 requests 库模拟出来，从而获取和浏览器一样的数据。