爬虫分析利器:谷歌Chrome F12抓包分析

Python爬虫 2018-12-02 2:56:42 阅读(18123) 评论(5)

浏览器打开网页的过程就是爬虫获取数据的过程,两者是一样一样的。浏览器渲染的网页是丰富多彩的数据集合,而爬虫得到的是网页的源代码html。

爬虫利用浏览器抓包分析URL

有时候,我们不能在网页的html代码里面找到想要的数据,但是浏览器打开的网页上面却有这些数据。这就是浏览器通过ajax技术异步加载(偷偷下载)了这些数据。

小猿们禁不住要问:那么该如何看到浏览器偷偷下载的那些数据呢?

答案就是谷歌Chrome浏览器的F12快捷键,也可以通过鼠标右键菜单“检查”(Inspect)打开Chrome自带的开发者工具,开发者工具会出现在浏览器网页的左侧或者是下面(可调整),它的样子就是这样的:

chrome浏览器开发者工具f12

让我们简单了解一下它如何使用:

谷歌Chrome抓包:1. 最上面一行菜单

  • 左上角箭头 用来点击查看网页的元素
  • 第二个手机、平板图标是用来模拟移动端显示网页
  • Elements 查看渲染后的网页标签元素
    提醒 是渲染后(包括异步加载的图片、数据等)的完整网页的html,不是最初下载的那个html。
  • Console 查看JavaScript的console log信息,写网页时比较有用
  • Sources 显示网页源码、CSS、JavaScript代码
  • Network 查看所有加载的请求,对爬虫很有帮助

后面的暂且不管。

谷歌Chrome抓包:2. 重要区域

图中红框的两个按钮比较有用,编号为2的是清空请求记录;编号3的是保持记录,这在网页有重定向的时候很有用
图中绿色区域就是加载完整个网页,浏览器的全部请求记录,包括网址、状态、类型等。写爬虫时,我们就要在这里寻找线索,提炼金矿。
最下面编号为4的红框显示了加载这个网页,一共请求了181次,数量是多么地惊人,让人不禁心疼起浏览器来。

点击一条请求的网址,右侧就会出现新的窗口显示该条请求的相信信息:

Chrome请求详情

图中左边红框就是点击的请求网址;绿框就是详情窗口。
详情窗口包括,Headers(请求头)、Preview(预览响应)、Response(服务器响应内容)和Timing(耗时)。
Preview、Response 帮助我们查看该条请求是不是有爬虫想要的数据;
Headers帮助我们在爬虫中重建http请求,以便爬虫得到和浏览器一样的数据。

了解和熟练使用Chrome的开发者工具,小猿们就如虎添翼可以顺利写出自己的爬虫啦。

还有最后一篇科普文章,我们就进入正题啦,下一篇我们讲:
Python为什么适合用来写网络爬虫

猿人学banner宣传图

我的公众号:猿人学 Python 上会分享更多心得体会,敬请关注。

***版权申明:若没有特殊说明,文章皆是猿人学 yuanrenxue.con 原创,没有猿人学授权,请勿以任何形式转载。***

说点什么吧...

  1. 1楼
    quark5000 5年前 (2018-12-21)

    哎呀,只考过foxbase,平时只用excel,N年没碰编程的我居然看下来了

    • 回复
      王平 5年前 (2018-12-21)
      回复 @quark5000 :哎哟,要坚持达到彼岸
  2. 2楼
    2yeah 5年前 (2019-04-07)

    “让人不禁心疼七浏览器来。”一处错别字。

    • 回复
      王平 5年前 (2019-04-08)
      回复 @2yeah :耶,多谢纠正
      • 王平 5年前 (2019-04-08)
        回复 @王平 :感谢你的细心哦,只要不影响阅读体验,不修改错别字哈。这类错别字有助于版权识别。