Obtenir que VS Code fonctionne correctement avec le lancement du navigateur peut être compliqué, surtout lors du débogage ou de l’exécution de votre application web depuis l’éditeur. Parfois, il refuse tout simplement d’ouvrir la fenêtre du navigateur, même si vous cliquez plusieurs fois sur « Exécuter » ou « Déboguer ».La cause n’est pas toujours évidente : il peut s’agir d’un fichier launch.json mal configuré, d’un conflit d’extension sournois, voire d’un bug d’autorisation étrange. Voici donc quelques astuces pratiques qui pourraient vous sauver la vie ; l’objectif est de faire apparaître le navigateur lorsque vous appuyez sur F5 ou cliquez à nouveau sur le bouton de débogage.
Attendez-vous à ce que ces correctifs vous aident à faire en sorte que votre serveur local ou votre build web lance automatiquement le navigateur, ce qui est très utile pour tester rapidement. Ces correctifs ne sont pas garantis, mais dans quelques configurations, ils ont permis de résoudre le problème, notamment si VS Code refuse d’ouvrir le bon navigateur ou refuse de le lancer. Si vous êtes bloqué, essayez ces solutions ; parfois, un simple réglage suffit.
Comment résoudre les problèmes de lancement du navigateur dans VS Code
Correction 1 – Exécuter VS Code sans droits d’administrateur
Cela pose de nombreux problèmes. Si VS Code est exécuté en mode administrateur, il peut rencontrer des difficultés pour s’ouvrir ou se connecter à votre navigateur, surtout si celui-ci est en mode utilisateur standard ou sandbox. L’exécuter normalement (sans administrateur) permet donc de mieux synchroniser les applications : Windows n’est pas toujours très favorable au fonctionnement des applications dans les deux modes.
- Recherchez Visual Studio Code dans le menu Démarrer. Faites un clic droit et choisissez « Ouvrir l’emplacement du fichier ».
- Ensuite, cliquez avec le bouton droit sur le raccourci VS Code et sélectionnez à nouveau Ouvrir l’emplacement du fichier pour accéder au répertoire d’installation réel.
- Cliquez avec le bouton droit sur Code.exe et appuyez sur Propriétés.
- Allez dans l’ onglet Compatibilité et décochez la case Exécuter ce programme en tant qu’administrateur. Bien sûr, Windows rend la tâche plus compliquée qu’elle ne l’est.
- Cliquez sur OK et redémarrez VS Code. Essayez ensuite de relancer votre build. Parfois, sur certaines configurations, cela fait une réelle différence.
Correction 2 – Vérifier et ajuster launch.json pour une configuration de navigateur appropriée
Cela résout de nombreux problèmes. Le fichier launch.json indique à VS Code comment lancer votre navigateur et quels paramètres transmettre. S’il est mal configuré, VS Code risque de ne rien ouvrir, voire pas du tout. Commencez par vérifier que vous utilisez le bon type pour votre navigateur cible. Pour Edge, choisissez « msedge », et pour Chrome, « pwa-chrome » ou « pwa-msedge » si vous ciblez les versions PWA.
- Ouvrez votre dossier de projet dans VS Code.
- Cliquez sur l’ icône Déboguer sur le côté, puis sur l’icône ⚙️ pour ouvrir le fichier launch.json. S’il n’est pas présent, créez-en un à la racine ou dans le dossier.vscode.
- Assurez-vous que votre configuration de lancement ressemble à ceci : ajustez le « type » selon vos besoins :
{ "version": "0.2.0", "configurations": [ { "type": "msedge", // or "pwa-chrome" for Chrome "request": "launch", "name": "Launch my app", "url": "http://localhost:3000" } ] } // For Chrome "type": "pwa-chrome" // For Edge "type": "pwa-msedge" { "type": "msedge", // or "pwa-chrome" "request": "launch", "name": "Launch Edge", "url": "http://localhost:8080", "runtimeExecutable": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe" } Correction 3 – Assurez-vous que VS Code est à jour
La simple vérification des mises à jour ne concerne pas uniquement les bugs de sécurité : les mises à jour de VSCode peuvent corriger des bugs liés au débogage et au lancement des navigateurs. Si votre VS Code a quelques versions de retard, il est judicieux de le mettre à jour.
- Lancez VS Code, puis cliquez sur Aide > Rechercher les mises à jour.
- La dernière version sera téléchargée, puis vous serez invité à redémarrer. Effectuez cette opération, rechargez votre projet et réessayez. Parfois, une simple mise à jour suffit à résoudre les problèmes les plus étranges.
Correction 4 – Désactiver temporairement l’antivirus/pare-feu
Attention : les logiciels de sécurité peuvent empêcher VS Code de lancer des navigateurs ou d’y attacher des interfaces de débogage. Si vous pensez pouvoir les désactiver temporairement, essayez-les.
- Ouvrez Sécurité Windows, accédez à Protection contre les virus et les menaces.
- Cliquez sur Gérer les paramètres.
- Désactivez la protection en temps réel et les fonctionnalités associées telles que la protection fournie par le cloud.
- Réessayez de lancer votre application Web à partir de VS Code — cela pourrait simplement relancer cette fenêtre de navigateur.
Bien sûr, réactivez les éléments de sécurité après le test, ne les laissez pas désactivés pour toujours.
Correction 5 – Utiliser le débogueur intégré de VS Code et envisager des outils externes
L’avantage de VS Code est son propre débogueur, capable de gérer JS, Node et d’autres cibles de débogage sans nécessiter de plugins de navigateur externes. Si vous pensez que les configurations de votre navigateur posent problème, essayez de déboguer avec le débogueur intégré plutôt qu’avec des outils externes comme Chrome Debugger (qui est de toute façon un peu obsolète).
Si vous souhaitez vraiment déboguer dans Chrome, vous pouvez également lancer Chrome DevTools directement depuis le navigateur ou attacher le débogueur de VS Code à une instance Chrome déjà en cours d’exécution, mais c’est une toute autre histoire.
Correction 6 – Réinstaller VS Code
Si aucune des solutions ci-dessus ne fonctionne, une réinstallation propre permet parfois d’éliminer tout problème aléatoire qui hante votre configuration.
- Tapez VS Code dans la zone de recherche, puis faites un clic droit et choisissez Désinstaller.
- Téléchargez le dernier programme d’installation à partir du site officiel.
- Réinstallez, rechargez votre projet et voyez si le navigateur s’ouvre. Cela a fonctionné pour moi sur quelques machines ; j’espère que cela fonctionnera aussi pour vous.