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

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

　　在这个文章中，我们将尝试使用一个直观的网页分析工具（Chrome Developer Tools）来抓取和分析网页

　　对网络爬虫的本质和内涵有更深入的了解

　　1、测试环境

　　浏览器：Chrome 浏览器

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

　　Web 分析工具：开发人员工具

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

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

　　另外，很多动态网站都采用了异步加载技术（Ajax）。这就是捕获的源代码和网站显示的源代码不一致的原因。

　　至于如何抓取动态网页，这里有两种方法：

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

　　

　　到网页空白处点击鼠标右键，选择查看网页源码（或使用快捷键Ctrl+U直接打开）

　　请注意网站的最原创源码是通过查看网页源码获得的，也就是我们平时抓取的源码

　　

　　再次进入网页空白区域，点击鼠标右键，选择勾选（或使用快捷键Ctrl+Shift+I/F12直接打开）

　　请注意，检查得到的源代码是Ajax加载并JavaScript渲染的源代码，即当前网站显示内容的源代码

　　

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

　　目前，至少京东产品的价格是通过异步加载生成的。下面介绍三种判断网页中某个内容是否是动态生成的方法：

　　

　　(2）网页抓取分析

　　下面以京东产品为例进行说明。打开一个产品的首页，尝试抓取动态加载的产品价格数据。

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

　　这时候按快捷键F5刷新页面，可以看到开发者工具里面有各种包，我们用Filter过滤包

　　

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

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

　　点击Header查看其头部参数设置

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

　　

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

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

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

　　

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

　　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