很多人抱怨上网速度慢，但是却不知道慢在哪里？这样给网站技术开发人员也带来了很大的麻烦，因为不知道问题的症结所在，也就无从下手解决问题。这里给大家介绍一款软件：httpwatch。使用该软件可以有效检测网页中各个元素的加载速度和加载时间，从而给技术人员有价值参考。很多时候有客户抱怨打开网页速度慢，但是我们自己去访问却很流畅。发生这样的问题时，我们可以做如下操作。
1. 将浏览器的缓存文件全部清空。因为很有可能一些网页元素已经被缓存在本地电脑中了，如果不清空的话，不能反应真实的访问速度。
2. 另外有时候，我们技术开发人员使用的上网带宽条件较好，而客户使用的上网带宽条件较差。比如我们使用ADSL 2M下载一个1M的FLASH可能也就3秒钟，但是如果客户使用的是512K ADSL或者是更低的，那么他的打开时间就要扩大好几倍。
为了获得这样的体验，我们甚至可以在使用httpwatch的同时，打开迅雷的下载软件，从而人为造成本地网络环境较差，以获得更加明显的数据。
一、概述
HttpWatch强大的网页数据分析工具。集成在Internet Explorer工具栏。包括网页摘要。Cookies管理、缓存管理、消息头发送/接受、字符查询.POST 数据和目录管理功能。报告输出 HttpWatch 是一款能够收集并显示页页深层信息的软件。它不用代理服务器或一些复杂的网络监控工具，就能够在显示网页同时显示网页请求和回应的日志信息。甚至可以显示浏览器缓存和IE之间的交换信息。只需要选择相应的网站，软件就可以对网站与IE之间的需求回复的通讯情况进行分析并在同一界面显示其相应日志记录。每一个HTTP记录都可以详细的分析其 Cookies、消息头、字符查询等信息。支持HTTPS及分析报告输出为XML、CSV等格式。
下载后，直接安装即可，一路Next。安装完毕后，关闭所有的IE浏览器，然后重新打开，就可以在IE浏览器上方发现增加了一个小按钮。
三、基本功能介绍
启动Httpwatch
从IE的“查看”—“浏览器栏”—“HttpWatch”启动HttpWatch。如下图所示：
以下是HttpWatch程序界面
以下用登录我的邮箱www.126.com例子来展示Httpwatch:
3.1 Overview（摘要）
表示选定某个信息显示其摘要信息
如上图红框所示：
URL： http://news.163.com/special/0001127H/tomailnews.html
Result：200
请求的URL是http://news.163.com/special/0001127H/tomailnews.html ，返回的Http状态代码结果200，表示成功；
Display URL–
普通浏览器查找 URL http://news.163.com/special/0001127H/tomailnews.html
浏览器请求的URL
Started At 2009-May-19 15:35:21.511 (local time)
请求开始时间(实际记录的是本机的时间)
Connect 连接到 IP 地址 '60.191.80.78'
请求的网址的IP地址
Http Request Unconditional request sent for
http://news.163.com/special/0001127H/tomailnews.html
Http请求，当浏览器向Web服务器发出请求时，它向服务器传递了一个数据块，也就是请求信息
Http Response Headers and content returned
Http响应，当浏览器接受到web服务器返回的信息时
3.2 Header（报头）
表示从Web服务器发送和接受的报头信息，后面我就不抓图了，英文不好的，就下中文版的。
Http请求头发送信息
Headers Sent value
Request-Line GET /external/closea_d.js HTTP/1.1
以上代码中“GET”代表请求方法，“closea_d.js”表示URI，“HTTP/1.1代表协议和协议的版本。
Accept */*
指示能够接受的返回数据的范围, */*表示所有
Accept-Encoding gzip, deflate
Accept-Encoding表明了浏览器可接受的除了纯文本之外的内容编码的类型，比如gzip压缩还是deflate压缩内容。
Accept-Language zh-cn
表示能够接受的返回数据的语言
Connection Keep-Alive
保持Tcp请求连接
备注：在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能，才能进行更层协议的连接，因此，首先要建立TCP连接，一般TCP连接的端口号是80
Cookie vjuids=-1b9063da8.1173d33f879.0.9aab8b85a459d; vjlast=1199406314; _ntes_nnid=a1e69963f40453af8a9ad171cc4cd8da,0|tech|; NTES_UFC=3000000100000000000000000000000000000000000000000000000000000000; Province=021; City=021; ntes_mail_firstpage=normal; NTES_SESS=68LUOUH9ewcCBFyN5OXZ_0qf._IOMCkFscaGYrooXpjtVF7r8Vx7jAzg7HGdWo00GQEn1ZmrZcX7FMAXnb052r8XOFZZYk.hN; NETEASE_SSN=mayingbao2002; NETEASE_ADV=11&23&1199409658752;
Coremail=VDeAMrrrDFaTa%XCVwJiXXsRLSLkbLhZXXZGqPJkEXFKNt
Cookie没什么说的就是客户端记录相关信息
Host mimg.163.com
请求连接的主机名称’
Referer Http://g1a114.mail.163.com/a/p/main.htm?sid=XCVwJiXXsRLSLkbLhZXXZGqPJkEXFKNt
包含一个URL，用户从该URL代表的页面出发访问当前请求的页面
User-Agent Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
客户端标识浏览器类型
Http请求头返回信息
Headers Received Value
Status-Line Http/1.0 200 ok
表示Http服务端响应返回200
Accept-Ranges bytes
Http请求范围的度量单位
Age 117
表示Http接受到请求操作响应后的缓存时间
Cache-Control max-age=3600
一个用于定义缓存指令的通用头标
Connection keep-alive
保持Tcp请求连接
Content-Type application/x-javascript
标明发送或者接收的实体的MIME类型
Date Fri, 04 Jan 200801:12:26 GMT
发送HTTP消息的日期
Etag "10f470-734-b32eb00"
一种实体头标，它向被发送的资源分派一个唯一的标识符
Expires Fri, 04 Jan 200802:12:26 GMT
指定实体的有效期
Last-Modified Fri, 04 Jan 200801:01:00 GMT
指定被请求资源上次被修改的日期和时间
Server Apache
一种标明Web服务器软件及其版本号的头标
X-Cache HIT from mimg68.nets.com
表示你的 http request 是由 proxy server 回的
3.3 Cookies
显示Cookies信息
Cookies Direction Value
City Sent 027
City=027，其实是我126邮箱中设置城市信息值，在Cookies中记录为027(代表武汉这个城市)
备注：
什么是cookie？Cookie是一种在客户端保持HTTP状态信息的技术，Cookie是在浏览器访问WEB服务器的某个资源时，由WEB服务器在HTTP响应消息头中附带传送给浏览器的一片数据，WEB服务器传送给各个客户端浏览器的数据是可以各不相同的。
浏览器可以决定是否保存这片数据，一旦WEB浏览器保存了这片数据，那么它在以后每次访问该WEB服务器时，都应在HTTP请求头中将这片数据回传给WEB服务器。
显然，Cookie最先是由WEB服务器发出的，是否发送Cookie和发送的Cookie的具体内容，完全是由WEB服务器决定的。
Cookie在浏览器与WEB服务器之间传送的过程如图下图所示。
3.4 Cache(缓存)
显示在请求完成前后的浏览器缓存里URL地址栏里的详细信息
Last Aceess（最后访问）：07:35:21Tuesday, May 19, 2009 GMT
3.5 Query String(查询字符串)
显示查询字符串被用在是传递参数url中。
Username：ctfysj@126.com
loginCookie：MNEzY6ZlnqCMGj1..Z8H5dq2K9rQMYoMh0x05di_B0p8EEof9mSWKRhuFm1YhpWQDZ
sInfoCookie：1242528503|1
url：http://entry.mail.126.com/cgi/ntesdoor?hid=10010102&lightweight=1&verify***************
Username字符串，是存在于请求的URL传递的参数。
3.6 POST Data
以下是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方式提交数据编码几种方式：
|
text/plain |
以纯文本的形式传送 |
|
application/x-www-form-urlencoded |
默认的编码形式，即URL编码形式 |
|
multipart/form-data |
MIME编码，上传文件的表单必须选择该 |
Mime Type指的是如text/html,text/xml等类型
MIME（Multipurpose Internet Email Extension），意为多用途Internet邮件扩展，它是一种多用途网际邮件扩充协议，在1992年最早应用于电子邮件系统，但后来也应用到浏览器。服务器会将它们发送的多媒体数据的类型告诉浏览器，而通知手段就是说明该多媒体数据的MIME类型，从而让浏览器知道接收到的信息哪些是MP3文件，哪些是JPEG文件等等。当服务器把把输出结果传送到浏览器上的时候，浏览器必须启动适当的应用程序来处理这个输出文档。在HTTP中，MIME类型被定义在<head>、</head>部分的Content-Type中。
|
数据类型 |
MIME类型 |
|
超文本标记语言文本htm：.html文件 |
text/html（数据类别是text，种类是html，下同） |
|
纯文本：.txt文件 |
text/plain |
|
RTF文本：.rtf文件 |
application/rtf |
|
GIF图形：.gif文件 |
image/gif |
|
JPEG图形：.jpeg, .jpg文件 |
image/jpeg |
|
au声音：.au文件 |
audio/basic |
|
MIDI音乐：mid,.midi文件 |
audio/midi,audio/x-midi |
|
RealAudio音乐：.ra, .ram文件 |
audio/x-pn-realaudio |
|
MPEG：.mpg,.mpeg文件 |
video/mpeg |
|
AVI：.avi文件 |
video/x-msvideo |
|
GZIP：.gz文件 |
application/x-gzip |
|
TAR：.tar文件 |
application/x-tar |
备注：get方法和Post方法区别
GET方法：
GET方法是默认的HTTP请求方法，我们日常用GET方法来提交表单数据，然而用GET方法提交的表单数据只经过了简单的编码，同时它将作为URL的一部分向Web服务器发送，因此，如果使用GET方法来提交表单数据就存在着安全隐患上。例如
Http://127.0.0.1/login.jsp?Name=zhangshi&Age=30&Submit=%cc%E+%BD%BB
从上面的URL请求中，很容易就可以辩认出表单提交的内容。（？之后的内容）另外由于GET方法提交的数据是作为URL请求的一部分所以提交的数据量不能太大
POST方法：
POST方法是GET方法的一个替代方法，它主要是向Web服务器提交表单数据，尤其是大批量的数据。POST方法克服了GET方法的一些缺点。通过POST方法提交表单数据时，数据不是作为URL请求的一部分而是作为标准数据传送给Web服务器，这就克服了GET方法中的信息无法保密和数据量太小的缺点。因此，出于安全的考虑以及对用户隐私的尊重，通常表单提交时采用POST方法。
3.7 Content（内容信息）
统计显示收到的Http响应信息
3.8 Stream（流）
显示客户端发送的数据，然后服务器端返回的数据
客户端发送总数据：901 bytes sent to 218.107.55.86:80
客户端接受到服务器端返回总数据：247 bytes received by 192.168.52.188.10720
http://mimg.163.com/logo/163logo.gif
左边：客户端向服务器端发送数据流
1 GET /logo/163logo.gif HTTP/1.1
以上代码中“GET”代表请求方法，“closea_d.js”表示URI，“HTTP/1.1代表协议和协议的版本。
2 Accept: */*
指示能够接受的返回数据的范围, */*表示所有
3 Referer: http://g1a114.mail.163.com/a/f/js3/0712240954/index_v6.htm
包含一个URL，用户从该URL代表的页面出发访问当前请求的页面
4 Accept-Language: zh-cn
表示能够接受的返回数据的语言
5 Accept-Encoding: gzip, deflate
Accept-Encoding表明了浏览器可接受的除了纯文本之外的内容编码的类型，比如gzip压缩还是deflate压缩内容。
6 User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
客户端标识浏览器类型
7 Host: mimg.163.com
访问地址主机标识地址
8 Connection: Keep-Alive
保持Tcp连接(前台已有备注，这里不做说明)
9Cookie: vjuids=-1b9063da8.1173d33f879.0.9aab8b85a459d; vjlast=1199406314; _ntes_nnid=a1e69963f40453af8a9ad171cc4cd8da,0|tech|; NTES_UFC=3000000100000000000000000000000000000000000000000000000000000000; Province=021; City=021; ntes_mail_firstpage=normal; NTES_SESS=68LUOUH9ewcCBFyN5OXZ_0qf._IOMCkFscaGYrooXpjtVF7r8Vx7jAzg7HGdWo00GQEn1ZmrZcX7FMAXnb052r8XOFZZYk.hN; NETEASE_SSN=mayingbao2002; NETEASE_ADV=11&23&1199409658752; Coremail=VDeAMrrrDFaTa%XCVwJiXXsRLSLkbLhZXXZGqPJkEXFKNt; wmsvr_domain=g1a114.mail.163.com
Cookies没什么说的，前面已列举了
右边：服务器端向客户端返回数据流
1 HTTP/1.0 304 Not Modified
服务器告诉客户，原来缓冲的文档还可以继续使用。
2 Date: Mon, 31 Dec 200721:42:27 GMT
发送HTTP消息的日期
3 Content-Type: image/gif
服务器返回请求类型是image/gif
4 Expires: Wed, 30 Jan 200821:42:27 GMT
指定实体的有效期
5 Last-Modified: Wed, 19 Apr 200603:46:16 GMT
指定被请求资源上次被修改的日期和时间
6 Age: 5607
表示Http接受到请求操作响应后的缓存时间
7 X-Cache: HIT from mimg68.nets.com
表示你的 http request 是由 proxy server 回的
8 Connection: keep-alive
保持Tcp请求连接状态
3.9 HttpWatch请求信息框
菜单区如上图红框所示：
Started（已开始）: 表示开始记录请求一个URL时间
Time（时间）: 表示记录请求耗费的时间
Sent: 表示客户端向服务器端发送请求字节大小
Reveived:表示客户端收到服务端发送请求字节大小
Method（方法）: 表示请求URL方式
Result（结果）: 表示服务器返回到客户端结果
以下是Httpwatch中http状态码列表
Httpwatch中http状态码列表
URL:列出请求的URL具体地址
以下主要是HttpWatch菜单区的功能介绍:
3.10 Record
点击Record按钮开始录制Http请求操作
3.11 Stop
点击Stop按钮停止录制Http请求操作
3.12 Clear
点击Clear按钮,清除所有录制Log记录:
3.13 Summary
点击Summary按钮,显示或隐藏所有请求信息概述
Perfomance信息如上图所示：
Elapsed time Http URL请求时间总和
Network Round Trips 没搞明白
Downloaded Data 客户端接受到服务器端传来的数据总和
Uploaded Data 客户端发送到服务器端数据总和
Http compression savings http数据压缩
DNS Lookups DNS解析
Tcp Connets Tcp连接
3.15 Filter
点击Filter按钮, 可以打开一个过滤器对话框。假设怀疑yun.js有问题，当然你要对js程序要有了解，可使用Filter过滤器，直接将需要的yun.js找出，查看其是否存在问题！
3.16 Save
点击Save按钮,可以打开保存对话框,如下图所示:
可以保存的格式为.hwl (Httpwatch Log文件格式), .Xml, CVS格式
3.17 Help
点击Help按钮,没什么说的,就是英语Help