网页源代码抓取工具(使用直观的网页分析工具（Chrome开发者工具）对网页进行抓包分析)

　　网页源代码抓取工具(使用直观的网页分析工具（Chrome开发者工具）对网页进行抓包分析)

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

　　1、测试环境

　　浏览器：Chrome浏览器

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

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

　　2、网页分析

　　(1）网页源码解析

　　我们知道网页分为静态网页和动态网页。很多人误以为静态网页就是没有动态效果的网页。事实上，这种说法是错误的。静态网页是指没有后台数据库的非交互式网页。, .html, .xml 是后缀

　　动态网页是指可以与后台数据库传输数据的交互式网页，通常以.aspx、.asp、.jsp、.php为后缀

　　另外，目前很多动态网站都采用异步加载技术（Ajax），这也是为什么抓到的源码和网站显示的源码不一致的原因，至于怎么爬取动态网页，这里提供了两种方法：一种是通过抓包来分析Ajax请求，下面会讲到。

　　二是使用Selenium等工具进行动态渲染，可以参考我的另一篇文章文章——

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

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

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

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

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

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

　　目前，至少京东产品的价格是异步加载生成的。这里提供三种判断网页中的某个内容是否是动态生成的方法：一种是分析查看网页源代码生成的源代码，其中可以找到动态请求。也可以与检查生成的源代码进行比较

　　二是通过网页抓取的分析来判断，下面会解释。这种方法是最常用的，应该好好掌握。

　　第三种是比较刁钻的方法，就是禁用Chrome浏览器的JavaScript加载

　　您可以在 Chrome 的地址栏中输入

　　(2）网页抓取分析

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

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

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

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

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

　　点击Header查看其header参数设置

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

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

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

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

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

　　%2CJ_26395831446%2CJ_20823451030%2CJ_%2CJ_%2CJ_26498549638&ext=11100000&source=item-pc

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

　　%2CJ_26395831446%2CJ_20823451030%2CJ_%2CJ_%2CJ_26498549638

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

　　通过分析URL的参数，可以推断出skuId应该是每个产品的唯一标识，那么在哪里可以找到我们需要的产品的skuId呢？实际上，SKU是物流、运输等行业常用的缩写。它的全称是Stock Keeping Unit，是库存进出计量的基本单位。现已扩展为统一产品编号的缩写。每个产品都有一个独特的 SKU

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

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

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

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