爬虫流程

选择目标网站

分析网站结构

• 谷歌查看网页结构，确定产品信息在 HTML 中的结构。例如，假设产品信息在 class="item" 的元素中，标题在 class="title" 的子元素中，价格在 class="price" 的子元素中
• Elements（元素面板）：使用 “元素” 面板可以通过自由操纵 DOM 和 CSS 来重演您网站的布局和设计。
• Console（控制台面板）：在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell，在页面上与 JavaScript 交互
• Sources（源代码面板）：在源代码面板中设置断点来调试 JavaScript ，或者通过 Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器
• Network（网络面板）：从发起网页页面请求 Request 后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），并可以根据这个进行网络性能优化
• Performance（性能面板）：使用时间轴面板，可以通过记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能
• Memory（内存面板）：分析 web 应用或者页面的执行时间以及内存使用情况
• Application（应用面板）：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等
• Security（安全面板）：使用安全面板调试混合内容问题，证书问题等等
• Audits（审核面板）：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的 CSS 文件等

network

定义：Network 面板记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头和 Cookie

• Controls（控件） 使用这些选项可以控制 Network(网络) 面板的外观和功能

• Filters（过滤器）

使用这些选项可以控制在请求列表中显示哪些资源

提示：按住Ctrl（Window / Linux），然后点击过滤器可以同时选择多个过滤器

此外，筛选框可以实现很多定制化的筛选，比如字符串匹配，关键词筛选等，其中关键词筛选主要有如下几种：

• domain：仅显示来自指定域的资源。您可以使用通配符（）来包括多个域。例如，.com 显示以. com 结尾的所有域名中的资源。 DevTools 会在自动完成下拉菜单中自动填充它遇到的所有域。
• has-response-header：显示包含指定 HTTP 响应头信息的资源。 DevTools 会在自动完成下拉菜单中自动填充它遇到的所有响应头。
• is：通过 is:running 找出 WebSocket 请求。
• larger-than(大于) ：显示大于指定大小的资源（以字节为单位）。设置值 1000 等效于设置值 1k。
• method(方法) ：显示通过指定的 HTTP 方法类型检索的资源。DevTools 使用它遇到的所有 HTTP 方法填充下拉列表。
• mime-type（mime类型：显示指定 MIME 类型的资源。 DevTools 使用它遇到的所有 MIME 类型填充下拉列表。
• mixed-content（混合内容：显示所有混合内容资源（mixed-content:all）或仅显示当前显示的内容（mixed-content:displayed）。
• Scheme（协议）：显示通过不受保护的 HTTP（scheme:http）或受保护的 HTTPS（scheme:https）检索的资源。
• set-cookie-domain（cookie域）：显示具有 Set-Cookie 头, 并且其 Domain 属性与指定值匹配的资源。DevTools 会在自动完成下拉菜单中自动填充它遇到的所有 Cookie 域。
• set-cookie-name（cookie名）：显示具有 Set-Cookie 头, 并且名称与指定值匹配的资源。DevTools 会在自动完成下拉菜单中自动填充它遇到的所有 Cookie 名。
• set-cookie-value（cookie值）：显示具有 Set-Cookie 头, 并且值与指定值匹配的资源。DevTools 会在自动完成下拉菜单中自动填充它遇到的所有 cookie 值。
• status-code（状态码）：仅显示其 HTTP 状态代码与指定代码匹配的资源。DevTools 会在自动完成下拉菜单中自动填充它遇到的所有状态码。

通过域名筛选资源

• 用法：domain:example.com
• 示例：仅显示来自 example.com 域的资源。
• 操作：在过滤框中输入 domain:example.com。

通过响应头筛选资源

• 用法：has-response-header:Content-Type
• 示例：显示包含 Content-Type 响应头的资源。
• 操作：在过滤框中输入 has-response-header:Content-Type。

通过 WebSocket 状态筛选资源

• 用法：is:running
• 示例：找出正在运行的 WebSocket 请求。
• 操作：在过滤框中输入 is:running。

通过资源大小筛选资源

• 用法：larger-than:1000
• 示例：显示大于 1000 字节的资源。
• 操作：在过滤框中输入 larger-than:1000。

通过 HTTP 方法类型筛选资源

• 用法：method:GET
• 示例：显示所有使用 GET 方法的请求。
• 操作：在过滤框中输入 method:GET。

通过 MIME 类型筛选资源

• 用法：mime-type:image/png
• 示例：显示所有 image/png 类型的资源。
• 操作：在过滤框中输入 mime-type:image/png。

通过混合内容筛选资源

• 用法：mixed-content:all 或 mixed-content:displayed
• 示例：显示所有混合内容资源。
• 操作：在过滤框中输入 mixed-content:all。

通过协议筛选资源

• 用法：scheme:https
• 示例：显示所有通过 HTTPS 协议检索的资源。
• 操作：在过滤框中输入 scheme:https。

通过 Cookie 域筛选资源

• 用法：set-cookie-domain:example.com
• 示例：显示具有 Set-Cookie 头并且 Domain 属性为 example.com 的资源。
• 操作：在过滤框中输入 set-cookie-domain:example.com。

通过 Cookie 名筛选资源

• 用法：set-cookie-name:session_id
• 示例：显示具有 Set-Cookie 头并且 Name 为 session_id 的资源。
• 操作：在过滤框中输入 set-cookie-name:session_id。

通过 Cookie 值筛选资源

• 用法：set-cookie-value:abc123
• 示例：显示具有 Set-Cookie 头并且 Value 为 abc123 的资源。
• 操作：在过滤框中输入 set-cookie-value:abc123。

通过状态码筛选资源

• 用法：status-code:404
• 示例：显示所有 HTTP 状态码为 404 的资源。
• 操作：在过滤框中输入 status-code:404。

示例操作

假设你想查看当前页面中所有使用 POST 方法并且响应头中包含 Content-Type 的请求，你可以在过滤框中输入以下内容：

method:POST has-response-header:Content-Type

这样，你会看到符合这些条件的所有资源。

• Overview（概览）

这个图表显示检索资源的时间轴。如果您看到多个垂直堆叠的栏，这意味着这些资源被同时检索。

• Requests Table（请求列表）

此列表列出了检索的每个资源。默认情况下，此表按时间顺序排序，也就是最早的资源在顶部。单击资源名称可以获得更多信息。提示：右键单击列表的任何标题栏可以以添加或删除信息列。

查看单个资源的详细信息

点击资源名称（位于 Requests Table 的 Name 列下）可以查看与该资源有关的更多信息。

可用标签会因您所选择资源类型的不同而不同，但下面四个标签最常见：

• **[Headers](https://link.zhihu.com/?target=https%3A//static.dcxueyuan.com/content/disk/train/other/27973d34-2af3-481d-9a97-8850a177d266.html%23jump1)**：与资源关联的 HTTP 标头。
• **[Preview](https://link.zhihu.com/?target=https%3A//static.dcxueyuan.com/content/disk/train/other/27973d34-2af3-481d-9a97-8850a177d266.html%23jump2)**：JSON、图像和文本资源的预览。
• **[Response](https://link.zhihu.com/?target=https%3A//static.dcxueyuan.com/content/disk/train/other/27973d34-2af3-481d-9a97-8850a177d266.html%23jump3)**：HTTP 响应数据（如果存在）。
• Timing：资源请求生命周期的精细分解。

Headers（查看 HTTP 标头） 点击 Headers 可以显示该资源的标头。 Headers 标签可以显示资源的请求网址、HTTP 方法以及响应状态代码。 此外，该标签还会列出 HTTP 响应和请求标头、它们的值以及任何查询字符串参数

点击 Preview 标签可以查看该资源的预览。Preview 标签可能显示一些有用的信息，也可能不显示，具体取决于您所选择资源的类型

• Response（查看 HTTP 响应内容）
  点击 Response 标签可以查看资源未格式化的 HTTP 响应内容

• 查看 Cookie
  点击 Cookies 标签可以查看在资源的 HTTP 请求和响应标头中传输的 Cookie 表。 只有传输 Cookie 时，此标签才可用。
  下面是 Cookie 表中每一列的说明：

• Name：Cookie 的名称。
• Value：Cookie 的值。
• Domain：Cookie 所属的域。
• Path：Cookie 来源的网址路径。
• Expires / Max-Age：Cookie 的 expires 或 max-age 属性的值。
• Size：Cookie 的大小（以字节为单位）。
• HTTP：指示 Cookie 应仅由浏览器在 HTTP 请求中设置，而无法通过 JavaScript 访问。
• Secure：如果存在此属性，则指示 Cookie 应仅通过安全连接传输。
• priority：网站加载的优先级。

优先级级别

1. Highest：
   • 描述：最高优先级。
   • 典型用例：关键的资源，如 HTML 文档和需要立即渲染的 CSS 文件。它们对页面的初始加载时间至关重要。
   • 处理方式：浏览器会优先加载这些资源，以确保页面能够尽快呈现给用户。
2. High：
   • 描述：高优先级。
   • 典型用例：重要的脚本文件和重要的 CSS 文件，这些资源虽然不是立即需要，但对页面的功能和样式非常重要。
   • 处理方式：这些资源会在关键资源之后立即加载，确保页面功能和样式尽快可用。
3. Medium：
   • 描述：中等优先级。
   • 典型用例：非关键但仍然重要的资源，如一些图片和次要脚本文件。
   • 处理方式：浏览器会在高优先级资源加载完毕后加载这些资源，以确保页面的完整性。
4. Low：
   • 描述：低优先级。
   • 典型用例：次要资源，如一些不立即需要的图片、脚本文件和广告。
   • 处理方式：这些资源会在所有较高优先级的资源加载完毕后再加载，以减少对页面主要功能的影响。
5. Lowest：
   • 描述：最低优先级。
   • 典型用例：不重要的资源，如延迟加载的图片和低优先级的广告内容。
   • 处理方式：浏览器会在其它所有资源都加载完毕后再加载这些资源，以尽可能减少对用户体验的影响。

• 复制、保存和清除网络信息

• 右键单击**Requests Table（请求列表**）以复制、保存或删除网络信息。一些选项是上下文相关的，所以如果想在单个资源上操作，需要右键单击该资源行。下面的列表描述了每个选项
• Copy Response（复制响应）
  将所选资源的 HTTP 响应复制到系统剪贴板。
• Copy as cURL（复制为cURL） 将所选资源的网络请求作为 cURL 命令字符串复制到系统剪贴板。 请参阅将复制请求为 cURL 命令。
  curl命令是一个利用URL规则在命令行下工作的文件传输工具。它支持文件的上传和下载，所以是综合传输工具，但按传统，习惯称curl为下载工具。作为一款强力工具，curl支持包括HTTP、HTTPS、ftp等众多协议，还支持POST、cookies、认证、从指定偏移处下载部分文件、用户代理字符串、限速、文件大小、进度条等特征。做网页处理流程和数据检索自动化，curl可以祝一臂之力。l
• Copy All as HAR（全部复制为HAR）
  将所有资源复制到系统剪贴板作为 HAR 数据。 HAR 文件包含描述网络 “瀑布” 的 JSON 数据结构。一些第三方工具可以使用 HAR 文件中的数据重建网络瀑布。有关详细信息，请参阅 Web 性能强大工具：HTTP 归档（HAR）。
• Save as HAR with Content（另存为带内容的HAR）
  将所有网络数据与每个页面资源一起保存到 HAR 文件中。 二进制资源（包括图像）被编码为 Base64 编码文本。
• Clear Browser Cache（清除浏览器缓存）
  清除浏览器高速缓存。提示：您也可以从 Network Conditions(网络条件) 抽屉式窗格中启用或禁用浏览器缓存。
• Clear Browser Cookies（清除浏览器Cookie）
  清除浏览器的 Cookie。
• Open in Sources Panel（在源文件面板中打开）
  在 Sources(源文件) 面板中打开选定的资源。
• Open Link in New Tab（在新标签页中打开链接）
  在新标签页中打开所选资源。您还可以在 Requests Table(请求列表) 中双击资源名称。
• Copy Link Address（复制链接地址）
  将资源 URL 复制到系统剪贴板。
• Save（保存）
  保存所选的文本资源。仅显示在文本资源上。
• Replay XHR（重新发送XHR）
  重新发送所选的 XMLHTTPRequest。仅显示在 XHR 资源上。

• 查看资源发起者和依赖关系

• 按住SHIFT并移动鼠标到资源上可查看它的发起者和依赖关系。

• 这部分是你鼠标悬停的资源的 TARGET(目标) 引用。

• 从 TARGET(目标) 往上查找，第一个颜色编码为绿色的资源是 TARGET(目标) 的发起者。

• 如果存在第二个颜色编码为绿色资源，那么这个是发起者的发起者。

• 从 TARGET(目标) 向下查找，任何颜色编码为红色的资源都是 TARGET 的依赖。

• 异步加载的抓包一般在 XHR，JS 中

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人类阅读和编写，同时也易于机器解析和生成。JSON 通常用于在客户端和服务器之间传输数据。它的语法基于 JavaScript 对象表示法，但它独立于任何编程语言。

JSON 的基本语法

JSON 的数据结构是由两种结构组成的：

1. 对象（Object）：由花括号 {} 包围，包含零个或多个键值对（key-value pairs）。
2. 数组（Array）：由方括号 [] 包围，包含零个或多个值（values）。

例子

以下是一个简单的 JSON 对象和数组的例子：

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "zip": "10001"
  },
  "phoneNumbers": ["123-456-7890", "987-654-3210"]
}

JSON 数据类型

• 字符串（String）：必须用双引号包围。例："Hello"
• 数值（Number）：整数或浮点数，不需要引号。例：25, 3.14
• 布尔值（Boolean）：true 或 false。
• 数组（Array）：由方括号包围，包含一个有序的值列表。例：[1, 2, "three", true]
• 对象（Object）：由花括号包围，包含键值对。例：{"key": "value"}
• null：表示空值。例：null

JSON 使用示例

在 Python 中使用 JSON

Python 提供了 json 模块来处理 JSON 数据。以下是一些常见操作：

1. 将 JSON 字符串解析为 Python 对象：

import json

json_str = '{"name": "John", "age": 30}'
data = json.loads(json_str)
print(data)  # 输出：{'name': 'John', 'age': 30}

2. 将 Python 对象编码为 JSON 字符串：

import json

data = {
    "name": "John",
    "age": 30,
    "isStudent": False,
    "address": {
        "street": "123 Main St",
        "city": "New York",
        "zip": "10001"
    },
    "phoneNumbers": ["123-456-7890", "987-654-3210"]
}

json_str = json.dumps(data, indent=4)
print(json_str)

3. 读取 JSON 文件：

import json

with open('data.json', 'r') as file:
    data = json.load(file)
print(data)

4. 写入 JSON 文件：

import json

data = {
    "name": "John",
    "age": 30
}

with open('data.json', 'w') as file:
    json.dump(data, file, indent=4)

JSON 的优点

• 简洁和清晰：JSON 格式简单易读，适合人类阅读和书写。
• 轻量级：JSON 数据格式轻便，适合网络传输。
• 广泛支持：大多数编程语言都提供了处理 JSON 的库或模块。

JSON 是目前网络数据交换的主要格式之一，广泛应用于 Web 开发、API 通信、配置文件等多个领域。

定位元素方法

• 定位原始 xpath, 在 Elements 中点击箭头，定位指定的元素
• 在定位元素的指定位置，鼠标右键弹出菜单选择框，选择 Copy 显示对应的元素定位方法。
  点击：Copy Xpath，复制元素路径：//*[@id="kw"]

通过浏览器进行调试元素

80% 的元素通过 F12 可以定位出来，20% 的元素通过 12 很难定位准确，要花费 80% 时间进行调试，如果在脚本中调试比较慢的一遍遍运行非常耗时，怎么能够在浏览器中较快提高调试的 xpath 定位速度呢？
可以使用如下的方法：

1. 使用快捷查询功能，在 Chrome 浏览器中：Ctrl+F 调出查询功能。
   在下面的输入框，输入刚才的 Xpath=//*[@id="kw"] 路径可以高亮在界面展示对应的元素。

2. 通过 console 定位元素，选择 console 输入 $ 显示对应的值信息。

3.xpath 定位：

• $() 返回与指定的 CSS 选择器相匹配的第一个元素，等同于 document.querySelector()

• $$() 返回与指定的 CSS 选择器相匹配的所有元素的数组，等同于 document.querySelectorAll()

• $x() 返回与指定的 XPath 相匹配的所有元素的数组

• 语法格式：$x(xpath) 表达

发送请求

• 使用 requests.get(url) 发送 HTTP GET 请求，获取网页内容。