Visual Studio Code Live Server ne fonctionne pas

VSCode a beaucoup d'extensions intéressantes et Live Server est l'un des meilleurs.

En quelques clics, Live Server vous permet de voir votre page en direct dans un navigateur réel. Mieux encore, il propose un rechargement en direct, donc si vous mettez à jour votre code, les modifications sont également reflétées dans le navigateur.

Tout ce que vous avez à faire est de faire un clic droit dans le fichier HTML que vous souhaitez visualiser, un clic droit, puis sélectionner "Ouvrir avec Live Server":

Mais que se passe-t-il si Live Server n'ouvre pas votre navigateur et affiche votre page comme prévu? Si cela vous arrive, voici quelques choses que vous pouvez essayer.

Redémarrez VSCode

Parfois, le mieux que vous puissiez faire est de démarrer VSCode à partir de zéro.

Tout d'abord, enregistrez tout votre travail. Fermez ensuite VSCode, qui arrêtera également toutes les extensions que vous avez installées.

Ensuite, rouvrez VSCode et réessayez - accédez au fichier HTML que vous souhaitez afficher, cliquez avec le bouton droit de la souris et sélectionnez «Ouvrir avec Live Server».

Configurer le navigateur pour Live Server

Il est possible que l'extension fonctionne, mais votre système n'a pas de navigateur par défaut.

Même si vous avez défini le navigateur par défaut pour votre système, cela ne ferait pas de mal d'indiquer à Live Server quel navigateur vous souhaitez utiliser explicitement.

Tout d'abord, ouvrez la palette de commandes avec F1, puis tapez Preferences: Open Settings (JSON)et sélectionnez cette option.

Cela ouvrira votre settings.jsonfichier VSCode .

Faites défiler jusqu'au bas du fichier et collez-le "liveServer.settings.CustomBrowser": "chrome".

Faites défiler jusqu'au bas du fichier, ajoutez une virgule après le dernier paramètre, puis collez "liveServer.settings.CustomBrowser": "chrome":

Notez que vous pouvez également utiliser "firefox", "safari"ou tout autre navigateur comme valeur du "liveServer.settings.CustomBrowser"paramètre.

Enfin, enregistrez le settings.jsonfichier et essayez à nouveau d'exécuter Live Server.

Définissez le navigateur par défaut pour votre système d'exploitation

Même après avoir indiqué à Live Server quel navigateur vous souhaitez utiliser, il est possible qu'il n'ouvre toujours pas correctement votre page dans ce navigateur.

La prochaine chose à essayer est de définir le navigateur par défaut pour votre système d'exploitation lui-même.

La méthode exacte pour cela peut varier en fonction de votre système d'exploitation, il est donc préférable de rechercher comment faire cela si vous n'êtes pas sûr.

Voici à quoi ressemble la page des paramètres sous Windows:

Accédez vous-même à la page en direct

Si, pour une raison quelconque, Live Server n'ouvre toujours pas la page dans votre navigateur automatiquement, pas de soucis. Vous pouvez toujours ouvrir le navigateur de votre choix et afficher directement la page.

Ouvrez simplement votre navigateur préféré et accédez à //127.0.0.1:5500/.

Par exemple, si votre fichier est appelé index.html, accédez simplement à //127.0.0.1:5500/index.html.

Tant que Live Server est en cours d'exécution, vous devriez voir votre page.

En clôture

Ce sont quelques correctifs courants que vous pouvez essayer si Live Server ne fonctionne pas comme vous le souhaitez.

Restez sûr et heureux de coder (en direct).