Aperçu en direct du navigateur dans VS Code : Guide rapide
Rien ne brise le flux de développement comme de constamment basculer entre votre éditeur et le navigateur pour vérifier les modifications. Si vous en avez assez de la danse alt-tab à chaque fois que vous ajustez votre CSS ou mettez à jour votre HTML, les extensions d’aperçu en direct de VS Code peuvent transformer votre flux de travail. Ce guide couvre les deux meilleures options—Live Preview de Microsoft et le classique Live Server—et vous aide à choisir celle qui convient à vos projets.
Points clés à retenir
- Live Preview offre un affichage de navigateur intégré et une intégration de débogage dans VS Code
- Live Server fournit un aperçu léger dans un navigateur externe avec accessibilité réseau
- Une configuration d’espace de travail appropriée évite les problèmes courants de chemin et de racine de serveur
- Les deux extensions prennent en charge l’actualisation automatique lors des modifications de fichiers
Choisir la bonne extension d’aperçu en direct pour VS Code
Les deux extensions résolvent le même problème fondamental mais excellent dans différents scénarios. Comprendre leurs forces vous aide à choisir l’outil qui correspond à votre flux de travail.
Microsoft Live Preview : Le choix moderne
Live Preview excelle lorsque vous avez besoin de plus qu’un simple service de fichiers. Son navigateur intégré garde tout dans VS Code, parfait pour les tutoriels, ateliers, ou lorsque l’espace d’écran compte. L’extension offre deux modes d’actualisation : mises à jour instantanées pendant que vous tapez ou comportement traditionnel de sauvegarde-pour-actualiser.
Utilisez Live Preview lorsque vous avez besoin de :
- Aperçu intégré à côté de votre code
- Journalisation des requêtes serveur pour le débogage
- Intégration avec le débogueur JavaScript intégré de VS Code
- Edge DevTools pour l’inspection d’éléments
L’extension fonctionne mieux avec les sites statiques et les SPA simples. Pour les frameworks complexes avec leurs propres serveurs de développement (React, Vue, Angular), restez avec les outils du framework.
Live Server : L’alternative légère
Live Server reste le choix de référence pour les développeurs qui veulent la simplicité. Un clic lance votre projet dans un navigateur externe avec actualisation automatique à la sauvegarde. Sa fonctionnalité phare ? L’accessibilité réseau—testez votre design responsive sur de vrais téléphones et tablettes en utilisant l’adresse IP locale de votre ordinateur.
Choisissez Live Server pour :
- Développement rapide de sites statiques
- Tests responsive multi-appareils
- Exigences de configuration minimales
- Flux de travail traditionnel avec navigateur externe
Configuration rapide : De l’installation à l’aperçu en direct
Installation de l’extension choisie
Ouvrez le panneau d’extensions de VS Code (Ctrl+Shift+X ou Cmd+Shift+X sur Mac). Recherchez soit “Live Preview” (par Microsoft) soit “Live Server” (par Ritwick Dey). Vérifiez le nom de l’éditeur—plusieurs extensions dépréciées apparaissent encore dans les résultats de recherche. Cliquez sur installer et vous êtes prêt.
Démarrage de votre premier aperçu en direct
Première étape critique : Ouvrez votre dossier de projet comme espace de travail (Fichier > Ouvrir le dossier). Les aperçus de fichiers uniques fonctionnent mais causent des problèmes de chemin avec les ressources liées.
Pour Live Preview : Clic droit sur n’importe quel fichier HTML et sélectionnez “Show Preview” pour la vue intégrée ou “Show Preview in External Browser” pour le flux de travail traditionnel.
Pour Live Server : Clic droit sur votre fichier HTML et choisissez “Open with Live Server” ou cliquez sur “Go Live” dans la barre d’état.
Les deux extensions surveillent vos fichiers et s’actualisent automatiquement. Sauvegardez vos modifications et regardez l’aperçu se mettre à jour—aucune actualisation manuelle nécessaire.
Discover how at OpenReplay.com.
Problèmes courants et corrections rapides
Pièges espace de travail vs fichier unique
Vous voyez des avertissements “file is not a child of the server root” ? Vous avez rencontré le problème le plus courant. Les deux extensions servent les fichiers depuis la racine de votre espace de travail. Ouvrir des fichiers individuels sans espace de travail brise les chemins relatifs. Ouvrez toujours votre dossier de projet, pas seulement le fichier HTML.
Besoin de servir depuis un sous-dossier ? Ajustez la racine du serveur dans les paramètres :
{
"livePreview.serverRoot": "/src"
}Pour Live Server, utilisez :
{
"liveServer.settings.root": "/src"
}La correction universelle “Reload Window”
Options du menu contextuel manquantes ? Extension qui ne répond pas ? Avant de dépanner davantage, essayez la correction universelle de VS Code : Ctrl+Shift+P (ou Cmd+Shift+P sur Mac), puis “Developer: Reload Window”. Cela résout la plupart des dysfonctionnements d’extension sans perdre votre travail.
Conseils avancés pour les utilisateurs expérimentés
Configuration de port et espaces de travail multi-racines
Ports par défaut déjà pris ? Configurez des ports personnalisés dans les paramètres :
{
"liveServer.settings.port": 5501,
"livePreview.portNumber": 3001
}Travaillez avec des espaces de travail multi-racines ? Chaque racine obtient sa propre instance de serveur. Survolez l’indicateur de la barre d’état pour voir tous les ports actifs.
Environnements spéciaux : Codespaces et développement à distance
Vous utilisez GitHub Codespaces ? L’aperçu intégré nécessite une redirection de port manuelle. Ouvrez le panneau Ports, cliquez sur les URLs redirigées pour déclencher l’authentification, puis redémarrez l’aperçu. L’aperçu dans un navigateur externe fonctionne généralement sans étapes supplémentaires.
Vous remarquez des différences de style entre les aperçus intégré et externe ? Videz le cache de votre navigateur externe—l’aperçu intégré démarre toujours à neuf tandis que les navigateurs externes peuvent servir des ressources mises en cache.
Conclusion
Choisissez Live Preview lorsque vous avez besoin d’outils de débogage, d’aperçu intégré, ou de journalisation serveur. Optez pour Live Server pour un hébergement statique simple avec test sur appareils. Les deux extensions reçoivent des mises à jour régulières et fonctionnent de manière fiable avec VS Code moderne.
Commencez par faire correspondre l’extension à votre type de projet. HTML/CSS/JS statique ? Les deux fonctionnent. Besoin de débogage ? Live Preview. Tests sur plusieurs appareils ? Live Server. La meilleure configuration d’aperçu en direct VS Code est celle qui ne vous gêne pas et vous permet de vous concentrer sur la construction.
FAQ
Oui, vous pouvez installer et utiliser les deux extensions en même temps. Elles fonctionnent indépendamment et peuvent servir différents projets sur différents ports. Attention simplement aux conflits de ports et configurez des ports personnalisés si nécessaire.
Vérifiez si votre navigateur met en cache le fichier CSS. Essayez une actualisation forcée avec Ctrl+Shift+R ou videz le cache. Pour l'aperçu intégré, assurez-vous que la sauvegarde automatique est activée ou sauvegardez manuellement vos fichiers. Certains utilisateurs trouvent que changer les modes d'actualisation dans les paramètres aide.
Aucune extension ne gère les langages côté serveur comme PHP ou Python. Pour ceux-ci, vous avez besoin d'un environnement de serveur local approprié comme XAMPP, WAMP, ou Docker. Ces extensions servent uniquement des fichiers statiques et du JavaScript côté client.
Oui, Live Server vous permet de spécifier votre navigateur par défaut dans les paramètres. Ajoutez ceci à votre fichier settings.json avec le nom de votre navigateur préféré comme chrome, firefox, ou edge. Les noms exacts des navigateurs varient selon le système d'exploitation.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
