Accéder aux serveurs locaux

Hébergez un site sur un serveur web d’ordinateur de développement, puis accédez au contenu à partir d’un appareil Android.

Le transfert de port vous permet d’afficher le contenu hébergé par le serveur web s’exécutant sur votre ordinateur de développement sur votre appareil Android.

Si votre serveur web utilise un domaine personnalisé, configurez votre appareil Android pour accéder au contenu de ce domaine avec un mappage de domaine personnalisé.

Avec un câble USB et Microsoft Edge DevTools, exécutez un site à partir d’un ordinateur de développement, puis affichez le site sur un appareil Android.

Configurer le transfert de port

Le transfert de port permet à votre appareil Android d’accéder au contenu hébergé sur le serveur web s’exécutant sur votre ordinateur de développement. Le transfert de port fonctionne en créant un port TCP d’écoute sur votre appareil Android qui correspond à un port TCP sur 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, de sorte que la connexion ne dépend pas de votre configuration réseau.

Pour activer le transfert de port :

1. Configurez le débogage à distance entre votre ordinateur de développement et votre appareil Android. Lorsque vous avez terminé, votre appareil Android doit s’afficher dans le menu de gauche de la boîte de dialogue Inspecter les appareils et un indicateur status connecté.

2. Dans la boîte de dialogue Inspecter les appareils de DevTools, activez le transfert de port.

3. Cliquez sur Ajouter une règle.

   

4. Dans la zone de texte Port de l’appareil à gauche, entrez le localhost numéro de port à partir duquel vous souhaitez pouvoir accéder au site sur votre appareil Android. Par exemple, si vous souhaitez accéder au site à partir de localhost:5000 , entrez 5000.

5. Dans la zone de texte Adresse locale à droite, entrez l’adresse IP ou le nom d’hôte sur lequel votre site est hébergé sur le serveur web s’exécutant sur votre ordinateur de développement, suivi du numéro de port. Par exemple, si votre site s’exécute sur, localhost:7331 entrez localhost:7331.

6. Cliquez sur Ajouter.

Le transfert de port est maintenant configuré.

Vous pouvez voir l’indicateur de status pour le port vers l’avant en haut, ainsi qu’en regard du nom de l’appareil. L’indicateur de transfert de port se trouve sous l’onglet de votre appareil dans la boîte de dialogue Inspecter les appareils .

Pour afficher le contenu, ouvrez Microsoft Edge sur votre appareil Android et accédez au localhost port que vous avez spécifié dans le champ Port de l’appareil . Par exemple, si vous avez entré 5000 dans le champ , visitez localhost:5000.

Mapper à 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 ordinateur de développement qui utilise un domaine personnalisé.

Par exemple, supposons que votre site utilise une bibliothèque JavaScript tierce qui fonctionne uniquement sur le domaine microsoft-edge.devtools. Par conséquent, vous créez une entrée dans votre hosts fichier sur votre ordinateur de développement pour mapper ce domaine à localhost (par exemple, 127.0.0.1 microsoft-edge.devtools). Après avoir configuré le mappage de domaine personnalisé et le transfert de port, affichez le site sur votre appareil Android à l’URL microsoft-edge.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 Fiddler sont des exemples de serveurs proxy.

Pour configurer le transfert de port vers un proxy :

1. Exécutez le serveur proxy et enregistrez le port qu’il utilise.

   Remarque

   Le serveur proxy et votre serveur web doivent s’exécuter sur des ports différents.

2. Configurez le transfert de port vers votre appareil Android. Pour le champ d’adresse locale , entrez localhost: suivi du port sur lequel votre serveur proxy s’exécute. Par exemple, s’il s’exécute sur le port 8000, accédez à localhost:8000. Dans le champ Port de l’appareil , entrez le numéro que vous souhaitez que votre appareil Android écoute, par 3333exemple .

Configurer les paramètres de proxy sur votre appareil

Ensuite, vous devez 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 longuement sur le nom du réseau auquel vous êtes actuellement connecté.

   Remarque

   Les paramètres de proxy s’appliquent par réseau.

3. Cliquez sur Modifier le réseau.

4. Cliquez sur Options avancées. Les paramètres du proxy s’affichent.

5. Cliquez sur le menu Proxy , puis sélectionnez Manuel.

6. Pour le champ Nom d’hôte du proxy , entrez localhost.

7. Pour le champ Port proxy , entrez le numéro de port que vous avez entré pour le port de l’appareil dans la section précédente.

8. Cliquez sur Save (Enregistrer).

Avec ces paramètres, votre appareil transfère toutes ses demandes au proxy sur votre ordinateur de développement. Le proxy effectue des requêtes au nom de votre appareil, de sorte que les demandes adressées à votre domaine local personnalisé sont correctement résolues.

Accédez maintenant aux domaines personnalisés sur votre appareil Android, comme sur l’ordinateur de développement.

Si votre serveur web s’exécute à partir d’un port non standard, n’oubliez pas de spécifier le port lors de la demande de contenu à partir de votre appareil Android. Par exemple, si votre serveur web utilise le domaine microsoft-edge.devtools personnalisé sur le port 7331, lorsque vous affichez le site à partir de votre appareil Android, vous devez utiliser l’URL microsoft-edge.devtools:7331.

Conseil

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

Remarque

Les parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisées conformément aux termes décrits dans la licence internationale Creative Commons Attribution 4.0. La page d’origine est disponible ici et est créée par Kayce Basques (Rédacteur technique, Chrome DevTools & Lighthouse) et Meggin Kearney (Rédacteur technique).

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.