Utiliser le proxy de développement avec un navigateur

En un clin d’œil
Objectif: Attacher le proxy de développement à une instance de navigateur sans modifier les paramètres du proxy système
Heure : 5 minutes
Plugins: Aucun
Prérequis :configurer le proxy de développement

Par défaut, le proxy de développement s’inscrit en tant que proxy système, qui route tout le trafic réseau via le proxy. Bien que cette approche fonctionne pour la plupart des scénarios, vous souhaitez parfois intercepter uniquement le trafic à partir d’une instance de navigateur spécifique tout en conservant d’autres applications non affectées.

Pourquoi utiliser un proxy spécifique au navigateur ?

L’attachement d’un proxy de développement directement à une instance de navigateur présente plusieurs avantages :

  • Isolation : seule l’instance de navigateur spécifique utilise le proxy, laissant d’autres applications et navigateurs non affectés
  • Aucune modification système : vous n’avez pas besoin de modifier les paramètres du proxy système
  • Test parallèle : exécuter plusieurs instances de navigateur avec différentes configurations de proxy
  • Trafic plus propre : consultez uniquement les requêtes du navigateur que vous testez, et non le trafic système en arrière-plan

Prerequisites

Avant de commencer, configurez le proxy de développement pour ne pas s’inscrire en tant que proxy système. Dans votre devproxyrc.json fichier, définissez :

{
  "asSystemProxy": false
}

Ou démarrez le proxy de développement avec l’option --as-system-proxy false de ligne de commande.

Google Chrome

Google Chrome prend en charge la configuration du proxy via des indicateurs de ligne de commande. Pour lancer Chrome avec le proxy de développement :

"C:\Program Files\Google\Chrome\Application\chrome.exe" --proxy-server="http://127.0.0.1:8000"

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --proxy-server="http://127.0.0.1:8000"

google-chrome --proxy-server="http://127.0.0.1:8000"

Conseil / Astuce

Utilisez un profil utilisateur distinct pour éviter d’affecter vos données de navigateur principales. Ajoutez l’indicateur --user-data-dir pour spécifier un autre répertoire de profil :

"C:\Program Files\Google\Chrome\Application\chrome.exe" --proxy-server="http://127.0.0.1:8000" --user-data-dir="%TEMP%\chrome-dev-proxy"

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --proxy-server="http://127.0.0.1:8000" --user-data-dir="/tmp/chrome-dev-proxy"

google-chrome --proxy-server="http://127.0.0.1:8000" --user-data-dir="/tmp/chrome-dev-proxy"

Important

Fermez toutes les instances Chrome existantes avant de lancer Chrome avec l’indicateur de proxy. Sinon, la nouvelle instance joint le processus Chrome existant et ignore les paramètres du proxy.

Microsoft Edge

Microsoft Edge ne prend pas en charge l’indicateur --proxy-server de ligne de commande. Même si Microsoft Edge est basé sur Chromium, Microsoft n’expose pas cette fonctionnalité.

Pour utiliser le proxy de développement avec Microsoft Edge, vous devez utiliser les paramètres du proxy système. Configurez le proxy de développement en tant que proxy système en conservant le asSystemProxy paramètre à sa valeur par défaut, trueou omettez-le de votre configuration.

Mozilla Firefox

Firefox ne prend pas en charge la configuration du proxy via des indicateurs de ligne de commande, mais vous pouvez le configurer manuellement via les paramètres du navigateur.

Pour configurer Firefox pour utiliser le proxy de développement :

  1. Ouvrir Firefox
  2. Accédez aux paramètres>Général>Paramètres réseau>...
  3. Sélectionner la configuration manuelle du proxy
  4. Régler le proxy HTTP sur 127.0.0.1 et le port sur 8000
  5. Vérifier également utiliser ce proxy pour HTTPS
  6. Sélectionnez OK.

Conseil / Astuce

Créez un profil Firefox distinct pour les tests avec le proxy de développement. De cette façon, vous pouvez conserver votre profil de navigation standard inchangé. Pour créer un nouveau profil, exécutez firefox -P et créez un profil dédié aux tests du Dev Proxy.

Approuver le certificat du proxy de développement

Lorsque vous démarrez le proxy de développement pour la première fois, il installe et approuve un certificat racine pour déchiffrer le trafic HTTPS. Si vous utilisez un profil de navigateur distinct ou si le navigateur n’utilise pas le magasin de certificats système, vous devrez peut-être approuver manuellement le certificat.

Chrome et Microsoft Edge

Chrome et Microsoft Edge utilisent le magasin de certificats du système d’exploitation. Si vous avez déjà exécuté le proxy de développement et approuvé le certificat pendant la première exécution, Chrome et Microsoft Edge l’approuvent automatiquement.

Firefox

Firefox utilise son propre magasin de certificats. Pour approuver le certificat du proxy de développement dans Firefox :

  1. Ouvrir Firefox
  2. Accédez à Paramètres> confidentialité etcertificats>de sécurité>afficher les certificats...
  3. Sélectionnez l’onglet Autorités
  4. Sélectionnez Importer...
  5. Accédez au certificat du proxy de développement :
    • Lieu : %USERPROFILE%\.config\dev-proxy\rootCert.pfx
    • Lieu : ~/.config/dev-proxy/rootCert.pfx
    • Lieu : ~/.config/dev-proxy/rootCert.pfx
  6. Cocher Faire confiance à cette autorité de certification pour identifier les sites Web
  7. Sélectionnez OK.

Note

Le mot de passe du certificat est vide. Laissez le champ de mot de passe vide lorsque vous y êtes invité.

Voir aussi

  • Last updated on