¿Qué vamos a aprender en este tutorial?
¡Hola! Si estás leyendo este artículo probablemente te interese instalar y configurar Charles para depurar de manera avanzada las peticiones de red que se invocan en momentos concretos desde un navegador en Mac OS, un simulador iOS o un dispositivo físico iOS o simplemente quieres investigar que hace una app por debajo mientras la estamos utilizando.
Entorno
El entorno en el que se ha ejecutado todo lo que aquí se explica ha sido un MacOS High Sierra 10.13.4, XCode 9.3 y Charles 4.2.1 versión de pago.
¿Qué es Charles y que nos permite hacer?
Charles es una aplicación que nos permitirá ver el tráfico de red de manera local HHTP, HTTPS, HTTP/2 y activar TCP.
En mi caso lo utilizo para debuggear que llamadas se están haciendo en las aplicaciones en las que estoy trabajando, modificar JSON de las respuestas de los servicios para simular comportamiento e incluso mockear JSON de servicios que aún están sin desarrollar.
Tiene muchísimas más funciones que para otro tipo de usuario puede que sean útiles.
Configuración de Charles en Mac
En este punto vamos a explicar como configurar Charles para capturar la actividad en un entorno Mac OS.
En primer lugar tendremos que ir a la página web de Charles para descargar el programa.
Una vez descargado lo instalaremos y a continuación lo abriremos.
Veremos como va apareciendo el tráfico de las peticiones de red que Charles está interceptando.
Ahora lo que debemos hacer es que si vemos una llamada de la que queremos empezar a sacar mas información con pulsar el botón derecho sobre ella e instalar el certificado SSL ya podremos ampliar información.
Una definición de lo que es un certificado SSL podría ser la siguiente: Las siglas SSL responden a los términos en inglés (Secure Socket Layer), el cual es un protocolo de seguridad que hace que sus datos viajen de manera íntegra y segura, es decir, la transmisión de los datos entre un servidor y usuario web, y en retroalimentación, es totalmente cifrada o encriptada.
Una vez instalemos el certificado SSL en nuestra máquina iremos al Keychain del sistema para comprobar que esta instalado de manera correcta.
Si el certificado no aparece como en la imagen de arriba y aparece un aspa roja, pulsamos con el botón derecho sobre el certificado y seleccionaremos la opción get info. Se nos abrirá una nueva pestaña en la que deberemos selecciona trust y la configuración que deberemos tener será la que aparece en la imagen de mas abajo.
Configurar Charles para simuladores iOS
Ahora vamos a ver como instalar el certificado en simulador iOS y de esta manera poder interceptar las actividad que se realice desde él.
Lo primero será instalar el certificado SSL en el simulador, para ello deberemos situarnos en Charles pulsar sobre Help/SSL Proxying/ Install Charles Root Certificate in iOS Simulators.
Sería conveniente tener activado un filtro para que Charles solo muestre el tráfico que esta ocurriendo en el simulador y no tener mezclada la actividad de Mac OS e iOS, para ello si queremos desactivar la actividad de Mac OS haremos lo siguiente, sobre la pestaña Tools desactivaremos la opción de macOS Proxy.
Si en alguna de las llamadas vemos que nos da un error de handsake failed deberemos solicitar el certificado de backend para poder tener acceso y trackear las llamadas.
En este momento ya podemos ejecutar algún proyecto de XCode en el que se haga alguna petición de red y comprobar como Charles esta interceptando las llamadas.
Configurar Charles en dispositivo físico iOS
Ahora toca configurar Charles para que intercepte las peticiones en un dispositivo iOS físico.
Lo primero que vamos a hacer es ir a Help/ip local address.
Deberemos tomar nota de la ip con nombre en0, esta ip es el túnel proxy con Charles, para que de esta manera pueda interceptar las llamadas del dispositivo físico.
Ahora en el dispositivo físico deberemos acceder a Ajustes / WIFI / Info / Configure Proxy / Manual / introducimos la ip que hemos visto en pasos anteriores cuando en Charles hemos pulsado help/ ip y el puerto, que por defecto es 8888.
En este punto vamos a instalar el certificado en nuestro dispositivo.
Nos aparecerá un mensaje en pantalla de Charles que nos indicará que accedamos a Safari desde nuestro dispositivo físico a la siguiente dirección chls.pro/ssl
Seguiremos los pasos que se nos van indicando.
Con eso tendríamos configurado nuestro dispositivo físico para que Charles pueda interceptar la actividad de red y debería aparecernos un mensaje igual que el de la imagen.
Conclusión
Como hemos visto a lo largo del articulo nos llevará muy poco tiempo configurar Charles, una herramienta que aconsejo a todo desarrollador, para mi es imprescindible y me facilita mucho el día a día.
Por: Raúl Pedraza León
Ex alumno Bootcamp Desarrollo Mobile – Actual iOS developer at BQ
Si tienes algo que deseas compartir o quieres formar parte de KeepCoding, escríbenos a [email protected].
