JavaScript监控网页网络请求

在Web开发时我们经常需要查看当前网页的网络请求情况，最常用的工具是各个浏览器内置的开发者工具。例如，用Chrome浏览器访问百度首页，在开发者工具中查看网页中的网络请求：

在开发者工具的Network面板可以清楚地了解每个网络请求的实际情况，包括文件名，请求方法，状态，请求类型等信息。

在桌面浏览器上开发比较容易，可以借助的工具也很多。我们把视线转移到移动设备上，开发移动版Web应用时则变得复杂起来。

由于屏幕的限制，在运行iOS和Android这类移动设备上的浏览器，它们并没有内置开发者工具，所以不能像上述那样直观的调试，也没有方便的工具来查看网页中的网络请求。

已有方案

针对于这个问题，目前主要有两种方案：

1. 在桌面浏览器上远程调试移动设备上的页面，

2. 使用代理工具如 Fiddler 来代理移动设备的网络请求

方案1优点是相对简单，不需要安装额外软件，上手成本比较低。缺点是每个浏览器只能远程调试对应的移动版的浏览器，例如调试iOS Safari上的网页需要在MacOS上使用Safari远程调试。调试Android 上Chrome浏览器的网页需要桌面版的Chrome才能调试。

方案2需要安装额外的代理软件，做一些配置，上手门槛较高。由于它代理了移动设备上所有的网络请求，需要筛除大量无关的请求。优点是可以调试所有的浏览器，解决了方案1的不足。

除了上述两种方案，我们也可以尝试用JavaScript代码嵌入网页中来监控网络请求。

使用Performance 接口

Performance接口允许我们访问当前网页中性能相关的信息，其中包含了每个网络请求的具体信息。目前已经在浏览器中得到了广泛支持。

在使用之前需要先检测它是否在当前浏览器中可用：

首先我们最关心的是如何用JavaScript获得页面中所有的网络请求。只需要调用 performance.getEntries() 即可返回网页中PeformanceEntry对象组成的数组。它的格式如下：

这个函数返回了所有的 PeformanceEntry，由于我们只关心网页中的资源加载情况，改用getEntriesByType() 方法帮助我们缩小数据范围：

在上图中，我们看到了当前页面中的资源请求的网络情况。对于每个资源，我们可以看到它含有一些属性，其中重要的有：

· name – entry的名字

· entryType –entry类型。由于我们调用 getEntriesByType() 方法时的参数为 resource，这里的值均为 resource。

· initiatorType – 资源的类型。如 “img”，“css”，“script”，“xmlhttprequest”等

假设你只想记录当前网页中的图片和Ajax请求情况，可以这样做：

这样就会筛选出你感兴趣的网络请求，如下：

到目前为止我们已经能够得到感兴趣的请求了。接下来这个问题随之而来：我们如何监测一个新的网络请求呢？

答案是 PerformanceObserver 接口。它会监测新的网络请求并且会允许传入一个回调函数来处理新的网络请求：

我们把上述代码应用到必应的图片搜索结果页面，效果如下：

在上图中，随着页面滚动会加载新的图片，这时我们的脚本监测到了新的网络请求，会把新的请求打印出来。

当然我们不会满足于把日志打印到控制台，那样对于移动端开发的帮助有限。我们可以把它们输出到网页上，例如我们可以把数据处理后展示到网页的一个浮层上。

我们可以修改之前的perf_observer回调函数，在其中调用printRequests()方法：

这样我们就用JavaScript完成了一个网络请求捕获工具，它可以捕获页面中的图片和Ajax请求。完整的代码如下：

你可以把如下代码保存到一个单独的.js文件中，然后通过script标签嵌入到你需要调试的页面中。每当有图片或者Ajax请求时，都会把日志输出到页面右上角的调试窗口内，效果如下：

结语

在本文中我们展示了如何用JavaScript代码实现一个网络查看工具，在移动端Web开发时这种方式有独特的优势。

Performance API内容繁多而且功能非常强大，而我们在本文中只用到了它很小一部分功能。如果你使用足够深入，可以制作出非常强大的调试工具。

如果你不想深入了解这个API的内容，只想找一个开箱即用的移动端调试工具，可以试试腾讯的 vConsole，和本文中使用了同样的技术。