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

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

本节书摘来自异步社区《jQuery与JavaScript入门经典》一书中的第2章,第2.5节,作者:【美】Brad Dayley著,更多章节内容可以访问云栖社区“异步社区”公众号查看

2.5 分析网络流量

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

screenshot

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

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

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

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

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

screenshot

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

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

  • HTML:显示响应包含的HTML文档的渲染版本。
  • Cookies:显示请求涉及的Cookie及其值。
  • JSON:显示JSON代码,这是一个可展开的树,导航起来非常方便。以JSON方式接收AJAX请求的响应时,这很有用,让您能够查看从服务器获取的数据。
相关文章
|
3天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
10 3
|
6天前
|
安全 网络安全 数据库
01-Web 网络安全纵观与前景分析
01-Web 网络安全纵观与前景分析
|
6天前
|
机器学习/深度学习 自然语言处理 运维
随机森林填充缺失值、BP神经网络在亚马逊评论、学生成绩分析研究2案例合集2
随机森林填充缺失值、BP神经网络在亚马逊评论、学生成绩分析研究2案例合集
|
6天前
|
机器学习/深度学习 存储 数据采集
随机森林填充缺失值、BP神经网络在亚马逊评论、学生成绩分析研究2案例合集1
随机森林填充缺失值、BP神经网络在亚马逊评论、学生成绩分析研究2案例合集
|
6天前
|
机器学习/深度学习 监控 数据可视化
R语言SOM神经网络聚类、多层感知机MLP、PCA主成分分析可视化银行客户信用数据实例2
R语言SOM神经网络聚类、多层感知机MLP、PCA主成分分析可视化银行客户信用数据实例
|
6天前
|
机器学习/深度学习 数据可视化 算法
R语言SOM神经网络聚类、多层感知机MLP、PCA主成分分析可视化银行客户信用数据实例1
R语言SOM神经网络聚类、多层感知机MLP、PCA主成分分析可视化银行客户信用数据实例
|
7天前
|
数据采集 JavaScript 数据可视化
Node.js爬虫在租房信息监测与分析中的应用
Node.js爬虫在租房信息监测与分析中的应用
|
10天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
13天前
|
机器学习/深度学习 数据可视化 TensorFlow
Python用线性回归和TensorFlow非线性概率神经网络不同激活函数分析可视化
Python用线性回归和TensorFlow非线性概率神经网络不同激活函数分析可视化
|
13天前
|
XML 前端开发 JavaScript
【JavaScript技术专栏】JavaScript网络请求与Ajax技术
【4月更文挑战第30天】Ajax是Web开发中实现动态数据更新的关键技术,允许不刷新页面即从服务器获取数据。它结合了HTML/CSS、DOM、XML/JSON和JavaScript。`XMLHttpRequest`是传统的Ajax实现方式,而`fetch` API是现代、简洁的替代选项。Ajax应用实例展示了如何使用fetch在搜索框输入时异步获取并显示结果,提升了用户体验。掌握这些技术对前端开发者至关重要。