Dans le développement web, il est crucial de tester son site sur différents appareils, y compris les smartphones et tablettes, afin d’assurer une expérience utilisateur optimale.
Visual Studio Code (VS Code) facilite cette tâche grâce à ses fonctionnalités de transfert de ports. Découvrez comment tester facilement votre site local sur mobile en quelques étapes simples.
Configuration du Docker et exposition du port
Si votre projet utilise Docker, commencez par exposer le port du serveur web (Nginx, Node.js, Apache, etc.) que vous souhaitez rendre accessible à l’extérieur :
- Modifiez le fichier compose.override.yml (ou docker-compose.override.yml en fonction de votre version de docker compose) pour spécifier le port à exposer.
- Ouvrez VS Code et allez à l’onglet « Ports » :
-
-
- Cliquez sur « View » > « Ports »
- Ou faites un clic droit sur l’onglet Terminal et sélectionnez « Ports »
-
- Ajoutez un transfert de port :
-
-
- Cliquez sur « Transférer un port »
- Saisissez le port que vous avez configuré
-
- Autorisez l’accès si une confirmation est demandée.
- Récupérez l’URL généré automatiquement par VS Code via devtunnels.ms.
Note : Cette procédure fonctionne également pour des projets sans Docker, tels que ceux utilisant React, Angular ou Vue. Transférer directement le port alloué à votre projet.
Rendre le port public et tester
Pour tester votre site sur un appareil mobile :
- Modifiez la visibilité du port :
-
-
- Faites un clic droit sur le port concerné et sélectionnez « Visibilité du port ».
- Changez l’état de « Privé » à « Public » pour permettre un accès externe.
-
- Copiez l’URL généré à côté du port dans l’onglet « Ports ».
- Testez sur vos appareils :
-
- Ouvrez le navigateur de votre smartphone ou tablette.
- Collez l’URL pour accéder à votre site et vérifier son rendu.
Exemples concrets et cas pratiques
Voici comment configurer l’exposition du port.
Dans le fichier compose.override.yml :
Si on prend l’exemple avec l’utilisation d’un container nginx :
Cela permet d’exposer le port 80 en externe via le port 88, pour y accéder depuis un autre appareil.
Si on prend l’exemple avec l’utilisation d’un container node :
Cela permet d’exposer le port 3000 via le port 3001 pour y accéder depuis un autre appareil.
Dans le transfert des ports, il faudra mettre le 88 ou le 3001.
Dépannage des erreurs courantes
- Port bloqué : Assurez-vous qu’aucun autre service n’utilise déjà le port attribué.
Inspecter un site sur iPhone/iPad
Pour aller plus loin, vous pouvez utiliser l’outil d’inspection de Safari sur macOS pour analyser le rendu de votre site sur un appareil iOS.
- Connectez votre iPhone/iPad à votre Mac via USB ou Wi-Fi.
- Ouvrez Safari sur Mac et activez le menu « Développement ».
- Sélectionnez votre appareil dans le menu « Développement » pour afficher l’inspecteur web.
- Analysez le code et ajustez votre site en fonction des retours visuels et des erreurs détectées.
Bonnes pratiques et sécurité avancée
- Limiter le partage : ne communiquez l’URL qu’à des personnes de confiance pour éviter tout risque d’accès non autorisé.
- Désactiver rapidement l’accès : après vos tests, pensez à repasser le port en mode privé ou à le supprimer.
En suivant ces étapes, vous pouvez facilement tester votre site local sur mobile et améliorer son expérience utilisateur avant de le mettre en ligne. 🚀
