写在前面的话上一篇文章我们初步了解了网络爬虫的基本原理,接下来我们将尝试使用直观的网页分析工具对网页进行抓包分析,更加深入的了解网络爬虫的本质与内涵

一、测试环境

浏览器:Chrome 浏览器
浏览器版本:67.0.3396.99(正式版本) (32 位)
网页分析工具:开发者工具

二、网页分析

1. 网页源代码分析

我们知道网页有静态网页和动态网页之分,很多人会认为静态网页就是没有动态效果的网页,其实这种说法是错误的。

静态网页 是指没有后台数据库的不可交互网页 ,其常以.htm、.html、.shtml、.xml等为后缀

动态网页 是指能与后台数据库进行交互和数据传递的可交互网页,常以.aspx、 .asp、 .jsp、 .php、 .perl、 .cgi等为后缀,并且在动态网页网址中通常会有一个标志性的符号——“?”

另外还要注意的一点是,目前很多动态网站都采取了异步加载技术(Ajax),这个就是很多时候抓取到的源代码和网站显示的源代码不一致的原因(至于如何爬取动态网页,以后会有专门的文章来介绍)

下面我们以京东商品为例进行讲解,我们首先打开某个商品的首页 https://item.jd.com/10072615543.html
利用Chrome抓包分析

来到网页空白处单击鼠标右键选择 查看网页源代码(或者使用快捷键 Ctrl+U 直接打开),请注意,查看网页源代码得到的是网站最原始的源代码,也就是通常我们抓取到的源代码
利用Chrome抓包分析

再次来到网页空白处单击鼠标右键选择 检查(或者使用快捷键 Ctrl+Shift+I / F12直接打开),请注意,检查得到的是是经过Ajax加载和JavaScript渲染的源代码,也就是当前网站显示内容的源代码
利用Chrome抓包分析

经过对比之后,我们可以发现两者的内容是不一样的,这就是异步加载技术(Ajax)的典型例子,就目前来说至少京东商品的价格是通过异步加载生成的,这里提供三种方法判断网页中某个内容是否为动态生成:

  • 分析 查看网页源代码 生成的源代码,或在其中寻找动态请求的典型语句,或将其与 检查 生成的源代码进行比较,这种方法是判断的基础方法,但是技术难度比较大,也比较繁琐
  • 通过以下要讲解的网页抓包分析来判断,这种方法最为常用,应当好好掌握
  • 一种取巧的方法,就是禁用Chrome浏览器的JavaScript加载,在Chrome地址栏输入chrome://settings/content/javascript 来到JavaScript的设置页面,将JavaScript的选项关闭,这时候重新刷新网页,就会看到原来显示价格的地方出现了空白,这就表明原来的价格是通过JavaScript动态生成的

利用Chrome抓包分析

2. 网页抓包分析

我们还是以京东商品为例子进行讲解,打开某个商品的首页 https://item.jd.com/10072615543.html,尝试抓取动态加载的商品价格数据

使用快捷键 Ctrl+Shift+IF12打开开发者工具,选择Network选项卡进行抓包分析,此时按下快捷键 F5 刷新页面,就会看到开发者工具中出现了各种各样的请求,然后我们使用Filter对请求进行过滤
利用Chrome抓包分析

我们先选中 Doc 进行过滤,会看到列表中只出现了一个请求,选中这个请求,一般来说,它就是浏览器给服务器发送的第一个请求,用于获取网站的原始源代码。点击 Header 可以看到它的头部参数设置,点击 Response 可以看到网站返回的源代码,容易发现它其实和 查看网页源代码 返回的信息是一致的
利用Chrome抓包分析

对于动态加载的抓包分析,主要是分析 XHRJS 请求即可,选中 JS 进行过滤,发现列表中出现了好多请求,经过分析,我们筛选出下图中加标记的请求就是价格请求,其返回的数据包含着价格的信息
利用Chrome抓包分析

好了,到目前为止,我们已经成功抓取到请求价格的包了,接下来只要对该请求进行分析即可

我们可以在 Header 中发现该请求的 Request URL 为:https://p.3.cn/prices/mgets?callback=jQuery5616992&type=1&area=17227990&pdtk=&pduid=1532852826238440773952&pdpin=&pin=null&pdbp=0&skuIds=J_14441923668%2CJ_20952735809%2CJ_28979564688%2CJ_1500523366%2CJ_28674236314%2CJ_27820709946&ext=11100000&source=item-pc

把callback参数去掉得到的URL返回的内容就包含着我们需要的数据了:https://p.3.cn/prices/mgets?type=1&area=1_72_2799_0&pdtk=&pduid=1532852826238440773952&pdpin=&pin=null&pdbp=0&skuIds=J_14441923668%2CJ_20952735809%2CJ_28979564688%2CJ_1500523366%2CJ_28674236314%2CJ_27820709946&ext=11100000&source=item-pc

利用Chrome抓包分析

最后只需把需要的数据提取出来就大功告成了!

写在后面的话 :通过这篇文章我们初步学习了基本的网页分析方法,下一篇文章我们将会开始学习Python相关的爬虫库,走进爬虫世界的大门,窥探爬虫世界的奥妙,谢谢大家

相关文章:

  • 2022-12-23
  • 2021-05-25
  • 2021-07-11
  • 2021-12-06
  • 2021-04-28
猜你喜欢
  • 2021-11-24
  • 2022-01-07
  • 2021-07-21
  • 2022-12-23
  • 2021-12-14
相关资源
相似解决方案