开发者工具在爬虫开发中的应用与面板功能详解

程序小武
113 阅读11分钟

为什么要学习开发者工具？

  1. 定位数据：通过 Elements 面板，快速查看网页的 HTML 结构，定位到爬取的数据所在位置，避免盲目爬取无关数据。
  2. 识别 API 请求：在 Network 面板中，你可以捕获和分析页面请求，识别后端 API，直接获取 JSON 或其他格式的数据，减少爬虫的复杂度。
  3. 模拟请求：通过复制浏览器请求头，模拟浏览器的请求，确保爬虫请求与正常浏览器请求一致，避免被反爬机制检测到。
  4. 处理动态加载：通过分析 JavaScript 动态加载的数据，找到合适的接口，模拟发送请求，确保爬虫可以抓取所有需要的数据。

大部分时间都花费在开发者工具上面，比如分析页面源代码、捕获 API 请求、模拟浏览器请求、根据网页编写提取语法，这个过程相当于根据证人的描述，画出犯罪嫌疑人的画像

一、什么是抓包？

抓包（Packet Sniffing）指的是通过网络分析工具捕获通过计算机网络传输的数据包，从中提取信息。对于爬虫开发者来说，抓包是调试和分析目标网页如何与浏览器通信、获取数据的好方法。

常用的抓包工具：

  1. Wireshark：这是最流行的抓包工具，能够详细地分析网络数据包，适合复杂的网络分析。
  2. Fiddler：主要用于 HTTP/HTTPS 请求和响应的抓取，常用于 Web 开发调试。
  3. Charles Proxy：类似于 Fiddler，也是一款 Web 调试工具，用于查看 HTTP 和 HTTPS 流量。
  4. 浏览器开发者工具：现代浏览器（如 Chrome、Firefox）的开发者工具提供了强大的抓包功能，适合快速查看请求。

在网页抓包最常用为浏览器的开发者模式

二、浏览器开发者工具面板的认识

浏览器开发者工具面板是一个非常强大的工具，主要用于调试和优化网页内容，下面是一些常见的开发者工具面板内容：

1. 打开浏览器开发者工具(谷歌浏览器举例)

  • 快捷键: 按下 F12 或 Ctrl + Shift + I
  • 右键菜单: 在网页上右击，选择“检查”（Inspect）或者“检查元素”

image.png

  • 菜单: 点击浏览器右上角的三点菜单，选择“更多工具” > “开发者工具”（More Tools > Developer Tools）

image.png

2. Elements（元素）

  • 这个面板让你可以查看网页的 HTML 结构和 CSS 样式。你可以直接编辑 HTML 或 CSS，实时看到变化效果，适合调试页面布局和样式，鼠标放到标签上面也可以看到页面显示标签名字以及尺寸

image.png

  • 最左边那个箭头按钮，可以对需要的内容使用鼠标进行标签的定位

image.游ng

  • 手机图标用于移动端预览调试，模拟网站在手机或iPad上的显示效果，支持自定义尺寸或选择官方机型（如苹果12Pro）：

image.png

3. Console（控制台）

  • 控制台用于显示 JavaScript 错误、警告、日志和调试信息。你可以直接在控制台中输入 JavaScript 代码进行调试，也可以查看网页加载过程中可能遇到的任何错误。

image.png

也可以进行编写JavaScript代码

4. Sources（源代码）

  • 作用：Sources 面板允许开发者查看和调试网页中的源代码，尤其是 JavaScript 文件。你可以查看网页加载的所有脚本文件，包括内联脚本和外部脚本文件。

爬虫的话绝大多数js逆向才会用到

5. Network（网络）最常用

网络面板显示了网页在加载过程中请求的所有资源（如图片、脚本、样式表等）。可以查看每个请求的状态、响应时间和返回的数据，优化页面加载速度或发现潜在的网络问题。以下是一些常用按钮和它们的功能：

可以参考此图理解一些基础的功能使用 257383836937f4aa254021234d8aa16.png

  • 筛选请求选项卡（Tabs）

    • 作用：分不同选项卡显示不同类型的网络请求和响应信息。

      • 包括以下选项卡：

        • All：显示所有网络请求。
        • XHR：显示 XMLHttpRequest 或 Fetch 请求（通常是AJAX请求）。
        • JS：显示 JavaScript 文件请求。
        • CSS：显示样式表文件请求。
        • Img：显示图片资源请求。
        • Font：显示字体资源请求。
        • 媒体：显示音视频等媒体资源请求。
        • 字体：显示字体资源请求。
        • 文档：显示HTML文档资源请求。
        • ws：显示 WebSocket 请求和响应。
        • wsam：显示 WebAssembly 模块的请求。
        • 清单：显示 Web 应用的清单文件请求。
        • 其他：显示所有其他不属于常规分类的请求。

  • 筛选(搜索)框（Search Box）

    • 作用：搜索网络请求中与输入关键字相关的项。

    • 功能：输入特定关键字，快速定位到相关的网络请求和响应。

    • 其他功能：可以区分大小写、可以使用正则表达式搜索，例如搜索Example

6f0c9cccc1ccc3c7bcbf2569dd7edf3.png

一般可以搜索到网址、请求标头、响应标头、以及响应内容

  • . 请求详细信息（Request Details）

    • 作用：查看每个请求的详细信息。

    • 功能：点击某个请求，可以查看请求的详细信息，包括请求头、响应头、请求体、响应体、响应时间等。

    • 大概预览：可以显示这个请求的名字、请求响应码、协议、类型等，也可以右键这个菜单面板添加需要的功能，点击一下即可添加

image.png

  • 查看详细请求信息，鼠标单击资源即可

image.png

功能说明
请求的网址显示请求的完整 URL，包括协议、域名、路径和查询参数等。
请求方法显示请求的 HTTP 方法，如 GET、POST、PUT、DELETE 等。
状态代码显示响应状态码，如 200（成功）、404（未找到）、500（服务器错误）等。
远程代码显示请求目标服务器的 IP 地址和端口号。
引荐来源网址政策显示请求的引荐来源策略，控制请求中是否包含来源信息。
响应标头显示响应头信息，如 Content-Type、Cache-Control、Server、Set-Cookie 等。
请求标头显示请求头信息，如 User-Agent、Accept、Authorization、Cookies 等。

请求头和响应头的区别

区别请求头（Request Headers）响应头（Response Headers）
作用请求头由客户端发出，包含请求的信息，如浏览器类型、编码、语言等。响应头由服务器返回，包含服务器如何处理请求的信息，如内容类型、缓存策略等。
位置位于 HTTP 请求的开始部分，随请求一起发送给服务器。位于 HTTP 响应的开始部分，随响应一起发送给客户端。
常见字段Accept、User-Agent、Authorization、Cookie 等Content-Type、Cache-Control、Set-Cookie、Server 等
Cookies用来保持用户登录状态，防止用户在每次请求时重新登录用户在登录后，服务器会返回一个 Cookie 用于后续请求的身份验证

请求头常见字段解析

Header作用示例值
Accept指定客户端能够处理的响应内容类型，告诉服务器客户端期望的内容类型。text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8
Accept-Encoding指定客户端支持的内容编码方式，通常用于压缩传输。gzip, deflate, br
Accept-Language指定客户端支持的语言种类，服务器根据此字段决定返回哪种语言的内容。zh-CN,zh;q=0.9
Cache-Control控制缓存策略，告诉服务器不缓存或缓存响应。no-cache
Pragma向服务器请求无缓存响应，通常与 Cache-Control 配合使用。no-cache
User-Agent客户端浏览器信息，包含操作系统、浏览器类型等，用于告知服务器客户端的环境。Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.3

响应头常见字段解析

Header作用示例值
Content-Type表示返回内容的 MIME 类型，告知客户端如何解析响应体。text/html; charset=UTF-8
Cache-Control控制响应的缓存机制，指定缓存策略。no-store, no-cache, must-revalidate
Set-Cookie设置客户端 Cookies，用于会话管理、用户追踪等。sessionid=abc123; Path=/; HttpOnly
Server指示响应的服务器信息，通常用于显示服务器软件类型。nginx/1.21.0
WWW-Authenticate服务器返回的认证信息，用于要求客户端进行认证。Basic realm="Example"

这些请求头和响应头帮助客户端和服务器进行有效的通信，确保数据传输的顺利进行，并且根据具体的需求（如语言、缓存、认证等）做出适当的响应。

虽然大多数与 登录相关的 cookie 是会话 cookie 或用于存储登录信息的 cookie，但很多其他类型的 cookie 并不依赖于用户是否登录。比如，用户浏览行为、广告定向、网站分析等 cookie 都可以在没有登录的情况下存在。所以，可以说 cookie 是一种广泛使用的技术，不仅限于 登录 状态

6. Performance（性能）不常用

该面板用于分析页面的性能，包括页面加载时间、资源使用情况等。你可以记录页面的运行情况，查看脚本的执行时间，找到性能瓶颈。

7. Application（应用）

这个面板提供关于网站存储的详细信息，包括 cookies、localStorage、sessionStorage、缓存等。你可以查看和清除存储的数据，帮助你调试状态管理和数据存储问题。

image.png

Cookies 中的信息

字段说明示例值
NameCookie 的名称。PHPSESSID
ValueCookie 的值，通常是加密的字符串或会话标识符。58bc1741a0f6d3871a3dfc6826e9c404
Domain设置该 cookie 的域名，限制它的可访问范围。.example.com
PathCookie 的路径，表示 cookie 只对该路径下的请求有效。/shop/
Expires/Max-AgeCookie 的过期时间或存活时长。超过此时间，cookie 会失效。2025-12-31T23:59:59 或 3600（即 1 小时）
SizeCookie 的大小（字节数）。45  表示45个字节的大小
HttpOnly如果为 true，则表示该 cookie 不能通过 JavaScript 访问，增加安全性。true
Secure如果为 true或者✔，表示该 cookie 只会在 HTTPS 请求中发送。true
SameSite控制跨站请求时是否发送该 cookie。可以是 Strict、Lax 或 None。Lax
Session如果为 true，则表示该 cookie 是会话 cookie，会在会话结束时被删除。true

清除 Cookies 解除登录状态

要清除特定 cookie，可以在 Application 面板的 Cookies 部分执行以下操作：

  1. 在 Cookies 下选择域名，例如 www.baidu.com。

  2. 你将看到该域名下的所有 cookies。

  3. 右键点击一个或多个 cookies，然后选择 Delete（删除），或者使用 按钮清除所有 cookies。

    • 删除与登录相关的 cookie（如 BDUSS）通常会导致用户注销，需要重新登录。

    • 删除会话 cookie（如 BD_CK_SAM）会在当前会话结束时迫使用户退出。

b9d18f8924043f443aeebb8176c2345.png

虽然大多数与 登录相关的 cookie 是会话 cookie 或用于存储登录信息的 cookie，但很多其他类型的 cookie 并不依赖于用户是否登录。比如，用户浏览行为、广告定向、网站分析等 cookie 都可以在没有登录的情况下存在。所以，可以说 cookie 是一种广泛使用的技术，不仅限于 登录 状态

8. Security（安全）不常用

安全面板可以查看当前网页的安全状态，包括 HTTPS 是否被正确使用，以及网站是否存在安全漏洞（例如证书问题）。

image.png

9. Lighthouse 不常用

Lighthouse 是一个自动化的工具，用于提高网页质量。它会分析网页的各项指标，包括性能、可访问性、SEO 等，并给出改进建议。

点击分析网页加载情况

image.png

给出网页分析报告

image.png

三、总结 结了开发者工具在爬虫开发中的核心作用和具体使用，主要内容如下：

  1. 学习开发者工具的重要性：开发者工具帮助定位数据、识别API请求、模拟浏览器请求及处理动态加载数据，提升爬虫的精准性与效率。
  2. 抓包与常用工具：抓包是捕获并分析数据包的重要手段，常用工具有Wireshark、Fiddler、Charles和浏览器开发者工具。
  3. 浏览器开发者工具面板详解：包括Elements、Console、Sources、Network等核心面板功能，尤其是Network面板，在爬虫开发中至关重要。

总之，开发者工具是爬虫开发的核心辅助工具，通过其强大功能可高效地进行数据定位、接口分析和请求模拟，显著提升开发效率。

avatar
文章
阅读
粉丝