Chrome分析网站

Chrome开发工具
浏览器是从事编程开发人员必备的开发工具。世界上五大主流浏览器分别是:IE、Opera、Google Chrome、Safari和Firefox。其中,Chrome和Firefox是编程开发人员的首选,主要是两者运行速度、扩展性和用户体验都符合开发人员所需。
以Chrome作为分析网站的工具,因为其简洁、速度快(无论是启动速度、页面解析速度还是JavaSript执行速度),对HTML5和CSS3的支持也比较完善。
开发者工具界面共有9个标签页,分别是:Elements、Console、Sources、Network、Performance、Memory、Application、Security和Audits。
Chrome开发者工具以Web调试为主,如果用于爬虫分析,熟练掌握Elements和Network标签就能满足大
部分的爬虫需求。其中Network是核心部分。
Elements标签
在Elements标签页面允许从浏览器的角度看页面,也就是说可以看到Chrome渲染页面的所需HTML、CSS和DOM对象。此外还可以编辑内容更改页面显示效果。
通过单击Event Listeners下的某个JavaScript会自动跳转到Sources标签,显示当前JavaScript的源码,起定位作用。
Network标签
在Network标签页面可以看到页面向服务器请求的信息、请求的大小以及加载请求花费的时间。从发起网页页面请求Request后分析HTTP请求得到各个请求信息(包括状态、类型、大小、所用时间、Request和Response等)。
Network主要包括以下5个区域。

  • Controls:控制Network的外观和功能。
  • Filters:控制Requests Table 具体显示哪些内容
    All:返回当前页面全部加载的信息,就是一个网页全部所需要的代码、图片等请求。
    XHR:筛选Ajax的请求链接信息。
    JS:主要筛选JavaScript文件。
    CSS:主要是CSS样式内容。
    Img:是网页加载的图片,爬取图片的URL都可以在这里找到。
    Media:是网页加载的媒体文件。
    Doc:是HTML文件,主要是用于响应当前URL的网页内容。
  • Overview:显示获取到请求的时间轴信息,主要是对每个请求信息在服务器的响应时间进行记录。
  • Requests Table:按前后顺序显示所有捕捉的请求信息,单击请求信息可以查看该详细信息。
  • Summary:显示总的请求数、数据传输量、加载时间信息。

5个区域中,Requests Table是核心部分,主要作用是记录每个请求信息。但每次网站出现刷新时,请求列表都会清空并记录最新的请求信息。
每条请求信息划分为以下5个标签。

  • Headers:该请求的HTTP头信息。
  • Preview:根据所选择的请求类型(JSON、图片、文本)显示相应的预览。
  • Response:显示HTTP的Response信息。
  • Cookies:显示HTTP的Response和Request过程中的Cookies信息。
  • Timing:显示请求在整个生命周期中各部分花费的时间。
    常用标签有Headers、Preview和Response。Headers用于获取请求链接、请求头和请求参数;Preview和Response用于显示服务器返回的响应内容。
    Headers标签划分为以下4部分。
    Chrome分析网站_第1张图片
    Chrome分析网站_第2张图片
    Headers标签的内容看起来很多,其实对于爬虫开发人员来说只需要关心请求链接、请求方式、请求头和请求参数的内容。
    而Preview和Response是服务器返回的结果,两者间对不同类型的响应结果有不同的显示方式:
  • 如果返回结果是图片,那么Preview表示可显示图片内容,Response表示无法显示。
  • 如果返回的是HTML和JSON,那么两者都能显示,但在格式上会存在细微的差异。

简单总结一下分析网站的步骤:
Chrome分析网站_第3张图片

你可能感兴趣的:(笔记)