网页源代码抓取工具(网页分析（Chrome开发者工具）对网页抓包分析的本质与内涵)

　　网页源代码抓取工具(网页分析（Chrome开发者工具）对网页抓包分析的本质与内涵)

　　在本期文章中，我们将尝试使用直观的网页分析工具（Chrome Developer Tools）对网页进行抓取和分析，对网页爬虫的本质和内涵有更深入的了解

　　1、测试环境

　　浏览器：Chrome浏览器

　　浏览器版本：67.0.3396.99（正式版）（32位）

　　网络分析工具：开发者工具

　　2、网页分析（1）网页源码分析

　　我们知道网页分为静态网页和动态网页。很多人误以为静态网页就是没有动态效果的网页。事实上，这种说法是错误的。

　　另外，目前很多动态网站都采用异步加载技术（Ajax），这也是为什么抓到的源码和网站显示的源码不一致的原因，至于怎么爬取动态网页，这里有两种方法：

　　下面以京东产品为例，分析如何通过Chrome抓包。我们先打开一个产品的首页

　　/.html

　　

　　进入网页空白处，右键，选择查看网页源代码（或使用快捷键Ctrl+U直接打开）

　　请注意查看网页源代码获取的是网站最原创的源代码，通常是我们抓取的源代码

　　

　　再次进入网页空白处，右键选择Inspect（或使用快捷键Ctrl+Shift+I/F12直接打开）

　　请注意，检查结果是通过Ajax加载并通过JavaScript渲染的源代码，也就是网站当前显示的内容的源代码

　　

　　经过对比我们可以发现两者的内容是不一样的，这是异步加载技术（Ajax）的典型例子

　　目前，至少京东产品的价格是异步加载生成的。这里有三种方法可以判断网页中的某个内容是否是动态生成的：

　　

　　(2）网页抓包分析

　　下面以京东产品为例进行讲解，打开某款产品的首页，尝试抓取动态加载的产品价格数据

　　/.html

　　使用快捷键Ctrl+Shift+I或F12打开开发者工具，然后选择Network选项卡进行抓包分析

　　此时按快捷键F5刷新页面。可以看到开发者工具中出现了各种包。我们使用过滤器来过滤包。

　　

　　首先，我们选择Doc，我们可以看到列表中只出现了一个包

　　一般来说，这是浏览器接收到的第一个获取请求原创源代码的数据包网站

　　点击Header查看其header参数设置

　　单击响应以查看返回的源代码。不难发现，其实和查看网页源码返回的信息是一样的。

　　

　　让我们回到主题。对于抓包的动态加载分析，我们主要看XHR和JS选项卡。

　　选择JS进行过滤，发现列表中有很多包。经过分析，我们过滤掉下图中标记的包。

　　这个包返回了关于价格的信息，但是仔细分析后发现这些价格不属于当前产品，而是属于相关产品。

　　

　　但是怎么说这个包还是跟价格有关，我们先来看看这个包的请求URL。

　　https://p.3.cn/prices/mgets?callback=jQuery1609108&type=1&area=1_72_2799_0&pdtk=&pduid=1539779074977382417990&pdpin=&pin=null&pdbp=0&skuIds=J_25630711066%2CJ_26395831446%2CJ_20823451030%2CJ_11332156897%2CJ_14020547214%2CJ_26498549638&ext=11100000&source=item-pc

　　过滤包括回调在内的不必要参数以获得简单有效的URL

　　https://p.3.cn/prices/mgets?skuIds=J_25630711066%2CJ_26395831446%2CJ_20823451030%2CJ_11332156897%2CJ_14020547214%2CJ_26498549638

　　直接用浏览器打开网址，可以看到返回的JSON数据中收录价格信息（可惜是其他商品的价格）

　　

　　通过分析URL的参数，可以推断出skuId应该是每个产品的唯一标识，那么在哪里可以找到我们需要的产品的skuId呢？

　　实际上，SKU是物流、运输等行业常用的缩写。它的全称是Stock Keeping Unit，是库存进出计量的基本单位。现已扩展为统一产品编号的缩写。每个产品都有一个独特的 SKU

　　回顾一下我们刚刚进入的产品首页，/.html

　　这不是隐藏了当前产品的唯一编号标识符（）吗？试一试！

　　果然，通过访问商品价格的完整 URL，我们得到了它，/prices/mgets?skuIds=

　　通过直接访问这个网址，我们可以得到当前产品的价格信息

　　

　　其实我们也可以适当的泛化URL来适应京东所有产品的价格爬取

　　很简单，只是将 skuIds 作为参数独立分开，{ID}

　　通过泛化的URL，理论上只要能获取到产品的skuId，我们就可以访问到对应产品的价格