爬虫开发技术基础之分析工具-Chrome开发者工具

简介

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。
Chrome 开发者工具中最经常使用的三个模块是元素面板、控制台面板、网络面板。

关于Chrome开发者工具的详细介绍参见官方文档

如下内容转载自selfboot的博文。

这里我假设你用的是Chrome浏览器，若是刚好你作web开发，或者是比较好奇网页中的一些渲染效果而且喜欢折腾，那么你必定知道Chrome的开发者工具了。其实其余浏览器也有相似工具，好比Firefox下的firebug。本文将会详细讲述如何使用Chrome开发者工具，但愿里面有些让你感到惊艳的东西！即便你不用Chrome，那么文中的某些内容也会至关有用。

首先啰嗦一下如何打开开发者工具吧。能够直接在页面上点击右键，而后选择审查元素；或者是打开Tools–Developer Tools；或者是用快捷键Command + I 打开。打开后咱们看到的界面大概以下：

Google Chrome一共提供了8大组工具：

• Elements: 容许咱们从浏览器的角度看页面，也就是说咱们能够看到chrome渲染页面所须要的的HTML、CSS和DOM(Document Object Model)对象。此外，还能够编辑这些内容更改页面显示效果；

• Network: 能够看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，固然也能看到哪些资源不能成功加载。此外，还能够查看HTTP的请求头，返回内容等；

• Sources: 主要用来调试js；

• Timeline: 提供了加载页面时花费时间的完整分析，全部事件，从下载资源处处理Javascript，计算CSS样式等花费的时间都展现在Timeline中；

• Profiles: 分析web应用或者页面的执行时间以及内存使用状况；

• Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；

• Audits: 分析页面加载的过程，进而提供减小页面加载时间、提高响应速度的方案；

• Console: 显示各类警告与错误信息，而且提供了shell用来和文档、开发者工具交互。

强大的Chrome开发者工具提供了很棒的提示功能，当咱们把鼠标悬停在某些项时，会显示一些颇有用的提示信息，有时候咱们能够获得意想不到的收获。此外，开发者工具还提供了Emulation功能，作移动开发时特别有用。下面先详细研究一下8大工具的使用方法。

Elements

Elements工具像一把手术刀同样“解剖”了当前页面，咱们看到的Elements页面通常像这样子：

图中标记为1的红色区块为页面HTML文件，HTML中的每一个元素好比、

都是一个DOM节点，全部的DOM节点组成了DOM树。咱们彻底能够把红色区块1当作是DOM树，把HTML元素标签看作DOM节点。

当咱们在这里选中某一DOM对象时，网页中相应元素也会被阴影覆盖。咱们能够对DOM对象进行修改，修改后结果会在页面实时显示出来。此外，还能够用Command+f搜索DOM树中指定的内容，或者是以HTML形式更改页面元素，以下图：

选中DOM对象以后右键便可以看到一些辅助的功能，如图中标记为2的区块所示：

• Add Attribute: 在标签中增长新的属性；

• Force Element State: 有时候咱们为页面元素添加一些动态的样式，好比当鼠标悬停在元素上时的样式，这种动态样式很难调试。咱们可使用Force Element State强制元素状态，便于调试，以下图：
  

• Edit as HTML: 以HTML形式更改页面元素；

• Copy XPath: 复制XPath；

• Delete Node: 删除DOM节点；

• Break On: 设置DOM 断点。

图中被标记为3的蓝色区块显示当前标签的路径：从html开始一直到当前位置，咱们单击路径中任何一个标签，便可以跳转到相应标签内容中去。

图中标记为4的蓝色区块实时显示当前选中标签的CSS样式、属性等，一共有如下5小部分：

• Styles: 显示用户定义的样式，好比请求的default.css中的样式，和经过Javasript生成的样式，还有开发者工具添加的样式；

• Computed: 显示开发者工具计算好的元素样式；

• Event Listeners: 显示当前HTML DOM节点和其祖先节点的全部JavaScript事件监听器，这里的监听脚本能够来自Chrome的插件。能够点击右边小漏斗形状(filter)选择只显示当前节点的事件监听器。

• DOM Breakpoints: 列出全部的DOM 断点；

• Properties: 超级全面地列出当前选中内容的属性，不过基本不多用到。

实际应用中咱们常常会用到Styles，以下图：

图中标记为1的+号为New style rule，能够为当前标签添加新的选择器，新创建的样式为inspector-stylesheet。此外，也能够直接在原有的样式上增长、修改、禁用样式属性，如图中标记2显示。

在New style rule右边为Toggle Element State，选择后会出现标记3显示的选择框，若是选中:hover后，便可以看到鼠标悬停在页面元素上时的CSS样式了，做用相似于前面的Force Element State，更多内容能够看:hover state in Chrome Developer Tools 。

更强大的是，开发者工具以直观的图形展现了盒子模型的margin、border、padding部分，如标记5所示。下面动态图给出了盒子模型的一个示例：

Network

有时候咱们的网页加载的很慢，而相同网速下，其余网页加载速度并不慢。这时候就得考虑优化网页，优化前咱们必须知道加载速度的瓶颈在哪里，这个时候能够考虑使用Network工具。下图为个人博客首页加载时的Network状况：

请求的每一个资源在Network表格中显示为一行，每一个资源都有许多列的内容(如红色区块1)，不过默认状况下不是全部列都显示出来。

• Name/Path: 资源名称以及URL路径；

• Method: HTTP请求方法；

• Status/Text: HTTP状态码/文字解释；

• Type: 请求资源的MIME类型；

• Initiator解释请求是怎么发起的，有四种可能的值：

  1. Parser：请求是由页面的HTML解析时发送的；

  2. Redirect：请求是由页面重定向发送的；

  3. Script：请求是由script脚本处理发送的；

  4. Other：请求是由其余过程发送的，好比页面里的link连接点击，在地址栏输入URL地址。

• Size/Content: Size是响应头部和响应体结合起来的大小，Content是请求内容解码后的大小。进一步了解能够看这里Chrome Dev Tools - “Size” vs “Content”；

• Time/Latency: Time是从请求开始到接收到最后一个字节的总时长，Latency是从请求开始到接收到第一个字节的时间；

• Timeline: 显示网络请求的可视化瀑布流，鼠标悬停在某一个时间线上，能够显示整个请求各部分花费的时间。
  以上是默认显示的列，不过咱们能够在瀑布流的顶部右键，这样就能够选择显示或者隐藏更多的列，好比Cache-Control, Connection, Cookies, Domain等。

咱们能够按照上面任意一项来给资源请求排序，只须要单击相应的名字便可。Timeline排序比较复杂，单击Timeline后，须要选择根据Start Time、Response Time、End Time、Duration、Latency中的一项来排序。

红色区块2中，一共有6个小功能：

1. Record Network Log: 红色表示此时正在记录资源请求信息；

2. Clear: 清空全部的资源请求信息；

3. Filter: 过滤资源请求信息；

4. Use small resource raws: 每一行显示更少的内容；

5. Perserve Log: 再次记录请求的信息时不擦出以前的资源信息；

6. Disable cache: 不容许缓存的话，全部资源均从新加载。

选择Filter后，就会出现如红色区块3所显示的过滤条件，当咱们点击某一内容类型(能够是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)后，只显示该特定类型的资源。在XHR请求中，能够在一个请求上右键选择“Replay XHR”来从新运行一个XHR请求。

有时候咱们须要把Network里面内容传给别人，这时候能够在资源请求行的空白处右键而后选择Save as HAR with Content保存为一个HAR文件。而后能够在一些第三方工具网站，好比这里重现网络请求信息。

选定某一资源后，咱们还能够Copy as cURL，也就是复制网络请求做为curl命令的参数，详细内容看 Copying requests as cURL commands

此外，咱们还能够查看网络请求的请求头，响应头，已经返回的内容等信息，以下图：

资源的详细内容有如下几个：

• HTTP request and response headers

• Resource preview: 可行时进行资源预览；

• HTTP response: 未处理过的资源内容；

• Cookie names and values: HTTP请求以及返回中传输的全部Cookies；

• WebSocket messages: 经过WebSocket发送和接收到的信息；

• Resource network timing: 图形化显示资源加载过程当中各阶段花费的时间。

楚江数据是一家专业的互联网数据技术服务商，提供网站APP数据采集和爬虫软件定制开发服务，服务范围涵盖社交网络、电子商务、分类信息、学术研究等。
官方网站 http://www.chujiangdata.com。

本文环境

操做系统：OS X 10.9.4Chrome版本：Version 37.0.2062.120