Accéder aux serveurs locaux et aux instances Chrome avec le transfert de port

Kayce Basques

Meggin Kearney

Sofia Emelianova

Vous pouvez utiliser le transfert de port pour:

• Cas 1. Déboguer un onglet ouvert sur une autre instance de Chrome
• Cas 2. Hébergez un site sur le serveur Web d'un ordinateur de développement, puis accédez au contenu à partir d'un appareil Android via un câble USB.

Dans le cas 2, le transfert de port fonctionne via un port TCP d'écoute sur votre appareil Android qui correspond à un port TCP de votre ordinateur de développement. Le trafic entre les ports transite par la connexion USB entre votre appareil Android et l'ordinateur de développement. La connexion ne dépend donc pas de la configuration de votre réseau.

De plus, si votre serveur Web utilise un domaine personnalisé, vous pouvez configurer votre appareil Android pour accéder au contenu de ce domaine à l'aide du mappage de domaine personnalisé.

Configurer le transfert de port

Suivez les étapes ci-dessous en fonction de votre situation.

Cas 1: configurer le transfert de port vers une autre instance Chrome

1. Exécutez une autre instance Chrome avec le paramètre --remote-debugging-port=PORT, par exemple:

   MacOS

   open -a "Google Chrome" --args --remote-debugging-port=PORT

   Windows

   start chrome --remote-debugging-port=PORT

   Linux

   google-chrome --remote-debugging-port=PORT

2. Dans l'instance Chrome avec laquelle vous effectuez le débogage:

   1. Ouvrez chrome://inspect/#devices.
   2. Assurez-vous que la case Découvrir les cibles du réseau est cochée.
   3. Cliquez sur Configurer à côté de la case à cocher.

   4. Dans Paramètres de découverte des cibles, saisissez localhost:PORT, cochez la case Activer le transfert de port, puis cliquez sur OK.

      

   5. De retour dans Appareils, vous verrez une nouvelle cible distante. Cliquez sur Inspecter à côté de l'onglet que vous souhaitez déboguer.

      

3. Une nouvelle fenêtre "Outils de développement" s'ouvre en mode appareil. Dans la barre d'adresse en haut de l'écran, vous pouvez saisir l'adresse du site Web que vous souhaitez déboguer.

   

4. À côté de la barre d'adresse, vous pouvez activer/désactiver les modes de saisie.

Scénario 2: Configurer le transfert de port via USB pour votre appareil Android

1. Configurez le débogage à distance entre votre ordinateur de développement et votre appareil Android. Lorsque vous avez terminé, votre appareil Android devrait apparaître dans la liste.

   

2. Assurez-vous que la case Détecter les appareils USB est cochée.

3. Cliquez sur Transfert de port à côté de la case à cocher.

4. Dans Paramètres de transfert de port, localhost:8080 est configuré par défaut. Cochez Activer le transfert de port.

   .

5. Si vous souhaitez configurer d'autres ports, suivez les étapes ci-dessous. Sinon, ignorez les étapes et cliquez sur OK.

6. Dans le champ de texte Port situé à gauche, saisissez le numéro de port que vous souhaitez utiliser ne pourra pas accéder au site depuis votre appareil Android. Par exemple, si vous souhaitez accéder au site à partir de localhost:5000, vous devez saisir 5000.

7. Dans la zone de texte Adresse IP et port située à droite, saisissez l'adresse IP ou le nom d'hôte votre site s'exécute sur le serveur Web de votre ordinateur de développement, suivi du numéro de port. Pour Par exemple, si votre site s'exécute sur localhost:5000, vous devez saisir localhost:5000.

8. Cliquez sur OK.

Le transfert de port est maintenant configuré. Un indicateur d'état de la redirection de port s'affiche également en haut , en plus du nom de l'appareil.

Pour afficher le contenu, ouvrez Chrome sur votre appareil Android et accédez au port localhost que vous spécifié dans le champ Port de l'appareil. Par exemple, si vous avez saisi 5000 dans le champ, vous irait à localhost:5000.

Mapper avec des domaines locaux personnalisés

Le mappage de domaine personnalisé vous permet d'afficher du contenu sur un appareil Android à partir d'un serveur Web sur votre de développement d'applications qui utilise un domaine personnalisé.

Supposons, par exemple, que votre site utilise une bibliothèque JavaScript tierce qui ne fonctionne que sur le Domaine chrome.devtools ajouté à la liste d'autorisation. Vous créez donc une entrée dans votre fichier hosts sur votre de développement pour mapper ce domaine à localhost (par exemple, 127.0.0.1 chrome.devtools). Après en configurant un mappage de domaine personnalisé et un transfert de port, vous pourrez afficher le site sur votre Appareil Android à l'URL chrome.devtools

Configurer le transfert de port vers le serveur proxy

Pour mapper un domaine personnalisé, vous devez exécuter un serveur proxy sur votre ordinateur de développement. Exemples de proxy Charles, Squid et Fiddler.

Pour configurer le transfert de port vers un proxy:

1. Exécutez le serveur proxy et notez le port qu'il utilise.

   Remarque :Le serveur proxy et votre serveur Web doivent fonctionner sur des ports différents.

2. Configurez le transfert de port vers votre appareil Android. Dans le champ Adresse locale, saisissez localhost: suivi du port sur lequel votre serveur proxy s'exécute. Par exemple, s'il est exécuté sur le port 8000, saisissez localhost:8000. Dans le champ device port (Port de l'appareil) saisissez le nombre sur lequel votre appareil Android doit écouter, par exemple 3333.

Configurez les paramètres proxy sur votre appareil

Vous devez ensuite configurer votre appareil Android pour qu'il communique avec le serveur proxy.

1. Sur votre appareil Android, accédez à Paramètres > Wi-Fi.

2. Appuyez de manière prolongée sur le nom du réseau auquel vous êtes connecté.

   Remarque :Les paramètres de proxy s'appliquent au niveau du réseau.

3. Appuyez sur Modifier le réseau.

4. Appuyez sur Options avancées. Les paramètres du proxy s'affichent.

5. Appuyez sur le menu Proxy et sélectionnez Manuel.

6. Dans le champ Nom d'hôte du proxy, saisissez localhost.

7. Pour le champ Port du proxy, saisissez le numéro de port que vous avez indiqué pour le port de l'appareil dans les dans la section précédente.

8. Appuyez sur Enregistrer.

Avec ces paramètres, votre appareil transmet toutes ses requêtes au proxy machine. Le proxy envoie des requêtes au nom de votre appareil. Les requêtes adressées à votre réseau local personnalisé sont correctement résolus.

Vous pouvez désormais accéder aux domaines personnalisés sur votre appareil Android, exactement comme sur le ordinateur de développement.

Si votre serveur Web fonctionne sur un port non standard, n'oubliez pas de spécifier le port lorsque demandant le contenu à partir de votre appareil Android. Par exemple, si votre serveur Web utilise le modèle domaine chrome.devtools sur le port 7331. Lorsque vous consultez le site depuis votre appareil Android, vous devez utiliser l'URL chrome.devtools:7331.

Conseil :Pour reprendre la navigation normale, n'oubliez pas de rétablir les paramètres proxy sur votre appareil Android après vous être déconnecté de l'ordinateur de développement.