Chrome 开发者工具 Request content was evicted from inspector cache

我使用 Chrome 开发者工具的 Network 面板，试图查看一个 HTTP post 请求的 payload 时，在 Chrome 里看到提示消息：

Failed to load response data: Request content was evicted from inspector cache

在 Chrome 开发者工具的 Network 面板中，如果遇到 Failed to load response data: Request content was evicted from inspector cache 的提示，通常意味着浏览器由于内存限制而自动清除了部分请求的数据。这个问题常见于加载大量数据或长时间使用开发者工具时。解决这个问题可以从以下几个角度来进行：

理解缓存驱逐

首先，我们需要明白为什么会发生缓存驱逐。Chrome 的开发者工具会将捕获的网络请求数据保存在一个有限的内存缓存中。当缓存满了或者某些数据长时间未被访问时，Chrome 会自动清理这些数据以释放空间，尤其是那些占用大量内存的数据项，如大型的 POST 请求。这就是为什么在尝试查看某个请求的详细内容时，会看到上述错误信息。

调整 Chrome 设置

为了尽可能避免这种情况的发生，可以通过调整一些设置来优化 Chrome 开发者工具的使用：

1. 增加缓存大小：虽然 Chrome 本身并没有直接提供调整开发者工具缓存大小的选项，但可以通过增加浏览器的总体内存使用限制来间接影响。这可以通过启动参数来实现。右键点击 Chrome 的快捷方式，选择 属性，在 目标 字段中添加 --js-flags="--max-old-space-size=4096"，这将 JavaScript 的内存限制从默认的大约 1.5GB 增加到 4GB。
2. 定时清理缓存：可以通过定时重新打开开发者工具来清空所有缓存，虽然这种方法较为原始，但在进行长时间的调试工作时，它可以有效防止数据被意外清理。
3. 使用网络请求拦截工具：当 Chrome 开发者工具不稳定或不满足需求时，可以考虑使用如 Fiddler 或 Charles 这类网络请求拦截工具。这些工具专门用于捕获和分析 HTTP 和 HTTPS 请求，通常提供更强大的数据保持和分析功能。

优化网络请求分析策略

除了调整设置，改进我们分析网络请求的方法也非常关键：

1. 减少同时打开的标签页：每个标签页都可能产生网络请求，这些请求都会被开发者工具捕获并占用缓存空间。在进行关键的调试工作时，尽量关闭不必要的标签页，以减少内存的占用。
2. 直接查看请求响应：对于重要的请求，可以直接在代码中打印出请求的 payload 和响应内容。例如，在 JavaScript 中，可以在发送请求的部分添加 console.log 语句，直接将请求内容输出到控制台，这样即使开发者工具的缓存被清理，仍然可以在控制台找到这些数据。
3. 分段加载数据：如果是因为加载了大量数据而导致缓存驱逐，可以考虑实现分页或分段加载的策略，只加载用户当前需要查看的数据。这样不仅可以减少单次请求的数据量，还能提升应用的响应速度和用户体验。

结论

遇到 Failed to load response data: Request content was evicted from inspector cache 时，虽然有时候无法回避，但通过上述方法可以极大地减少此类问题的发生频率。通过优化 Chrome 设置，使用专门的网络请求分析工具，以及改进请求处理策略，可以有效地管理和分析开发过程中的网络请求数据。这不仅提高了工作效率，也确保了在关键时刻能够访问到需要的信息。