《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请求的响应时,这很有用,让您能够查看从服务器获取的数据。
相关文章
|
11月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态网络的引擎
JavaScript:构建动态网络的引擎
|
10月前
|
数据采集 监控 网络安全
VMware Cloud Foundation Operations for Networks 9.0.1.0 发布 - 云网络监控与分析
VMware Cloud Foundation Operations for Networks 9.0.1.0 发布 - 云网络监控与分析
500 3
VMware Cloud Foundation Operations for Networks 9.0.1.0 发布 - 云网络监控与分析
|
10月前
|
机器学习/深度学习 大数据 关系型数据库
基于python大数据的青少年网络使用情况分析及预测系统
本研究基于Python大数据技术,构建青少年网络行为分析系统,旨在破解现有防沉迷模式下用户画像模糊、预警滞后等难题。通过整合多平台亿级数据,运用机器学习实现精准行为预测与实时干预,推动数字治理向“数据驱动”转型,为家庭、学校及政府提供科学决策支持,助力青少年健康上网。
|
11月前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
527 3
|
12月前
|
数据采集 存储 数据可视化
Python网络爬虫在环境保护中的应用:污染源监测数据抓取与分析
在环保领域,数据是决策基础,但分散在多个平台,获取困难。Python网络爬虫技术灵活高效,可自动化抓取空气质量、水质、污染源等数据,实现多平台整合、实时更新、结构化存储与异常预警。本文详解爬虫实战应用,涵盖技术选型、代码实现、反爬策略与数据分析,助力环保数据高效利用。
589 0
|
监控 安全 Linux
Arista CloudVision 2025.1 - 多云和数据中心网络自动化、监控和分析
Arista CloudVision 2025.1 - 多云和数据中心网络自动化、监控和分析
561 2
Arista CloudVision 2025.1 - 多云和数据中心网络自动化、监控和分析
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
763 159
|
运维 监控 安全
如何高效进行网络质量劣化分析与流量回溯分析?-AnaTraf
在数字化时代,网络质量分析与流量回溯对保障业务运行至关重要。网络拥塞、丢包等问题可能导致业务中断、安全隐患及成本上升。传统工具常缺乏细粒度数据,难以溯源问题。流量回溯分析可还原现场,助力精准排障。AnaTraf网络流量分析仪作为专业工具,能高效定位问题,提升团队响应力,降低运营风险。
如何高效进行网络质量劣化分析与流量回溯分析?-AnaTraf
|
大数据
“你朋友圈的真面目,大数据都知道!”——用社交网络分析看透人情世故
“你朋友圈的真面目,大数据都知道!”——用社交网络分析看透人情世故
626 16
|
监控 算法 JavaScript
基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
本文探讨局域网网络访问控制软件的技术框架,将其核心功能映射为图论模型,通过节点与边表示终端设备及访问关系。以JavaScript实现DFS算法,模拟访问权限判断,优化动态策略更新与多层级访问控制。结合流量监控数据,提升网络安全响应能力,为企业自主研发提供理论支持,推动智能化演进,助力数字化管理。
352 4