爬虫工程师必须掌握的 Web 网站调试与抓包分析

ゝ一世哀愁。 2022-09-17 01:51 55阅读 0赞

### 目录 ###

*  1、Chrome 开发者工具
 *   *  Elements 面板
     *  Console 面板
     *  Sources 面板
     *  Network 面板
     *  Application 面板
 *  2、JS 逆向调试技巧
 *   *  善用搜索
     *  查看请求调用堆栈
     *  XHR 请求断点
     *  Console 插桩
     *  堆内存函数调用
     *  复制Console面板输出
 *  3、本地覆盖
 *   *  Chrome local override
     *  Fiddler 自动响应

# 1、Chrome 开发者工具 #

Google Chrome 浏览器中内置了一套强大的开发者工具，无论是做源码分析还是 JS 脚本的调试都是比较方便的。要进行抓包或者调试前端的加密脚本，和控制台的交互必不可少。不少做了安全防护的网站都会禁止用户打开 Chrome 开发者工具，下面总结所有 Chrome 控制台的打开方法。

1.  按 F12 键。
2.  按 Ctrl + Shift + I 键。
3.  右击网页页面，出现菜单后，单击检查菜单项。如下图所示：  
    ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_11_color_FFFFFF_t_70_g_se_x_16][]
4.  在浏览器中，单击自定义及控制 Google Chrome ⇒ 更多工具 ⇒ 开发者工具选项。如下图所示：  
    ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16][]
5.  在浏览器中新建窗口，使用上述任意方法打开开发者工具，再切换回要调试的页面。

## Elements 面板 ##

Elements(元素) 面板，左侧显示页面源码的 DOM 树，可以在这里对页面源代码进行增、删、改、查等操作，右侧展示被选中页面节点的层叠样式表 (Cascading Style Sheets, CSS)，它主要是用来对页面进行修饰美化。**值得注意的是，左侧显示的页面源代码并非原始代码，而是和 HTML、CSS与 JS 结合的结果。** 获取原始网页源代码，有以下两种方式：

1.  右击任意网页页面空白处，单击查看网页源代码菜单项，或者按 Ctrl + U 组合键，如下图所示：  
    ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_11_color_FFFFFF_t_70_g_se_x_16 1][]
2.  切换到 Sources 面板，选择左栏中包含网页地址的 HTML 文件。如下图所示：  
    ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

如果想要隐藏网页中展示的节点，如一些容易误触的广告，只需要选中 Elements 面板中对应的代码节点后，按 H 键(也可以右键单击需要隐藏的节点，然后选择 Hide element)。日常开发中使用的组合键，如 Ctrl + C 键和 Ctrl + V 键等，也都可以在 Elements 面板中使用。也就是说，在 Elements 面板中可以对网页进行自由调整和编辑。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 2]

在日常的爬虫开发中，需要与源代码打交道的地方大多数是页面元素的定位。Chrome 开发者工具内置了一套定位工具，只需要在 Elements 面板中按 Ctrl + F 键，就会在源代码下方出现如下图所示的调试框，可以在其中编写 CSS 选择器语法或 Xpath 语法，实时地对页面节点进行定位。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
如果要快速复制页面节点的路径，可以点击要定位的节点，再单击 Copy 菜单项，其中有多种可供选择的网页页面定位语法，如下图所示：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
笔者其实不大喜欢这种方式，虽说从一定时间上能提升开发的效率，但更多时候其实也是需要自己修改的, 所以笔者更偏向自己写 Xpath 规则(更相信自己)。

此外，**断点操作是进行代码调试和分析时的必要操作。** 在 Elements 面板中可以进行 DOM 断点分析，右击页面任意节点，会发现 Break on 菜单项中有以下三种断点：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
subtree modifications：在节点子树发生修改时断点。attribute modifications：在节点属性发生修改时断点。node removal：在节点被移除时发生断点。更具体的断点操作将在后续进行说明。

## Console 面板 ##

Console 面板是与网页进行交互的控制台窗口，它用于显示 DOM 对象信息和调试 JS 代码，熟练使用它将会大大提升开发速度。在 Console 面板中操作节点时，通常需要先定位到页面节点，才可以进行节点操作。输入 `$0` 可以对当前选中的页面节点进行引用，输入 `$1` 可以对上一次选择的节点进行引用，以此类推，输入可以一直回溯到 `$4`。也可以使用 CSS 选择器语法对节点进行操作。复制需要定位的网页节点的 selector 路径后，使用 document. querySelector 或者 `$` 方法可以定位第一个符合语法的节点。如果要选择所有符合 CSS 选择器语法的节点，可以使用 document.querySelectorAll 或者 `$` `$` 方法返回一个符合语法的节点数组。Console 面板中提供了多种方法来观察和检查事件监听器，常用的方法：monitorEvents()：监听目标事件信息。unmonitorEvents()：停止监听。getEventListeners()：获取 DOM 节点的监听器。monitorEvents() 的第一个参数是要监听事件的对象，第二个参数是要监听的事件字符串或者字符串数组。以监听 CSDN 首页的“搜索”按钮为例，代码如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
只要没有取消对目标节点的事件监听，在每次和页面交互时，控制台都输出监听信息。要停止监听事件，需要使用 unmonitorEvents() 方法，参数是要停止事件监听的页面节点，例如：

unmonitorEvents(searchBtn);

getEventListeners() 方法的参数是网页页面节点，它返回在节点上注册事件的监听器，其中会包含每个已经注册事件类型的数组。例如，以下代码会监听“搜索” 按钮已注册事件的监听器。

getEventListeners(searchBtn);

如果要查看 DOM 节点上注册的事件监听器，则需要到 Elements 面板中查看 EventListeners 选项卡，它会显示附加到页面上的所有事件，如下图所示：  
![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

## Sources 面板 ##

Sources 面板是我们必须掌握的面板，对 JS 加密脚本的断点调试与代码分析主要从这里出发。如一个网页对登录参数做了加密，可以在加密 JS 脚本处设置断点，这样就可以跟进查看加密函数了。

**1. 设置断点。** 设置断点最基本的方法是在代码的行序列号上手动添加，也可以将其设置为在满足某些条件下才会触发断点。一旦在某一代码行上设置了断点，网页在加载到这一行代码时就会全局暂停，直到断点删除。要在特定的代码行上设置断点，需要打开 Source 面板，并在 File Navigator 窗口中选择要分析的脚本文件，在源代码的左侧可以看到行序列号，单击行序列号就会在这一行代码上添加断点，如下图所示：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 8]  
如果一个表达式占据了多行，这时把一个断点设置在表达式中间，那么断点会被自动调整到下一个表达式上。如下图所示，在代码第684行设置断点，断点会自动调整到第692行。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 9]  
条件断点只有在输人表达式为 true 时，才会被触发暂停。如图所示，右击行序列号，单击 Add conditional breakpoint 菜单项可以创建一个条件断点。  
![在这里插入图片描述][a4d66b54049a4ddc98addef7eb9ff8f4.png]  
调试者在代码中添加的所有断点都会被记录在右侧的 Breakpoints 栏中。如果要删除一个断点，除了再次单击行序列号之外，还可以右击下图所示断点，选择 Remove breakpoint 菜单项。如果只是想暂时性地删除该断点，可以仅取消勾选复选框。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 10]  
在 XHR 请求中设置断点的情况也很常见。当任何 XHR 与设置的 URL 中的子串相匹配时或者 XHR 到达生命周期的某个阶段时，这类断点会被触发。如果想在 XHR 与 URL 子串匹配时触发暂停，可以在 XHR/fetch Break points 窗格中进行 XHR 断点设置。如果想要在 XHR 生命周期的某个阶段触发暂停，可以在 Event Listener Breakpoints 窗格中查看 XHR 目录，如图所示：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_10_color_FFFFFF_t_70_g_se_x_16]  
**2.调试代码。** 设置好断点后就可以开始遍历代码了，可以通过一次执行一行代码或者一个函数来观察数据和页面的更改，也可以修改 JS 脚本及其中的数值。页面登录时的密码加密方式和判断参数正确的标志?都可以通过代码调试逐步找出来。代码调试通过 Sources 面板右上角的图标进行操纵，如图所示：  
![在这里插入图片描述][c272871470b0426695965381653d9bd2.png]  
第一个图标的含义是，恢复代码执行直到遇到下一个断点，如果没有遇到断点，就会恢复正常；第二个图标的含义是，执行当前行的代码，并跳转到下一行；第三个图标的含义是，如果下一行代码包含一个函数调用，就跳转到该函数内部并在该函数的第一行暂停；第四个图标的含义是，执行当前函数的剩余部分，然后在函数调用后的下一个语句处暂停；第五个图标的含义是，暂时禁用所有断点，用于恢复完整的执行，而不是将断点全部删除；第六个图标的含义是，当异常发生时自动暂停代码。在实际的加密脚本调试中，需要将上述图标结合起来使用。除此之外，当脚本暂停在断点时，Scope 窗格会显示当前时刻所有定义在本地、闭包和全局的属性，如图所示：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 11]  
仅在脚本暂停时，Scope 窗格才会有显示。当页面正常运行时，Scope 窗格是空白的。在进行断点时，Call Stack 窗格会显示代码的执行路径。如下图所示，它按照时间逆序，从上到下单击查看时，会自动跳转到对应代码块，这有助于调试者理解代码如何运行。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 12]  
**3.在任何页面上运行自定义代码块。** 代码块是可以在 Sources 面板中创建和执行的小脚本，在任何页面都可以访问和运行。假设调试者有一个 JS 加密方法库，内置了多种常见的加密方法，在调试脚本时，如果要在多个页面中反复使用，就可以考虑将脚本另存为代码块。要创建一个代码块，需要打开 Sources 面板，单击左侧 Snippets 选项卡，右击空白处，选择 Create new snippet(或 New snippet) 选项，如图：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 13]  
如果代码块编写后还未保存，文件名会出现下图所示的符号 “\*”，需要按 Ctrl + S 键来进行保存。保存后的代码块要想在当前页面中使用，需要右击文件名，单击 Run 菜单项。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 14]  
**4.美化打印代码块。** 一般来说，打开一个网页源代码或者脚本文件，会发现它是经过压缩的，观察起来比较困难，如下图所示：  
![在这里插入图片描述][c2f84d92c26f4f8198e01f91bef786e2.png]  
单击源代码左下角的 `{}` 图标，可以进行代码的美化打印。

**5.跟踪监视变量。** 有时候需要持续监视脚本运行中某一个变量的值，如果一直在控制台进行调试输出会有些烦琐。Sources 面板右侧的 Watch 窗格提供了在程序中跟踪监视变量的功能，利用它可以不用反复地将监控对象输出到控制台中。要将变量添加到监控列表中，只需要单击 Watch 窗格中的 Add expression 图标(只有在 Watch 窗格展开时才会出现)，如下图所示：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 15]  
此时会打开一个内联输入框，输入要监控的变量名称，按 Enter 键，即可完成变量添加。如果要监控的变量没有被设置或未被找到，就会显示为下图中的 not available：  
![在这里插入图片描述][40b636246cb14c379ceec93b04f22f75.png]

## Network 面板 ##

Network 面板会记录与网页有关的每个网络操作的详细信息，包括 HTTP 请求和 HTTP 响应。在该面板中，要掌握的是下图中标注的三个窗格，其中1号窗格用于控制 Network 面板的外观和功能，2号窗格用于过滤请求列表中的资源请求和响应，3号窗格列举了按照时间顺序存储的每个网络资源。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 16]  
1号窗格中的 Preserve Log 复选框用于保存日志，Disable cache 复选框用于禁用缓存。单击3号窗格中的任意一个网络资源，可以查看该网络资源的更多详细信息，如下图所示，打开后默认显示 HTTP 请求头，包含统一资源定位符、HTTP 请求方法和状态码。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 17]  
请求的详细内容后续笔者在另一篇博文中展开，这里主要讲解面板的使用。如果要对网络资源进行 Preview 预览，二进制图片资源会直接显示请求资源在页面中的展示，也可能不显示具体信息，具体情况取决于选择查看的资源类型。如果查看 HTTP 响应的具体内容，可以单击 Response 选项卡，如下图所示，HTML 资源会以源代码的方式呈现，具体返回内容取决于查看的资源类型。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 18]

## Application 面板 ##

Application 面板中可以查看和删除 Cookie，但是不能修改 Cookie 值。如下图所示，Cookie 会按照域列出，不过需要注意，来自不同域的 Cookie 可能会出现在同一栏中，相同的 Cookie 也可能会出现在多栏中。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 19]  
使用 local storage 本地存储来存储键值对，可以在其中进行键值对的检查、修改和删除操作。常用的5种方法如下所示：  
(1) setItem()：存储一个名称为 key 的值 value，如果 key 存在，就更新value。  
(2) getItem()：获取名称为 key 的 value，如果 key 不存在，则返回 null。  
(3) removeItem()：删除名称为 key 的信息，这个 key 所对应的 value 也会全部被删除。  
(4) clear()：清空 localStorage 中所有信息。  
(5) key()：键的索引。

以设置键值对为例，创建一个 key 为 name、value 为 test 的键值对，可以在控制台输入如下代码：

localStorage.setItem("name", "test");

# 2、JS 逆向调试技巧 #

在掌握了 Chrome 开发者工具的基本使用后，需要将其运用到实际的调试中。在做日常的网页端数据抓包时，通常会遇到各类加密参数，如何快速定位加密脚本和关键函数极为重要。

## 善用搜索 ##

在 Network 面板中找到了需要的资源包，当其中的 HTTP 内容中存在加密键值对时，可以使用搜索来快速定位加密脚本和关键函数。如下图所示，需要先单击右上角的展开图标，再单击 Search 菜单项，之后在下方的搜索框中输入要搜索的加密参数，最后单击搜索框右边的 Refresh 图标。如果 Sources 中存在这个加密参数，就会在下方返回符合条件的所有文本文件。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 20]  
以全局搜索 safe 加密参数为例，因为通常情况下返回的匹配内容是较多的，可以在原有参数基础上再加一些标识符，例如：password=、 password:。这样可以大幅度减少匹配项，从而减轻寻找关键函数的负扭。

## 查看请求调用堆栈 ##

在 Network 面板中，通过资源的 Initiator 列可以看到它的请求调用栈，排序方式是逆序。如果将鼠标移动到某一个请求资源的 Initiator 上，会弹出该请求资源的请求调用堆栈。单击下图的请求调用堆栈中的任意显示项，即可跳转到对应的脚本文件的具体调用行中。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 21]

## XHR 请求断点 ##

不少加密数据包传输的时候，会使用 XHR 请求断点。当目标加密参数存在于 XHR 数据包的时候，选择 XHR 请求断点会比全局搜索更加快捷，下图是添加 XHR 请求断点的联内输入框。  
![在这里插入图片描述][74b93c575ca845e39dcc0b328f48a6c6.png]

## Console 插桩 ##

条件断点不仅可以写判断表达式，还可以在其中输入、输出表达式，这样就可以在脚本运行到对应行时，在控制台中打印输出对应参数，达到插桩的效果。如下图所示，添加条件断点时，可以输入 “console.log()” 对密码加密脚本中的密码值进行输出调试。  
![在这里插入图片描述][883af213461d44419a693faee3d1b28b.png]  
Console 插桩通常用于滑块验证码的调试，滑块轨迹的输出如果设置了一般断点，就会移动一次暂停一次，使用插桩形式就可以直接在控制台中流畅地输出滑动轨迹了。

## 堆内存函数调用 ##

在脚本中设置断点后，可以在当前断点暂停时，在 Console 面板中调试输出具体函数，单击函数内容可以跳转到具体的代码行，如下图所示：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 22]

## 复制Console面板输出 ##

在 Console 面板的调试中，通常需要将调试输出内容进行复制，方便将其写入本地文件进行调用。但一般情况下，直接复制往往得不到需要的内容，这个时候，可以在控制台中尝试以下四种方法，最后一种方法需要在 Sources 面板的 Snippets 代码块中添加 CryptoJS 加密库。(1) copy()、(2) JSON.stringify()、(3) Object.toString()、(4) CryptoJS.enc.Utf8.stringfy()。使用复制方法后，Console 面板的内容就会被复制到粘贴板上。

# 3、本地覆盖 #

本地覆盖是一个实用的调试方法，能够使开发者用自己的文件来替换请求的资源。即不必再继续向服务器请求资源，而是直接在本地修改，当浏览器向目标地址请求资源时，会使用本地的文件来进行代替。这样，开发者可以随意对网页脚本文件进行修改，包括添加 Console 插桩、添加循环 debugger 以及实现脚本文件在被调用时，直接在控制台对加密参数或函数进行输出等操作。这里讲解 Chrome local override 和 Fiddler 自动响应两种方法。

## Chrome local override ##

Chrome 64 之后的开发者工具可以直接在 Sources 面板中进行操作，如下图所示，切换到 Overrides 选项卡中，单击 Select folder for overrides 选项，在弹出的文件夹选择框中选择要进行替换的资源的所属文件夹。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 23]  
选择文件夹后，浏览器上方会弹出对话框询问是否允许 Chrome 开启访问目录权限，单击 “允许” 按钮。接下来，以替换百度首页图标为例进行说明。  
(1) 打开 Network 面板进行抓包，找到百度首页图标的 HTTP 请求包。  
(2) 右击对应请求资源，选择下图中的 Save for overrides 菜单项。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 24]  
(3) 在 Overrides 中，将选择的文件夹下的图片直接拖动到中间区域。  
(4) 再次刷新百度首页页面，会发现图标已经被替换。

## Fiddler 自动响应 ##

除了在 Chrome 中完成本地覆盖，也可以在 Fiddler 抓包工具中实现相同效果，只需要进行如下三步操作：

1.  复制 Network 面板中的百度图标 URL 地址。
2.  打开 Fiddler 抓包工具，按照下图所示进行操作。首先单击左下角空白处，显示 Capturing 后开始网页抓包，然后切换到右侧的 AutoResponsder 选项卡，在下方输入栏的第一行输入第一步操作中复制的 URL 地址，第二行输入本地要替换的图片地址，最后单击 Save 按钮。  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 25]
3.  刷新百度首页，发现百度图标已经被替换。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ffa33d0e5e7e484fb6004e54025555ef.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/f0dcd8a2100c41f68faa4dba3661f846.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_11_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/cd602e6afc1943fcbd3e4c4139b501ee.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/2013de50fe7846199fed225e143e2310.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/0d3294b8313d4e069e215f931d1b39a9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/e8c937d2f60944fe8363926d81dd24cb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/3671b338d6d44678b6396000b6c84a45.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/0ea396e9a287414d896e62cf7a0130b1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/30fbff9f8b8f4223b87b1148e1f14424.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/13a26d0b2cea46cdb138013c65f3788e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/cb016a46ef034965bfa7f5a4086fdbb8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220828/35cf3358fc3240af8d47ccf1ec2791e1.png
[a4d66b54049a4ddc98addef7eb9ff8f4.png]: /images/20220828/cc8a45a79dc54e34b4f2de11a40cb5bc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220828/5a35eaf716194f95b6321284fea3898f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_10_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/92bbfdebd57849ffaa287155633db0a7.png
[c272871470b0426695965381653d9bd2.png]: /images/20220828/087555f2acc64ac5879cfd3659f5b983.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220828/bb94731ba5264a90aee2fc6a89531134.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220828/c05769ee2a8b42fca03434a3ba5edf1d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 13]: /images/20220828/9bcd89c6eb2d4ebba189210e21990611.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 14]: /images/20220828/0d372ad9fecd46a9ac0e6e0af15c8377.png
[c2f84d92c26f4f8198e01f91bef786e2.png]: /images/20220828/575cf4e1eda04efcb955ab0aef54a73b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 15]: /images/20220828/448b1c4f8b2b476cbbcafcb922da7cb6.png
[40b636246cb14c379ceec93b04f22f75.png]: /images/20220828/6abf8f7486ff499fa37c1d9ff2b1c3c4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 16]: /images/20220828/2ebf783001d1493e8082d9e679f60711.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 17]: /images/20220828/c7d7c28570514a188c1398b451bc8313.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 18]: /images/20220828/3a4ebc9e719243b4bcb280475cc8c5bd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 19]: /images/20220828/85a54250d2bb46f99316905b555ac6f4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 20]: /images/20220828/7b8282b5b1b949b4951d70a70c49edcf.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 21]: /images/20220828/87b052a916154b3d8757723edb8b53ce.png
[74b93c575ca845e39dcc0b328f48a6c6.png]: /images/20220828/96d13d9ac98e40e29bd9b0713f38ae1e.png
[883af213461d44419a693faee3d1b28b.png]: /images/20220828/e6c475cf0d66484e87ee7a0fc4b2681f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 22]: /images/20220828/915a5918c04544f2b2a3b93f5d6ef60e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 23]: /images/20220828/6731a17ba5c445ed999d28db16646b4c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 24]: /images/20220828/9e691dfa7cd44a4fa1fe6d520a7c3637.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQW1vIFhpYW5n_size_20_color_FFFFFF_t_70_g_se_x_16 25]: /images/20220828/32a225b45fe14f859cbab83231aed5bf.png