《jQuery与JavaScript入门经典》——2.5　分析网络流量

2.5　分析网络流量

调试JavaScript时，常用的一个极具价值的Firebug工具是网络流量分析器。要使用网络流量分析器，可单击Firebug中的标签Net（网络），如图2.25所示。它显示从浏览器向Web服务器发送的每个请求的信息，让您能够更深入地了解当前传输的数据、当前是否发送了请求以及请求的顺序是否正确。

图2.25显示了加载网页amazon.com涉及的网络流量。发出的请求很多，每个请求都在流量列表中占据一行。对于每个请求，都显示了如下信息。

• URL：请求的URL很有用。您可右击URL并复制它，还可在另一个选项卡或窗口中打开它。这让您能够调试单个请求而不是整个网页。
• 状态：我根据状态判断请求是否成功以及它是否还在运行。例如，网页可能因图像加载失败而看起来不对，使用Firebug选项卡“网络”很容易诊断这一点。
• 域：域很有趣，诊断跨域脚本是尤其如此。
• 大小：大小也很有用，让您能够快速找出需要大量磁盘空间和网络带宽的请求。
• 远程IP：请求的目标IP地址。
• 时间线：显示请求花费的时间，单位为毫秒。这对诊断响应缓慢的网页以及其他与速度相关的问题很有帮助。

对于有些复杂的网页，涉及的请求可能非常多。“网络”选项卡包含一些过滤器选项，让您能够只显示特定类型的请求，如HTML、CSS或JS。XHR表示AJAX用来通信的XMLHttpRequest，选择这个过滤器将只显示AJAX通信。

展开请求后，将显示大量其他有关请求的信息，如图2.26所示。在展开的请求中，包含的选项卡取决于请求和响应的类型，下面是一些最有用的内容。

• 头信息：显示发送的HTML请求和响应的头信息。通过要求发送特殊请求头的AJAX访问服务时，这很有用。

• 响应：内容随响应而异。例如，从Web服务器下载JavaScript文件时，将显示原始JavaScript。
• Post：只有POST请求包含该选项卡，它显示发送给服务器的POST请求包含的参数值。
• 缓存：显示缓存信息，如缓存的大小、最后一次使用的时间以及到期时间。调试JavaScript时，很多问题都是由于浏览器缓存了数据，因此不尝试获取新拷贝导致的。

注意：如果单击“网络”标签上的下拉箭头，将看到一个禁用浏览器缓存的选项。为调试并修复问题而更新了Web服务器上的文件时，这个选项很有用。选择该选项后，浏览器总是从Web浏览器获取最新的内容。

• HTML：显示响应包含的HTML文档的渲染版本。
• Cookies：显示请求涉及的Cookie及其值。
• JSON：显示JSON代码，这是一个可展开的树，导航起来非常方便。以JSON方式接收AJAX请求的响应时，这很有用，让您能够查看从服务器获取的数据。