Installation et utilisation du logiciel de capture Web Charles

Aperçu

Charles
L' outil de capture de paquets Charles est un puissant logiciel de capture de paquets de données réseau. Charles peut effectuer le débogage réseau des applications, aider les développeurs à analyser le protocole de communication des programmes réseau, etc., prendre en charge les requêtes de capture pour les protocoles http et https, et ne prend pas en charge les sockets.
Insérez la description de l'image ici

Charles peut compléter le proxy HTTP / le moniteur HTTP / le proxy inverse , permettant aux développeurs de tout voir entre leur machine et InternetTrafic HTTP et SSL / HTTPS. Cela inclut les demandes, les réponses et les en-têtes HTTP (contenant des informations sur les cookies et le cache). Lorsque le client lance une demande au serveur, il va d'abord à Charles pour filtrer, puis Charles envoie les données finales au serveur; Remarque: les données que Charles envoie au serveur à ce moment ne sont pas nécessairement les données demandées par le client; Charles reçoit Lors de la demande au client, vous pouvez librement modifier les données, et vous pouvez même bloquer directement la demande envoyée par le client; les données retournées après réception de la demande par le serveur iront d'abord à Charles, filtrées par Charles, puis envoyé au client, pour les développeurs front-end C'est très attractif, ce qui équivaut à des requêtes et réponses contrôlables, et Charles fournit beaucoup d'opérations concises afin de contrôler plus d'aspects;

Charles est un outil d'interception de paquets réseau couramment utilisé sous Mac. Lors du développement mobile, nous avons souvent besoin d'intercepter des paquets réseau pour analyse afin de déboguer le protocole de communication réseau avec le serveur. Charles se définit comme le serveur proxy d'accès au réseau du système , de sorte que toutes les demandes d'accès au réseau soient complétées par son intermédiaire, réalisant ainsi l'interception et l'analyse des paquets réseau.

En plus du débogage des ports dans le développement mobile, Charles peut également être utilisé pour analyser les protocoles de communication d'applications tierces. Avec la fonction SSL de Charles, Charles peut analyser le protocole Https.

Outils associés : SwitchHosts, Chrome's Host Switch Plus, Fiddler, Chrome DevTool

Scénarios d'application courants:
capture des demandes et réponses Http et Https, la capture de paquets est la plus couramment utilisée.
Le ré-envoi de la requête réseau est pratique pour le débogage back-end. Il est très cool de le renvoyer dans des circonstances compliquées et spéciales (l'enregistrement capturé peut être directement répété. Si vous souhaitez le modifier, vous pouvez également le modifier).
Modifiez les paramètres de la requête réseau (lorsque le client envoie au serveur, il peut être modifié puis retransmis).
Interception et modification dynamique des requêtes réseau.
Prend en charge le réseau lent simulé, principalement pour imiter le processus d'accès 2G / 3G / 4G sur le téléphone mobile.
Prend en charge le mappage local et le mappage distant. Par exemple, vous pouvez mapper des ressources en ligne à un dossier local, afin de pouvoir gérer les bogues et le débogage en ligne dans certains cas particuliers (css réseau, js et autres ressources sont utilisés localement Code, vous pouvez modifier ceux-ci localement, les données et autres sont tous des environnements en ligne, débogage en ligne);
vous pouvez récupérer les ressources accessibles par le téléphone mobile (s'il s'agit de l'environnement dans lequel l'hôte est configuré, le téléphone peut emprunter la configuration de l'hôte pour entrer dans l'environnement de test )

site officiel de charles : www.charlesproxy.com

Installation et utilisation du logiciel

1) Adresse de téléchargement du logiciel: Charles a besoin d'un environnement java pour fonctionner, et l'environnement java doit d'abord être installé.

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 : miam installer charles-proxy -y
miam 源 :

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) Informations d'enregistrement du logiciel (uniquement pour l'apprentissage), veuillez acheter la version authentique et la période d'essai est de 30 jours:

Insérez la description de l'image ici
Nom enregistré: https://zhile.io
Clé de licence: 48891cf209c6d32bf4; // Le code d'enregistrement pour toute version de Charles, Charles 4.2 est actuellement la dernière version et est disponible.

Inscription en ligne: https://www.zzzmode.com/mytools/charles/

3) Utilisation du logiciel

Charles fournit principalement deux vues pour visualiser les paquets, à savoir:

Structure : vue Structure / Structure, classez les demandes réseau en fonction du nom de domaine auquel accéder . Par exemple, s'il y a n demandes de ressources sous un nom de domaine, toutes les demandes sous ce nom de domaine seront classées ici en détail, de sorte qu'il est facile de localiser le besoin d'analyse et de données traitées, visualiser clairement la structure de données demandée;

Séquence : vue séquence / séquence, qui trie les demandes réseau en fonction de l'heure d'accès et procède dans l'ordre d'envoi des demandes de l'utilisateur. Vous pouvez voir clairement toutes les demandes, y compris les demandes de ressources, les images, le texte, la musique, etc.

Introduction à l'interface principale de Charles:
Insérez la description de l'image ici

Dans la figure ci-dessus, Contenu dans le coin supérieur droit est le libellé le plus couramment utilisé, où la partie supérieure est la demande et la partie inférieure est la réponse; "Brut" est les informations de demande non traitées, et tous les éléments sur la gauche de la les bruts sont des informations brutes, les séparent et les embellissent pour une inspection visuelle;

Pour la première fois, Charles vous demandera si vous souhaitez définir Charles comme agent système. Nous définirons Charles comme agent système. Sélectionnez "Proxy" -> "Mac OS X Proxy / proxy windows" dans le menu pour définir Charles comme proxy système:
Insérez la description de l'image ici
installez le certificat CA de Charles dans le répertoire du certificat racine de l'ordinateur:
Insérez la description de l'image ici
Insérez la description de l'image ici
Insérez la description de l'image ici
comme indiqué dans la figure ci-dessus, le lien obtenu a certaines demandes Il y a un signe de verrouillage, et d'autres non. Le signe de verrouillage est parce qu'il n'est pas autorisé. Vous devez l'autoriser avant de demander à nouveau la demande associée. Vous pouvez ensuite l'afficher normalement. Après avoir activé le proxy SSL, le le proxy de demande est libéré.
Insérez la description de l'image ici
Insérez la description de l'image ici
En Chine, la table * de l'hôte autorise toutes les demandes; 443 est Https; une fois les paramètres ci-dessus terminés, les demandes réseau peuvent être obtenues normalement, mais seules les demandes locales de l'ordinateur sont capturées.

[Demande d'accès à l'application mobile] :

Après avoir confirmé l'adresse IP de la machine, c'est-à-dire l'adresse IP du proxy et le port proxy (par défaut 8888) de Charles, configurez le proxy HTTP sur le téléphone mobile. L'exemple est le suivant:
Insérez la description de l'image ici

Insérez la description de l'image ici
4) Fonction Mock:
la fonction Map de Charles est divisée en deux types : Map Remote et Map Local. Comme son nom l'indique, Map Remote doit rediriger une requête réseau spécifiée vers une autre adresse de requête URL, et Map Local doit rediriger un réseau spécifié demande à un fichier local. Lorsque vous devez modifier les données, vous pouvez utiliser la fonction de carte pour vérifier temporairement l'effet, afin de pouvoir mettre à jour et mettre à niveau après confirmation. Le processus de fonctionnement est le suivant:

1. Sélectionnez une demande, enregistrez la réponse, puis copiez les données de réponse dans l'outil de conversion json (en ligne: www.bejson.com), et vous pouvez modifier le contenu dans l'état d'édition;

2. Définissez les paramètres suivants dans la barre d'outils Outils dans Charles:
Insérez la description de l'image ici
Insérez la description de l'image ici
Insérez la description de l'image ici
3. Vérifiez l'effet de modification après une nouvelle demande.

5) Débogage de la limite de vitesse:

Parfois, il est nécessaire de simuler un réseau lent ou un réseau à latence élevée pour tester si l'application se comporte normalement sous le réseau mobile (par exemple en simulant le temps de réponse de l'application lorsque le réseau est lent). Charles fournit une bonne réponse pour cette exigence.

Insérez la description de l'image ici
Insérez la description de l'image ici
6) Test de point d'arrêt:

Parfois, pour déboguer l'interface du serveur, il est nécessaire d'essayer à plusieurs reprises des requêtes réseau avec des paramètres différents. Charles peut facilement modifier et retransmettre les requêtes réseau. Faites un clic droit sur la demande réseau précédente et sélectionnez "Modifier" pour créer une demande réseau modifiable.
Insérez la description de l'image ici
Insérez la description de l'image ici
Insérez la description de l'image ici
Actualisez la page, demandez à nouveau cette interface et modifiez-la si nécessaire:
Insérez la description de l'image ici
Insérez la description de l'image ici
actualisez la page et vérifiez.

Je suppose que tu aimes

Origine blog.csdn.net/ximenjianxue/article/details/114406154
conseillé
Classement