用浏览器进行web应用测试，你会怎么做？

有没有遇到这样的一个场景：你在使用浏览器进行web应用测试，但是你想知道你在测试过程中的前端输出和后端响应的情况究竟如何。那么，你会怎么做呢？想必大多人会毫不犹豫地回答：通过浏览器console面板和network面板抓取信息啊！的确如此，这不失为一个好办法。

但是，这难道需要时时刻刻地关注面板输出吗？这实在是有碍测试效率啊。那么，有什么办法，既不阻碍测试效率，也能获取到相应的信息呢？

答案当然是肯定的。

不得不说的ResourceSaver

有这么一个浏览器插件，它可以记录你在浏览器上的所有操作（例如，点击、输入等），提供了css、js、img和xhr等资源的下载，能够帮助你进行事后分析。这样的工具想要吗？它就是ResourcesSaver。

1）安装方式

在线安装：通过谷歌商店在线安装，地址是https://chrome.google.com/webstore/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb。

离线文件文件：CRX 0.1.8版本，文件下载地址是https://www.crx4chrome.com/crx/75492/。下载后，将后缀crx修改为zip并解压。chrome://extensions/打开浏览器扩展程序，点击“加载已解压的扩展程序”，选择解压的文件夹即可。

2）使用方式

安装完成后，打开浏览器开发者工具，即可在面板功能区看见“ResourcesSaver”（如下图所示）。

ResourcesSaver使用非常简单，只需打开功能面板后，正常在界面操作即可。等待测试结束，点击“Save All Resources”即可下载资源包（如下图所示）。

如上图所示，压缩包按域名分割，每个域名文件夹中中包括相应域名加载的图片、url链接和js等静态资源（如下图所示）。

值得注意的地方

ResourcesSaver和其他功能面板一样（如：console、network），只能加载当前域（比如域名）的资源，一旦发生新窗口跳转或新标签页开启，在新页面的资源是不会记录在当前页面的ResourcesSaver中。因此，为了不发生资源遗漏，我们可以使用”Auto open DevTools for popups”配置，启动新页面自动开启开发者工具面板功能。该功能能够在也页面开启时，自动追踪页面加载的资源，弥补可能存在的资源丢失缺陷。

ResourcesSaver的价值

如前文提及，ResourcesSaver可以解决测试人员在测试过程的测试数据记录或采集问题。让测试人员更加关注测试过程，聚焦测试要点，提高测试效率，而不是让测试人员分心去采集测试数据。

这些数据可以帮助测试人员做什么呢？我想答案是显而易见的：例如帮助测试人员分析接口请求或响应中是否有敏感关键字；例如帮助测试人员抓取出所有响应的图片或请求的接口；例如帮助测试人员抓取静态页面中的配置……

如此，读完这篇小文章的你，是否有所启发或收获呢？

最后：

可以到我的个人号：atstudy-js，可以免费领取一份10G软件测试工程师面试宝典文档资料。以及相对应的视频学习教程免费分享！其中包括了有基础知识、Linux必备、Mysql数据库、抓包工具、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试持续集成、测试架构开发测试框架、性能测试等。

这些测试资料，对于做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！