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部分。
  
  
  Headers标签的内容看起来很多，其实对于爬虫开发人员来说只需要关心请求链接、请求方式、请求头和请求参数的内容。
  而Preview和Response是服务器返回的结果，两者间对不同类型的响应结果有不同的显示方式:
• 如果返回结果是图片，那么Preview表示可显示图片内容，Response表示无法显示。
• 如果返回的是HTML和JSON，那么两者都能显示，但在格式上会存在细微的差异。

简单总结一下分析网站的步骤: