Vous pouvez utiliser le transfert de port pour:
- Cas 1. Déboguer un onglet ouvert sur une autre instance Chrome
- Cas 2. Hébergez un site sur le serveur Web d'une machine de développement, puis accédez au contenu depuis un appareil Android via un câble USB.
Dans le cas 2, le transfert de port s'effectue via un port TCP d'écoute de votre appareil Android qui est mappé à un port TCP de votre ordinateur de développement. Le trafic entre les ports transite par la connexion USB entre votre appareil Android et votre 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 de sorte qu'il accède au contenu de ce domaine à l'aide d'un mappage de domaine personnalisé.
Configurer le transfert de port
Selon votre cas, suivez les étapes ci-dessous.
Cas 1: Configurer le transfert de port vers une autre instance Chrome
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
Dans l'instance Chrome avec laquelle vous effectuez le débogage:
- Ouvrez
chrome://inspect/#devices
. - Assurez-vous que la case Découvrir des réseaux cibles est cochée.
- Cliquez sur Configurer à côté de la case à cocher.
Dans Paramètres de découverte cible, saisissez
localhost:PORT
, cochez la case Activer le transfert de port, puis cliquez sur OK.De retour dans Appareils, vous verrez une nouvelle cible distante. Cliquez sur inspect à côté de l'onglet que vous souhaitez déboguer.
- Ouvrez
Une nouvelle fenêtre "Outils de développement" s'ouvre en mode appareil. Dans la barre d'adresse en haut de la page, vous pouvez saisir l'adresse du site Web que vous souhaitez déboguer.
Vous pouvez activer/désactiver les modes de saisie à côté de la barre d'adresse.
Scénario 2: Configurer le transfert de port via USB pour votre appareil Android
Configurez le débogage à distance entre votre ordinateur de développement et votre appareil Android. Lorsque vous avez terminé, votre appareil Android devrait s'afficher dans la liste.
Assurez-vous que la case Identifier les appareils USB est cochée.
Cliquez sur Transfert de port à côté de la case à cocher.
Dans les paramètres de transfert de port,
localhost:8080
est configuré par défaut. Cochez l'option Activer le transfert de port..
Si vous souhaitez configurer d'autres ports, suivez la procédure ci-dessous. Sinon, ignorez les étapes et cliquez sur OK.
Dans le champ de texte Port à gauche, saisissez le numéro de port à partir duquel vous souhaitez accéder au site sur votre appareil Android. Par exemple, si vous souhaitez accéder au site à partir de
localhost:5000
, vous devez saisir5000
.Dans le champ de texte Adresse IP et port à droite, saisissez l'adresse IP ou le nom d'hôte sur lequel votre site s'exécute sur le serveur Web de votre ordinateur de développement, suivi du numéro de port. Par exemple, si votre site est exécuté sur
localhost:5000
, vous devez saisirlocalhost:5000
.Cliquez sur OK.
Le transfert de port est maintenant configuré. Un indicateur d'état du transfert de port s'affiche en haut de l'écran, ainsi qu'à côté du nom de l'appareil.
Pour afficher le contenu, ouvrez Chrome sur votre appareil Android et accédez au port localhost
que vous avez spécifié dans le champ Port de l'appareil. Par exemple, si vous avez saisi 5000
dans le champ, accédez à localhost:5000
.
Mapper avec des domaines locaux personnalisés
Le mappage de domaine personnalisé vous permet d'afficher le contenu d'un appareil Android à partir d'un serveur Web de votre ordinateur de développement utilisant un domaine personnalisé.
Par exemple, supposons que votre site utilise une bibliothèque JavaScript tierce qui ne fonctionne que sur le domaine chrome.devtools
de la liste d'autorisation. Vous devez donc créer une entrée dans le fichier hosts
sur votre ordinateur de développement pour mapper ce domaine à localhost
(c'est-à-dire 127.0.0.1 chrome.devtools
). Après avoir configuré le mappage de domaine personnalisé et le 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. Charles, Squid et Percent sont des exemples de serveurs proxy.
Pour configurer le transfert de port vers un proxy:
Exécutez le serveur proxy et notez le port qu'il utilise.
Configurez le transfert de port sur votre appareil Android. Dans le champ Adresse locale, saisissez
localhost:
suivi du port sur lequel votre serveur proxy est exécuté. Par exemple, s'il s'exécute sur le port8000
, vous devez saisirlocalhost:8000
. Dans le champ Device port (Port de l'appareil), saisissez le numéro sur lequel vous souhaitez que votre appareil Android écoute, par exemple3333
.
Configurer les paramètres proxy sur votre appareil
Vous devez ensuite configurer votre appareil Android pour qu'il communique avec le serveur proxy.
- Sur votre appareil Android, accédez à Paramètres > Wi-Fi.
Appuyez de manière prolongée sur le nom du réseau auquel vous êtes connecté.
Appuyez sur Modifier le réseau.
Appuyez sur Options avancées. Les paramètres du proxy s'affichent.
Appuyez sur le menu Proxy, puis sélectionnez Manuel.
Dans le champ Nom d'hôte du proxy, saisissez
localhost
.Dans le champ Port du proxy, saisissez le numéro de port que vous avez saisi pour le port d'appareil dans la section précédente.
Appuyez sur Enregistrer.
Avec ces paramètres, votre appareil transfère toutes ses requêtes au proxy de votre machine de développement. Le proxy envoie des requêtes au nom de votre appareil. Celles adressées à votre domaine local personnalisé sont donc correctement résolues.
Vous pouvez désormais accéder aux domaines personnalisés sur votre appareil Android Android comme vous le feriez sur l'ordinateur de développement.
Si votre serveur Web s'exécute sur un port non standard, n'oubliez pas de spécifier le port lorsque vous demandez le contenu à votre appareil Android. Par exemple, si votre serveur Web utilise le domaine personnalisé chrome.devtools
sur le port 7331
, lorsque vous consultez le site à partir de votre appareil Android, vous devez utiliser l'URL chrome.devtools:7331
.