Why Visual Studio Code Live Server Not Working?

by Posted on December 19, 2021


Visual Studio Code or VS Code is nowadays one of the most popular code editors and many developers like to use VS Code as their default code editor. VS Code has an excellent extension called live server. Which helps to see a webpage live in an actual browser. Just all you need to do? Right-click and then select “Open with live server”.

This extension works fine with most of the machines but some of you might face an issue, it’s not working perfectly on your machine. In this article, I will try to give you some ways how to mitigate the issue and have an excellent coding experience with vs code live server, let’s begin.

Step 01.

VS code live server does not run on the only files. If you need to open an HTML file with the live server that file must be on a folder and you need to open the folder with VS Code then open the file and Right-click and then select “Open with Live Server”.

Step 02.

VS Code live server does not work properly if folder name has space. If your folder name has any space it will not work properly. So make sure your folder name does not have any space. If need you can use Hypan (-) or Underscore (_). This trick might help you to mitigate the problem.

Step 03.

VS live servers do not work properly without a valid HTML structure. You heard right. If you tried to work with an HTML file and want to work with the live server make sure you have proper HTML markup. Like HTML, BODY, HEAD, meta all have properly. Use VS Code Shortcut Ctrl + ! to have nice and perfect HTML markup.

Still, your issues are not fixed, let’s go a bit deeper and check why it’s not working.

Step 04.

Restart VS Code. Sometimes just restarting the code editor can solve your problem. So just do this and check if everything works fine or not.

Step 05.

Set the default browser for your operating system. Sometimes after an Operating System update, our system default browser settings reset automatically, In this situation select your desired browser as default. So let’s check.

Win11 ⇒ setting > app > Default apps

Win10 ⇒ settings ⇒ Apps ⇒ Default apps >Web Browser and select your one

ubuntu ⇒ settings > Default Application > Select your one

mac ⇒ Launchpad > System Preferences > general > Default Web Browser.

Step 06.

Set the browser for Live Server ⇒ Setting > Extensions > Live Server Config > Custom browser > select your browser

If still it’s not working properly open settings.json file and make sure you have this line.

"liveServer.settings.CustomBrowser": "chrome:PrivateMode",

If still, it’s not working Add the perfect port for it.

"liveServer.settings.port": 0

I tried my best to speak as many details as possible with common fixed why your live server does not work. I hope this article is helpful to you. What do you think? let me know in the comment. Please do not forget to support me by sharing this article. Have a good day and stay safe. See you soon.

Check the following video, if you feel you need more help.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.