Capturar tráfico HTTPS de apps React Native con Proxyman
¿Alguna vez has tenido problemas con llamadas a la API en las que no aparece ningún error en la consola, pero la app sigue sin mostrar datos? ¿Alguna vez has querido inspeccionar las llamadas de red para depurar tu aplicación? En este tutorial veremos cómo usar Proxyman como proxy man-in-the-middle para capturar e inspeccionar el tráfico HTTPS de tus apps React Native.
1. Requisitos previos
- Descarga e instala la última versión de Proxyman
- Usa Xcode 11.4+ en tu Mac
- En este tutorial usamos una app de código abierto de React Native llamada Trackie para depurarla. Puedes encontrar el código fuente aquí.
2. Primeros pasos
En cuanto descargues e instales Proxyman, podrá capturar todas las solicitudes y respuestas que lleguen a tu app React Native o salgan de ella.
Dicho esto, verás que, aunque podemos capturar el tráfico de la app, todavía no podemos ver el contenido de sus respuestas.
¡Es hora de activar SSL Proxying e instalar el certificado de Proxyman en tu simulador!
3. Activar SSL Proxying
Haz clic en “Enable only this domain” o en “Enable all domains from Trackie”
4. Instala y confía en el certificado de Proxyman en los simuladores de iOS
En la barra de menú, selecciona Certificate -> Install Certificate for iOS -> Simulators → Install Certificate
Proxyman ofrece una guía de configuración (Setup Guide) que te evita casi todo el trabajo manual. Haz clic en Install and Trust en la ventana de configuración y Proxyman configurará el certificado automáticamente.
5. Inspecciona el tráfico de red
Cuando instales el certificado y reinicies el simulador, puedes volver a ejecutar la aplicación y hacer una llamada a la API. Proxyman capturará y mostrará el contenido de las solicitudes y respuestas para que puedas depurarlas.
6. ¿Qué hago si no puedo ver el tráfico de mi app?
Si aparecen errores de SSL o no puedes ver solicitudes HTTP/HTTPS en los simuladores de iOS, consulta la sección de solución de problemas de la documentación de Proxyman para ver si el problema tiene solución. Si tampoco funciona, no dudes en escribirnos un correo con el máximo de detalles posible; con gusto te ayudaremos.
7. Conclusión
Trabajar con llamadas de red puede ser complicado y frustrante a veces, pero a partir de ahora depurarlas te resultará mucho más fácil. Proxyman, o cualquier otra herramienta de proxy MITM, puede ayudarte a capturar e inspeccionar el tráfico HTTP/HTTPS de tus apps para iOS, Android y React Native. Si te animas con este tutorial y quieres convertirte en un experto en redes, echa un vistazo a nuestra serie sobre las funciones avanzadas de Proxyman, como Map Local, Breakpoint o la herramienta Scripting. Te permitirán modificar las solicitudes y respuestas HTTP/HTTPS.
Esperamos que te haya gustado este tutorial. ¡Feliz depuración! 👨🏻🚀
Nota sobre plataformas
React Native usa la ruta de red normal del dispositivo, así que sigue la guía actual de iOS para un iPhone o un simulador de iOS, y la guía de Android para un dispositivo o emulador Android. Las compilaciones de depuración de Android pueden necesitar una configuración de seguridad de red, salvo que el certificado de prueba esté en el almacén del sistema. Si Metro deja de cargarse después de configurar el proxy, añade el host local de Metro a la lista de exclusiones del proxy en lugar de desactivar la captura de tu host de API.
Proxyman es una app de macOS de alto rendimiento que permite a los desarrolladores capturar e inspeccionar el tráfico HTTP(s) de apps y dominios en dispositivos iOS, simuladores de iOS y dispositivos Android.
Descárgala en https://proxyman.com/
