如何监视对本机应用程序的图像请求以验证是否从缓存中加载了图像（使用Charles）

Question

我正尝试监视对图像的请求，以验证是否从ios / android缓存加载了图像，还是仍在从后端Firebase存储请求图像。我通过启用网络检查来使用React Native Debugger，但似乎无法观察到对本机“图像”组件的图像（URI）的请求。如何监视对图像的请求，或者如何检查是否从缓存中加载了图像？

谢谢！

Answer 1

根据此处的React Native Debugger文档：https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md

它无法检查诸如从src的网址加载的图片之类的请求，因此如果 您的图片来源设置了会话，该会话不适用于获取 和XMLHttpRequest。

同一文档引用了Charles和stetho来监视此类请求。

如果您想检查更深层的网络请求（例如发出的请求 使用Image），请使用Charles或Stetho等工具。

我在Mac上安装了Charles，在我的iOS设备上安装了证书，并使用以下链接中包含的信息启用了它。现在，我可以监视对图像的请求了。

1- https://www.charlesproxy.com/documentation/getting-started/

2- https://www.donnywals.com/debugging-network-traffic-with-charles/

3- https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/

4- https://stackoverflow.com/a/49129286/1680793

（您可能需要根据需要在我上面列出的链接上访问其他链接的页面）

在Mac上安装Charles，按照我列出的文档中的说明启动此帮助操作：

Charles将指导您如何在设备上安装和信任所需的证书：

一些要点：

• 在Mac / PC上安装Charles时，如果要求制作 自动进行所需的配置。
• 要在ios设备上安装证书，请浏览至 使用 SAFARI 浏览器而非Chrome浏览器访问chls.pro/ssl URL。然后 请按照设备显示的说明安装 证书。 （我对监视我的iOS设备特别感兴趣 因为android似乎默认情况下会缓存图像）
• 如果您将Firebase存储用作映像存储（如我所述），但看不到Charles记录的请求/响应，请查找以下消息：此主机未启用SSL代理。在“代理”菜单中的“ SSL代理设置”中启用

您需要为https://firebasestorage.googleapis.com启用SSL代理。像这样将firebasestorage添加到SSL代理配置（或您希望监视其通信的任何URL）：

• Charles将记录Mac上发生的一切，以 仅观察应用程序对图像的“ firestore”请求， 使用左侧结构树底部的“过滤器”框 窗格（请参见上面的第一张图片）。
• 完成操作后，请不要忘记禁用WIFI代理 查尔斯，否则您将无法连接到互联网。
• 确保您仔细阅读文档，并在此处关注我的列表。
• 查尔斯是一种付费工具。您可以使用试用版30天。 而且每次发射都会在30分钟后终止，因此您需要 重新启动Charles。