Instalación y uso del software de captura web Charles

Visión general

Charles
La herramienta de captura de paquetes de Charles es un potente software de captura de paquetes de datos de red. Charles puede realizar la depuración de aplicaciones de red, ayudar a los desarrolladores a analizar el protocolo de comunicación de los programas de red, etc., admitir solicitudes de captura de protocolos http y https, y no admite sockets.
Inserte la descripción de la imagen aquí

Charles puede completar proxy HTTP / monitor HTTP / proxy inverso , lo que permite a los desarrolladores ver todo entre su máquina e Internet.Tráfico HTTP y SSL / HTTPS. Esto incluye solicitudes, respuestas y encabezados HTTP (que contienen información de cookies y caché). Cuando el cliente inicia una solicitud al servidor, primero va a Charles para filtrar, y luego Charles envía los datos finales al servidor; Nota: Los datos que Charles envía al servidor en este momento no son necesariamente los datos solicitados por el cliente; Charles está recibiendo Al solicitar al cliente, puede modificar libremente los datos, e incluso puede bloquear directamente la solicitud enviada por el cliente; los datos devueltos después de que el servidor recibe la solicitud irán primero a Charles, filtrados por Charles, y luego enviado al cliente, para desarrolladores front-end es muy atractivo, lo que equivale a solicitudes y respuestas controlables, y Charles proporciona muchas operaciones concisas para controlar más aspectos;

Charles es una herramienta de interceptación de paquetes de red de uso común en Mac. Cuando hacemos desarrollo móvil, a menudo necesitamos interceptar paquetes de red para analizarlos con el fin de depurar el protocolo de comunicación de red con el servidor. Charles se configura como servidor proxy de acceso a la red del sistema , de modo que todas las solicitudes de acceso a la red se completan a través de él, logrando así la interceptación y análisis de los paquetes de la red.

Además de depurar puertos en el desarrollo móvil, Charles también se puede utilizar para analizar los protocolos de comunicación de aplicaciones de terceros. Con la función SSL de Charles, Charles puede analizar el protocolo Https.

Herramientas relacionadas : SwitchHosts, Chrome's Host Switch Plus, Fiddler, Chrome DevTool

Escenarios de aplicación comunes:
captura de solicitudes y respuestas Http y Https, la captura de paquetes es la más utilizada.
Reenviar la solicitud de red es conveniente para la depuración de back-end. Es muy bueno reenviar bajo circunstancias complicadas y especiales (el registro capturado se puede repetir directamente. Si desea modificarlo, también puede modificarlo).
Modifique los parámetros de solicitud de red (cuando el cliente envía al servidor, se puede modificar y luego reenviar).
Intercepción y modificación dinámica de solicitudes de red.
Admite red lenta simulada, principalmente para imitar el proceso de acceso 2G ​​/ 3G / 4G en el teléfono móvil.
Admite mapeo local y mapeo remoto. Por ejemplo, puede asignar recursos en línea a una carpeta local, de modo que pueda lidiar con errores y depuración en línea en algunos casos especiales (la red css, js y otros recursos se utilizan localmente Código, puede modificar estos localmente, datos y similares son todos entornos en línea, depuración en línea);
puede tomar los recursos a los que accede el teléfono móvil (si es el entorno donde está configurado el HOST, el teléfono puede tomar prestada la configuración del host para ingresar al entorno de prueba )

sitio web oficial de charles : www.charlesproxy.com

Instalación y uso del software

1) Dirección de descarga de software: Charles necesita un entorno Java para ejecutarse, y el entorno Java debe instalarse primero.

Windows 64: https://www.charlesproxy.com/assets/release/4.2.8/charles-proxy-4.2.8-win64.msi

Windows 32: https: //www.charlesproxy.com/assets/release/4.2.8/charles-proxy-4.2.8-win32.msi

macOS: https: //www.charlesproxy.com/assets/release/4.2.8/charles-proxy-4.2.8.dmg

Linux : yum instalar charles-proxy -y
yum 源 :

cat <<EOF > /etc/yum.repos.d/Charles.repo
[charlesproxy]name=Charles Proxy Repository
baseurl=https://www.charlesproxy.com/packages/yum
gpgkey=https://www.charlesproxy.com/packages/yum/PublicKey
EOF

2) Información de registro del software (solo para aprendizaje), compre la versión original y el período de prueba es de 30 días:

Inserte la descripción de la imagen aquí
Nombre registrado: https://zhile.io
Clave de licencia: 48891cf209c6d32bf4; // El código de registro para cualquier versión de Charles, Charles 4.2 es actualmente la última versión y está disponible.

Registro en línea: https://www.zzzmode.com/mytools/charles/

3) Uso del software

Charles proporciona principalmente dos vistas para ver paquetes, a saber:

Estructura : vista Estructura / Estructura, clasifica las solicitudes de red de acuerdo con el nombre de dominio al que se accede . Por ejemplo, si hay n solicitudes de recursos bajo un nombre de dominio, todas las solicitudes bajo este nombre de dominio se clasificarán aquí en detalle, de modo que es fácil localizar la necesidad de análisis y datos procesados, ver claramente la estructura de datos solicitada;

Secuencia : vista de secuencia / secuencia, que clasifica las solicitudes de red de acuerdo con el tiempo de acceso y procede en el orden en que el usuario envía las solicitudes. Puede ver claramente todas las solicitudes, incluidas las solicitudes de recursos, imágenes, texto, música, etc.

Introducción a la interfaz principal de charles:
Inserte la descripción de la imagen aquí

En la figura anterior, Contenido en la esquina superior derecha es la etiqueta más utilizada, donde la parte superior es la solicitud y la parte inferior es la respuesta; "Sin procesar" es la información de la solicitud sin procesar y todos los elementos a la izquierda de la sin procesar son para información sin procesar Divida y embellezca para inspección visual;

Por primera vez, Charles le preguntará si desea establecer a Charles como el agente del sistema. Nosotros configuraremos a Charles como el agente del sistema. Seleccione "Proxy" -> "Mac OS X Proxy / proxy de Windows" en el menú para configurar Charles como un proxy del sistema:
Inserte la descripción de la imagen aquí
instale el certificado CA de Charles en el directorio del certificado raíz de la computadora:
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
como se muestra en la figura anterior, el enlace obtenido tiene algunas solicitudes Hay un signo de bloqueo y otras no. El signo de bloqueo se debe a que no está permitido. Debe permitirlo antes de volver a solicitar la solicitud relacionada. Luego, puede verlo normalmente; después de habilitar el proxy SSL, el se libera el proxy de solicitud.
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
En China, la tabla * en el Host permite todas las solicitudes; 443 es Https; una vez completada la configuración anterior, las solicitudes de red se pueden obtener normalmente, pero solo se capturan las solicitudes locales de la computadora.

[Solicitud para obtener la aplicación móvil] :

Después de confirmar la dirección IP de la máquina, es decir, la dirección IP del proxy y el puerto del proxy (predeterminado 8888) de Charles, configure el proxy HTTP en el teléfono móvil. El ejemplo es el siguiente:
Inserte la descripción de la imagen aquí

Inserte la descripción de la imagen aquí
4) Función simulada:
la función Map de Charles se divide en dos tipos : Map Remote y Map Local. Como su nombre indica, Map Remote es para redirigir una solicitud de red específica a otra dirección de solicitud de URL, y Map Local es para redirigir una red específica solicitud a un archivo local. Cuando necesite modificar los datos, puede utilizar la función de mapa para verificar temporalmente el efecto, de modo que pueda actualizar y actualizar después de la confirmación. El proceso de operación es el siguiente:

1. Seleccione una solicitud, guarde la respuesta y luego copie los datos de la respuesta en la herramienta de conversión json (en línea: www.bejson.com) y podrá modificar el contenido en el estado de edición;

2. Establezca la siguiente configuración en la barra de herramientas Herramientas en Charles:
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
3. Verifique el efecto de modificación después de volver a solicitarlo.

5) Depuración del límite de velocidad:

A veces, es necesario simular una red lenta o una red de alta latencia para probar si la aplicación se comporta normalmente en la red móvil (como simular el tiempo de respuesta de la aplicación cuando la red es lenta). Charles proporciona una buena respuesta para este requisito.

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
6) Prueba de punto de interrupción:

A veces, para depurar la interfaz del servidor, es necesario probar repetidamente las solicitudes de red con diferentes parámetros. Charles puede modificar y retransmitir fácilmente solicitudes de red. Simplemente haga clic con el botón derecho en la solicitud de red anterior y seleccione "Editar" para crear una solicitud de red editable.
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Actualice la página, solicite esta interfaz nuevamente y edite según sea necesario:
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
actualice la página y verifique.

Supongo que te gusta

Origin blog.csdn.net/ximenjianxue/article/details/114406154
Recomendado
Clasificación