HttpWatch工具简介及使用技巧(转)

系统管理员 2022-01-11 22:39 692阅读 0赞

HttpWatch是一个可用于录制HTTP请求信息的工具，由Simtec Limited公司开发，其官网为：[Http://www.httpwatch.com][Http_www.httpwatch.com]，HttpWatch只支持IE和Firefox，也就是说只有当你用IE或Firefox访问网页时，它才会进行录制，不像Sniffer和Omnipeek那样监控所有数据，但对于网站分析来说，已经是不可多得的利器了。

HttpWatch的安装很简单，没什么说的，来看看它的组成，HttpWatch有两部分组成：

1.  一个是嵌入到IE或Firefox中用于收集、查看、保存HTTP信息的插件
2.  一个是独立运行的日志查看器，叫做HttpWatch Studio

**一、基本功能介绍**

**以下用登录邮箱mail.163.com例子来展示Httpwatch:**

点击“Record”后，在IE打开需要录制的网址,mail.163.com，输入用户名，密码后完成登录操作  
![ht3.gif][]

**Overview（概要）**

表示选定某个信息显示其概要信息  
![ht4.gif][]

**2 Header（报头）**

![ht5.gif][]

**3．Cookies**

**![ht6.gif][]**

![ht9.gif][]

**4 Cache(缓存)**

显示在请求完成前后的浏览器缓存里URL地址栏里的详细信息![ht10.gif][]

**5．Query String(查询字符串)**

显示查询字符串被用在是传递参数url中

![ht11.gif][]

**6．POST Data**

显示通过Post方式数据信息

以下是mail.163.com登录过程中POST Data，如下图所示：

https://reg.163.com/logins.jsp?type=1&url=http://fm163.163.com/coremail/fcg/ntesdoor2?lightweight%3D1%26verifycookie%3D1%26language%3D-1%26style%3D-1

上面的红框：application/x-www-form-urlencoded表示，post方式默认提交数据编码

备注：以下为Post方式提交数据编码几种方式：

<table style="border-collapse:collapse;"> 
 <tbody> 
 <tr> 
 <td style="width:213.2pt;border:1pt solid;">text/plain</td> 
 <td style="border-right:1pt solid;border-top:1pt solid;border-left:medium none;width:213.2pt;border-bottom:1pt solid;">以纯文本的形式传送</td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-top:medium none;border-left:1pt solid;width:213.2pt;border-bottom:1pt solid;">application/x-www-form-urlencoded</td> 
 <td style="border-right:1pt solid;border-top:medium none;border-left:medium none;width:213.2pt;border-bottom:1pt solid;">默认的编码形式，即URL编码形式</td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-top:medium none;border-left:1pt solid;width:213.2pt;border-bottom:1pt solid;">multipart/form-data</td> 
 <td style="border-right:1pt solid;border-top:medium none;border-left:medium none;width:213.2pt;border-bottom:1pt solid;">MIME编码，上传文件的表单必须选择该</td> 
 </tr> 
 </tbody> 
</table>

Mime Type指的是如text/html,text/xml等类型

MIME（Multipurpose Internet Email Extension），意为多用途Internet邮件扩展，它是一种多用途网际邮件扩充协议，在1992年最早应用于电子邮件系统，但后来也应用到浏览 器。服务器会将它们发送的多媒体数据的类型告诉浏览器，而通知手段就是说明该多媒体数据的MIME类型，从而让浏览器知道接收到的信息哪些是MP3文件， 哪些是JPEG文件等等。当服务器把把输出结果传送到浏览器上的时候，浏览器必须启动适当的应用程序来处理这个输出文档。在HTTP中，MIME类型被定 义在<head>、</head>部分的Content-Type中。

<table style="border-right:1pt solid;border-width:1pt;border-style:solid;width:600px;"> 
 <tbody> 
 <tr> 
 <td style="border:1pt solid;">数据类型</td> 
 <td style="border:1pt solid;">MIME类型</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">超文本标记语言文本 .htm,.html文件</td> 
 <td style="border:1pt solid;">text/html（数据类别是text，种类是html，下同）</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">纯文本，.txt文件</td> 
 <td style="border:1pt solid;">text/plain</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">RTF文本，.rtf文件</td> 
 <td style="border:1pt solid;">application/rtf</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">GIF图形，.gif文件</td> 
 <td style="border:1pt solid;">image/gif</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">JPEG图形，.jpeg, .jpg文件</td> 
 <td style="border:1pt solid;">image/jpeg</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">au声音，.au文件</td> 
 <td style="border:1pt solid;">audio/basic</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">MIDI音乐，mid,.midi文件</td> 
 <td style="border:1pt solid;">audio/midi,audio/x-midi</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">RealAudio音乐，.ra, .ram文件</td> 
 <td style="border:1pt solid;">audio/x-pn-realaudio</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">MPEG，.mpg,.mpeg文件</td> 
 <td style="border:1pt solid;">video/mpeg</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">AVI，.avi文件</td> 
 <td style="border:1pt solid;">video/x-msvideo</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">GZIP，.gz文件</td> 
 <td style="border:1pt solid;">application/x-gzip</td> 
 </tr> 
 <tr> 
 <td style="border:1pt solid;">TAR，.tar文件</td> 
 <td style="border:1pt solid;">application/x-tar</td> 
 </tr> 
 </tbody> 
</table>

如上图红圈所表示，可以看到POST Data 中的password和username数据；  
![ht12.gif][]

**7． Content** 统计显示收到的Http响应信息

![ht13.gif][]

**8． Stream**显示客户端发送的数据，然后服务器端返回的数据

以下用请求一个mail.163.com中的Logo图标为例说明：![ht14.gif][]  
  
![ht15.gif][]

**9．HttpWatch请求信息框**

![ht16.gif][]

*  Started: 表示开始记录请求一个URL时间
 *  Time: 表示记录请求耗费的时间
 *  Sent: 表示客户端向服务器端发送请求字节大小
 *  Reveived:表示客户端收到服务端发送请求字节大小
 *  Method: 表示请求URL方式
 *  Result: 表示服务器返回到客户端结果

**以下是Httpwatch中http状态码列表**

<table style="border-collapse:collapse;"> 
 <tbody> 
 <tr> 
 <td style="width:138.75pt;">200 </td> 
 <td>OK/Success status code </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">302 </td> 
 <td>Moved temporarily status code </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">304 </td> 
 <td>Not modified status code </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">401 </td> 
 <td>Access denied status code </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">404 </td> 
 <td>Page or file not found </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">Aborted </td> 
 <td>Internet Explorer aborted the HTTP request before a response was received </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">(Cache) </td> 
 <td>Content read from cache without sending an HTTP request to the server </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">ERROR_* </td> 
 <td>An error occurred such as ERROR_INTERNET_NAME_NOT_RESOLVED </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">2xx </td> 
 <td>Successful HTTP status code </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">3xx </td> 
 <td>Redirection HTTP status code </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">4xx </td> 
 <td>Client error HTTP status code </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">5xx </td> 
 <td>Server error HTTP status code </td> 
 </tr> 
 </tbody> 
</table>

**详细Http状态查询，可以参考这个**

<table> 
 <tbody> 
 <tr> 
 <td style="width:52.5pt;">态代码 </td> 
 <td>状态信息 </td> 
 <td>含义 </td> 
 </tr> 
 <tr> 
 <td>100 </td> 
 <td>Continue </td> 
 <td>初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新） </td> 
 </tr> 
 <tr> 
 <td>101 </td> 
 <td>Switching Protocols </td> 
 <td>服务器将遵从客户的请求转换到另外一种协议（HTTP 1.1新） </td> 
 </tr> 
 <tr> 
 <td>200 </td> 
 <td>OK </td> 
 <td>一切正常，对GET和POST请求的应答文档跟在后面。 </td> 
 </tr> 
 <tr> 
 <td>201 </td> 
 <td>Created </td> 
 <td>服务器已经创建了文档，Location头给出了它的URL。 </td> 
 </tr> 
 <tr> 
 <td>202 </td> 
 <td>Accepted </td> 
 <td>已经接受请求，但处理尚未完成。 </td> 
 </tr> 
 <tr> 
 <td>203 </td> 
 <td>Non-Authoritative Information </td> 
 <td>文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝（HTTP 1.1新）。 </td> 
 </tr> 
 <tr> 
 <td>204 </td> 
 <td>No Content </td> 
 <td>没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。 </td> 
 </tr> 
 <tr> 
 <td>205 </td> 
 <td>Reset Content </td> 
 <td>没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。 </td> 
 </tr> 
 <tr> 
 <td>206 </td> 
 <td>Partial Content </td> 
 <td>客户发送了一个带有Range头的GET请求，服务器完成了它（HTTP 1.1新）。 </td> 
 </tr> 
 <tr> 
 <td>300 </td> 
 <td>Multiple Choices </td> 
 <td>客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。 </td> 
 </tr> 
 <tr> 
 <td>301 </td> 
 <td>Moved Permanently </td> 
 <td>客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。 </td> 
 </tr> 
 <tr> 
 <td>302 </td> 
 <td>Found </td> 
 <td>类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”。 出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求http://host/~user（缺少了后面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。 </td> 
 </tr> 
 <tr> 
 <td>303 </td> 
 <td>See Other </td> 
 <td>类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP 1.1新）。 </td> 
 </tr> 
 <tr> 
 <td>304 </td> 
 <td>Not Modified </td> 
 <td>客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。 </td> 
 </tr> 
 <tr> 
 <td>305 </td> 
 <td>Use Proxy </td> 
 <td>客户请求的文档应该通过Location头所指明的代理服务器提取（HTTP 1.1新）。 </td> 
 </tr> 
 <tr> 
 <td>307 </td> 
 <td>Temporary Redirect </td> 
 <td>和 302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才 能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只 能跟随对GET请求的重定向。（HTTP 1.1新） </td> 
 </tr> 
 <tr> 
 <td>400 </td> 
 <td>Bad Request </td> 
 <td>请求出现语法错误。 </td> 
 </tr> 
 <tr> 
 <td>401 </td> 
 <td>Unauthorized </td> 
 <td>客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。 </td> 
 </tr> 
 <tr> 
 <td>403 </td> 
 <td>Forbidden </td> 
 <td>资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。 </td> 
 </tr> 
 <tr> 
 <td>404 </td> 
 <td>Not Found </td> 
 <td>无法找到指定位置的资源。这也是一个常用的应答。 </td> 
 </tr> 
 <tr> 
 <td>405 </td> 
 <td>Method Not Allowed </td> 
 <td>请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用。（HTTP 1.1新） </td> 
 </tr> 
 <tr> 
 <td>406 </td> 
 <td>Not Acceptable </td> 
 <td>指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容（HTTP 1.1新）。 </td> 
 </tr> 
 <tr> 
 <td>407 </td> 
 <td>Proxy Authentication Required </td> 
 <td>类似于401，表示客户必须先经过代理服务器的授权。（HTTP 1.1新） </td> 
 </tr> 
 <tr> 
 <td>408 </td> 
 <td>Request Timeout </td> 
 <td>在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。（HTTP 1.1新） </td> 
 </tr> 
 <tr> 
 <td>409 </td> 
 <td>Conflict </td> 
 <td>通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。（HTTP 1.1新） </td> 
 </tr> 
 <tr> 
 <td>410 </td> 
 <td>Gone </td> 
 <td>所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。（HTTP 1.1新） </td> 
 </tr> 
 <tr> 
 <td>411 </td> 
 <td>Length Required </td> 
 <td>服务器不能处理请求，除非客户发送一个Content-Length头。（HTTP 1.1新） </td> 
 </tr> 
 <tr> 
 <td>412 </td> 
 <td>Precondition Failed </td> 
 <td>请求头中指定的一些前提条件失败（HTTP 1.1新）。 </td> 
 </tr> 
 <tr> 
 <td>413 </td> 
 <td>Request Entity Too Large </td> 
 <td>目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头（HTTP 1.1新）。 </td> 
 </tr> 
 <tr> 
 <td>414 </td> 
 <td>Request URI Too Long </td> 
 <td>URI太长（HTTP 1.1新）。 </td> 
 </tr> 
 <tr> 
 <td>416 </td> 
 <td>Requested Range Not Satisfiable </td> 
 <td>服务器不能满足客户在请求中指定的Range头。（HTTP 1.1新） </td> 
 </tr> 
 <tr> 
 <td>500 </td> 
 <td>Internal Server Error </td> 
 <td>服务器遇到了意料不到的情况，不能完成客户的请求。 </td> 
 </tr> 
 <tr> 
 <td>501 </td> 
 <td>Not Implemented </td> 
 <td>服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求。 </td> 
 </tr> 
 <tr> 
 <td>502 </td> 
 <td>Bad Gateway </td> 
 <td>服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。 </td> 
 </tr> 
 <tr> 
 <td>503 </td> 
 <td>Service Unavailable </td> 
 <td>服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。 </td> 
 </tr> 
 <tr> 
 <td>504 </td> 
 <td>Gateway Timeout </td> 
 <td>由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1新） </td> 
 </tr> 
 <tr> 
 <td>505 </td> 
 <td>HTTP Version Not Supported </td> 
 <td>服务器不支持请求中所指明的HTTP版本。（HTTP 1.1新） </td> 
 </tr> 
 </tbody> 
</table>

**以下是Httpwatch中的URL的类型列表**

<table style="border-collapse:collapse;"> 
 <tbody> 
 <tr> 
 <td style="width:138.75pt;">text/html </td> 
 <td>Normal html based content </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">text/css </td> 
 <td>Cascading style sheets </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">text/xml </td> 
 <td>XML data, e.g. SOAP requests and responses </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">text/* </td> 
 <td>Any textual content type including all the above types </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">image/gif </td> 
 <td>GIF image </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">image/jpg </td> 
 <td>JPEG image </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">image/* </td> 
 <td>Any image including gifs, jpgs and png files </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">application/x-javascript </td> 
 <td>Javascript </td> 
 </tr> 
 <tr> 
 <td style="width:138.75pt;">application/* </td> 
 <td>Any application content, e.g. flash files (application/x-shockwave-flash) </td> 
 </tr> 
 </tbody> 
</table>

**二、工具栏**

工具栏中列出了常用的命令按钮，如下图  
![449110_1292984342rlk0.gif][]  
下面我们来看看这些按钮都有什么用

<table> 
 <tbody> 
 <tr> 
 <td> <img src="http://hi.csdn.net/attachment/201012/22/449110_12929858226G1K.gif" alt=""> </td> 
 <td> 开始录制，点击该按钮后再访问你想分析的页面，HttpWatch就会录制下所有的HTTP请求信息了 </td> 
 </tr> 
 <tr> 
 <td> <img src="http://hi.csdn.net/attachment/201012/22/449110_1292987080O55W.gif" alt=""> </td> 
 <td> 停止录制 </td> 
 </tr> 
 <tr> 
 <td> <img src="http://hi.csdn.net/attachment/201012/22/449110_1292988550My3M.gif" alt=""> </td> 
 <td> 清除录制的日志 </td> 
 </tr> 
 <tr> 
 <td> <img src="http://hi.csdn.net/attachment/201012/22/449110_1292989070Llqu.gif" alt=""> </td> 
 <td> 在其子菜单中有很多和视图相关的设置选项 </td> 
 </tr> 
 <tr> 
 <td> <img src="http://hi.csdn.net/attachment/201012/22/449110_1292995436801j.gif" alt=""> </td> 
 <td> 显示/隐藏摘要视图 </td> 
 </tr> 
 <tr> 
 <td> <img src="http://hi.csdn.net/attachment/201012/22/449110_1292997304Z6NC.gif" alt=""> </td> 
 <td> 查找 </td> 
 </tr> 
 <tr> 
 <td> <img src="http://hi.csdn.net/attachment/201012/22/449110_1292997377blS4.gif" alt=""> </td> 
 <td> 过滤，这个功能很常用，因为经常录制的日志会很多，但实际用于分析的很少，所以常常需要设置过滤条件 </td> 
 </tr> 
 <tr> 
 <td> <img src="http://hi.csdn.net/attachment/201012/22/449110_1292997422963m.gif" alt=""> </td> 
 <td> 保存，直接保存是保存为.hwl文件，子菜单中支持导出为CSV、XML、HAR等格式 </td> 
 </tr> 
 <tr> 
 <td> <img src="http://hi.csdn.net/attachment/201012/22/449110_1292997487223J.gif" alt=""> </td> 
 <td> 打印 </td> 
 </tr> 
 <tr> 
 <td> <img src="http://hi.csdn.net/attachment/201012/22/449110_1292997537T46m.gif" alt=""> </td> 
 <td> 在其子菜单中包含一些常用功能，如清除Cache、清除Cookie等 </td> 
 </tr> 
 <tr> 
 <td> <img src="http://hi.csdn.net/attachment/201012/22/449110_1292997602888z.gif" alt=""> </td> 
 <td> 帮助信息 </td> 
 </tr> 
 </tbody> 
</table>

**三、请求网格**

请求网格默认显示的列如下所示，可以通过View子菜单下的Select Columns来设置要显示的列。  
![449110_12945761365W8n.gif][]  
各个字段的解释如下表：

<table> 
 <tbody> 
 <tr> 
 <td>Started</td> 
 <td>请求开始的时间，第1项为绝对时间，后面的都是相对于这1项的偏移量</td> 
 </tr> 
 <tr> 
 <td>Time Chart</td> 
 <td>同一个页面中，某一请求相对于其它请求的时间图形</td> 
 </tr> 
 <tr> 
 <td>!</td> 
 <td>当有告警被发现时，显示该标志</td> 
 </tr> 
 <tr> 
 <td>Time</td> 
 <td>从发送该请求到接收完响应数据的时间</td> 
 </tr> 
 <tr> 
 <td>Sent</td> 
 <td>发送数据的总量，单位为byte，包括header和POST data的数据量</td> 
 </tr> 
 <tr> 
 <td>Received</td> 
 <td>接收数据的总量，单位为byte，因返回的状态码不同值也会不同： 200：显示值为header和content的大小。如果内容被压缩了，显示值为已压缩content的大小加上未压缩header的大小。当使用SSL时，显示值为加密后的大小，通常比未加密的值大些。 304：显示值为header的大小。 (Cache)：显示值为0。</td> 
 </tr> 
 <tr> 
 <td>Method</td> 
 <td>请求发送时所用的方法，如GET、POST等</td> 
 </tr> 
 <tr> 
 <td>Result</td> 
 <td>请求成功时将显示状态码，如200表示OK。 (Cache)：表示数据是从缓存中读取的。 (Aborted)：表示在完成之前中止了操作，例如一个图片正在下载中，但你点击了一个转向其它页面的链接。</td> 
 </tr> 
 <tr> 
 <td>Type</td> 
 <td>以图形表示内容的类型</td> 
 </tr> 
 <tr> 
 <td>URL</td> 
 <td>请求的地址</td> 
 </tr> 
 </tbody> 
</table>

通常情况下，请求网格中的记录以不同页面为依据进行分组，组的标题栏如下图所示：  
![449110_1294582834Cm95.gif][]  
前面是请求开始的时间，后面是页面的标题，这几个字大家再熟悉不过了吧。  
通常有两种颜色的分组，页的标题栏为蓝色表示是一个普通页面，页的标题栏为黄色表示是在前一个页面进行的动态改变，例如AJAX调用。  
仔细观察Time Chart这一列，发现其中的条形图有着不同的颜色段，而且还有几条竖线，现在来详细讲解下。  
一次请求是由很多阶段组成的，例如DNS的转换、建立连接、发送请求等，而不同的请求所经历的阶段也不完全相同，时间条形图的各个段说明如下：

<table> 
 <tbody> 
 <tr> 
 <td><img src="http://hi.csdn.net/attachment/201101/9/449110_1294584446rtyL.gif" alt=""></td> 
 <td>Blocked</td> 
 <td>前期预处理时间(如cache搜索)和等待网络可用的时间</td> 
 </tr> 
 <tr> 
 <td><img src="http://hi.csdn.net/attachment/201101/9/449110_1294584490nj7R.gif" alt=""></td> 
 <td>DNS Lookup</td> 
 <td>将主机名转换成IP地址的时间</td> 
 </tr> 
 <tr> 
 <td><img src="http://hi.csdn.net/attachment/201101/9/449110_1294584554IuWA.gif" alt=""></td> 
 <td>Connect</td> 
 <td>创建连接的时间</td> 
 </tr> 
 <tr> 
 <td><img src="http://hi.csdn.net/attachment/201101/9/449110_1294584594kcDe.gif" alt=""></td> 
 <td>Send</td> 
 <td>发送请求的时间</td> 
 </tr> 
 <tr> 
 <td><img src="http://hi.csdn.net/attachment/201101/9/449110_1294584632K0Dz.gif" alt=""></td> 
 <td>Wait</td> 
 <td>等待服务器响应的时间</td> 
 </tr> 
 <tr> 
 <td><img src="http://hi.csdn.net/attachment/201101/9/449110_1294584670Hqb7.gif" alt=""></td> 
 <td>Receive</td> 
 <td>接收响应的时间</td> 
 </tr> 
 <tr> 
 <td><img src="http://hi.csdn.net/attachment/201101/9/449110_1294584700ez14.gif" alt=""></td> 
 <td>Cache Read</td> 
 <td>从缓存中读取数据的时间</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>TTFB</td> 
 <td>Time To First Byte，网络开始初始化到接收到第1个字节数据的时间</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>Network</td> 
 <td>网络开始初始化到网络使用完成的时间</td> 
 </tr> 
 </tbody> 
</table>

一个页面从开始下载数据到最终完全显示，中间会执行一系列的页面事件，而IE和Firefox中的事件也不完全相同，说明如下：

<table> 
 <tbody> 
 <tr> 
 <td><img src="http://hi.csdn.net/attachment/201101/9/449110_1294584594kcDe.gif" alt="" width="5" height="19"></td> 
 <td>Render Start</td> 
 <td>开始渲染事件，当浏览器开始显示页面时触发</td> 
 </tr> 
 <tr> 
 <td><img src="http://hi.csdn.net/attachment/201101/9/449110_1294584700ez14.gif" alt="" width="6" height="19"></td> 
 <td>DOM Load</td> 
 <td>当页面的DOM已加载完毕并可以提供给脚本调用时触发 IE中不显示，Firefox中对应DOMContentLoaded事件</td> 
 </tr> 
 <tr> 
 <td><img src="http://hi.csdn.net/attachment/201101/9/449110_1294584632K0Dz.gif" alt="" width="6" height="18"></td> 
 <td>Page Load</td> 
 <td>页面载入事件，当DOM和图片都加载完成后触发 对应onload事件</td> 
 </tr> 
 <tr> 
 <td><img src="http://hi.csdn.net/attachment/201101/9/449110_1294584446rtyL.gif" alt="" width="5" height="18"></td> 
 <td>HTTP Load</td> 
 <td>标志着所有的HTTP或HTTPS请求结束</td> 
 </tr> 
 </tbody> 
</table>

上面讲了一些基础，下面我们举个例子来具体分析下，还是录制的百度的页面，如下图：  
![449110_1294588424EgEh.gif][]

*  首先看标记为1和2的两个分组标题部分，标记1的开始时间为全0，标记2的开始时间为00:00:06.200，这个时间是相对于标记1的开始时间的一个偏移量，也就是说页面2是在页面1请求后的6秒左右再发起请求的。
 *  然后来看看标记3，这里有很多的时间值，每个时间值都表示该请求发起的时间，这个时间是相对于页面开始时间的偏移量的，比如看页面2的那几个时间，都是相对于页面2的开始时间计算的。
 *  再看看标记4，这是一个时间条形图，说明这个请求是在0.146秒开始发起的，先有一段Blocked时间，然后建立连接，再发送数据等等，可以看到，这个条形图并不是向左靠齐的，因为它是相对于该页面中其它请求而言的。
 *  把标记5、6、7连起来看，标记5说明在0.259秒的时候所有请求都发送完毕，标记6说明在该时间点页面开始显示，标记7说明在0.342秒的时候所有DOM和图片都已加载完成并开始执行onload事件。
 *  最后来看看图片中被黄色标记了的一行，首先，感叹号一列中为空，说明没有告警信息，Time列中显示为0.113，说明该请求共耗时0.113 秒，Sent列为383和Received列为371，说明该请求发送了383字节的数据和接收了371字节的数据，Methoed列为GET，说明使用 的GET方法，Type列显示了一个图标，如果把鼠标移到上面，会显示image/gif，说明请求的内容类型为gif图片，URL列显示了请求的地址。

转载于:https://www.cnblogs.com/JoannaQ/p/3155983.html

[Http_www.httpwatch.com]: http://www.httpwatch.com
[ht3.gif]: /images/20220110/ebf43161cfb64a469107f749b02468ca.png
[ht4.gif]: /images/20220110/bffbd4ffb6a540249301a84d213f9bb9.png
[ht5.gif]: /images/20220110/8a648bf717984c8ab6d94c0a098345f6.png
[ht6.gif]: /images/20220110/9613d8b74ff7495bac82eaf2a9b675b2.png
[ht9.gif]: /images/20220110/6a2fd85c2b9340358b6394b1a1e22350.png
[ht10.gif]: /images/20220110/6f5de953f67c488f89dc9aa0dd4d8651.png
[ht11.gif]: /images/20220110/235cc27b64b64666a4d93ff0a26c4e80.png
[ht12.gif]: /images/20220110/d6da8f142d1d40ec85da6e6d35f7bcca.png
[ht13.gif]: /images/20220110/35321096463f471682859c9e8f0a2175.png
[ht14.gif]: /images/20220110/48877dccafa2418aa479b984b9049fea.png
[ht15.gif]: /images/20220110/398c183d094141d9955093fd32b0de38.png
[ht16.gif]: /images/20220110/3021eb23c4c5452791c1c57247392647.png
[449110_1292984342rlk0.gif]: /images/20220110/0e38ad75a0f7417e86aa47667c74a0f5.png
[449110_12945761365W8n.gif]: /images/20220110/c6057d88e0234421806d815d01747e73.png
[449110_1294582834Cm95.gif]: /images/20220110/2eb12608f5c14609a170d1904e4981cf.png
[449110_1294588424EgEh.gif]: /images/20220110/dea5460de7054820a4621b64b73f2ab9.png