Antes de empezar con este post, tenemos que preguntarnos que es Charles.
“Charles es un proxy HTTP / monitor HTTP / proxy inverso que permite a un desarrollador ver todo el tráfico HTTP y SSL / HTTPS entre su máquina e Internet. Esto incluye solicitudes, respuestas y los encabezados HTTP (que contienen las cookies y la información de almacenamiento en caché).” Charles
Ahora, para que podemos usar Charles?. Básicamente para depurar solicitudes de red en nuestras aplicaciones. Hay muchas veces que como desarrolladores, queremos cambiar algunas solicitudes para ver si falla o forzar a la aplicación a recibir un valor incorrecto para ver cómo reacciona nuestra aplicación a esa solicitud. En otras ocasiones, solo queremos ver cuáles son las respuestas para descubrir por qué la aplicación falla. Hay muchas cosas que queremos probar, y a veces no sabemos cómo. Podemos hacer todo esto con Charles. Así que empecemos.
-
Instala Charles haciendo click en el link.
-
Abre Charles y haz click en el Menú: Help > SSL Proxying, y selecciona Install Charles Root Certificate in iOS Simulators.
- Ahora verifica que tienes la opción macOS Proxy seleccionada, para que podemos escuchar el trafico de red, así que selecciona en el Menú: Proxy > macOS Proxy
- Reinicie su simulador y asegúrese de estar grabando el tráfico entrante. Deberías ver en la parte inferior derecha la etiqueta Recording. Si no, simplemente haga click en Start Recording buttom
-
Ejecute la aplicación en el simulador, y en este momento, debería ver el tráfico entrante a la izquierda
-
Ahora, debe asegurarse de habilitar SSL Proxying para las URL que desea probar. Hay dos formas de hacer esto:
-
La primera forma es haciendo click en Menú: Proxy > SSL Proxying Settings y luego agregue la URL que desee.
-
La segunda forma es cuando ve el tráfico entrante en la parte izquierda, simplemente haga click derecho en la URL que desee y haga click en Enable SSL Proxying
-
Ahora reinicie el simulador y verá las respuestas.
-
Si hace clic en la respuesta y en el Contenido, puede ver el JSON que estamos obteniendo. Ahora podemos comprobar por qué recibimos un error en la aplicación si ese es el caso.
- Vamos a mapear localmente algunas respuestas para que podamos simularlas. Haga click derecho en la respuesta y haga click Save Response…
- Ahora haga click derecho en la solicitud y haga click en Viewer Mappings… y copie lo que son el Host, el Port y la Path, porque lo vamos a usar a continuación.
- Ahora haga click en el Menú en: Tools > Map Local… y agrega uno nuevo. Para Local path: seleccionará la respuesta que guardó y para Host, Port y Path la completará con la información que obtuvo en el paso anterior.
- Ahora puede editar el JSON y comenzar a probar sus respuestas de red