我正在尝试监视对图像的请求，以验证图像是从 ios/android 缓存中加载还是仍在从后端 Firebase 存储中请求。我通过启用网络检查来使用 React Native Debugger，但似乎无法观察到 react-native“图像”组件的图像（URI）请求。如何监控图像请求或如何检查图像是否从缓存中加载？
谢谢！
问问题
1457 次
1 回答
1
根据此处的 React Native Debugger 文档：https ://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md
它无法检查从 src 的 url 加载的图像之类的请求，因此如果您的图像源具有设置的会话，则该会话不能应用于 fetch 和 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/sslURL 。然后按照设备显示的说明安装证书。（我对监控我的 iOS 设备特别感兴趣，因为默认情况下 android 似乎会缓存图像） - 如果您使用 firebase 存储作为图像存储（就像我一样）并且看不到 Charles 记录的请求/响应，请注意以下消息：SSL Proxying not enabled for this host。在代理菜单、SSL 代理设置中启用
您需要为https://firebasestorage.googleapis.com启用 SSL 代理。像这样将 firebasestorage 添加到 SSL 代理配置（或您有兴趣监视与之通信的任何 URL）：
- Charles 将记录你的 mac 上发生的一切，为了观察你的应用程序对你的图像的“firestore”请求，使用左窗格结构树底部的“过滤器”框（见上面的第一张图片） .
- 完成 Charles 后不要忘记禁用 WIFI 代理，否则您将无法连接到互联网。
- 确保您仔细阅读文档并注意我的列表。
- Charles 是一个付费工具。您可以使用试用版 30 天。每次启动都会在 30 分钟后自行终止，因此您需要重新启动 Charles。
于 2020-09-29T20:24:55.603 回答