[Fix] VS Code *Live Server Not Working*

VS Code Live Server Not Working


Live Server - It's a very pleasent extension for all the web developers over there. It helps to open up your project in browser with in a click, and automatically reloads the browser tab, as you save you work.

This tool is a must for those who love to code on Visual Studio Code. Moreover, many of them might only be using VS Code due to this awesome extension.

But here's a catch, it sometimes can also give some awful errors or just don't work, making the whole coding exprience worst. But don't worry, today we will see - How to fix Live Server in Visual Studio Code?

So let's get started!

(Watch Video: Video is available at the end of this article)

Restart VS Code

Sometimes your Visual Studio Code might stop working for a while due to a whole bunch of commands given by you at once, which might not be easier for it to execute at the moment.

In such cases, only re-starting the program can be very useful. This will let your VS Code refresh itself and start again.

So, firstly save your project work. Then, close and re-open VS Code. If this works then it's great, else follow along the next method!



Set default browser (System)

If you hasn't set any default browser of your Operating System (OS) or it has just messed up with the location of the program, then your Live Server won't be able to know which one browser it should open.

So, follow the following steps to set the default browser:

VS Code Live Server Not Working

  1. Step 1. Use Win + I shortcut command to open up the settings.
  2. Step 2. Now, navigate to Apps & Features.
  3. Step 3. Then, click on Default apps on the left side.
  4. Step 4. Scroll down the list, and choose Web browser.
  5. Step 5. Then, select the browser that suits you the best.
After this, re-open your VS Code and try opening your work in browser using Live Server. If it still didn`t work, then you can try out the next way.

Set default browser (VS Code)

By telling Live Server that which browser it should open, you can also solve this problem.

Follow the following steps to set the default browser in VS Code:

Fix: Live Server Not Working in VS Code

  1. Step 1. Press F1 key to open up the Command Pallete.
  2. Step 2. Search for, Preferences: Open Settings (JSON), and open it up.
  3. Step 3. At the end of the last setting, put a comma(,) and paste this:
    "liveServer.settings.CustomBrowser" : "chrome".

Note: Here, you can change the custom browser from chrome to some other browser of your choice.

Manually Open Live Server

If your Live Server don't opens up the browser tab on giving command, there might be some minimal issue with your Live Server.

Fix: Live Server Not Working in VS Code

So, you can otherwise try opening up the following link manually in browser: http://127.0.0.1:5500/<filesname>

Here, change the <filesname> to your prefered file location. For example: http://127.0.0.1:5500/index.html

If it works then it's great, this means that there was only some problem while opening up your browser, and your Live Server still works effectively.



Error: Server is started...but failed to open in Browser Preview

If you are the one who's getting this type of error, shortly after trying to run the Live Server, then this problem can be solved by doing some changes in the settings.

Follow these steps to fix this issue:

Fix: Live Server Not Working in VS Code

  1. Step 1. Press Ctrl + Shift + X keys to open up the Extensions. Or, you can click on the extensions icon on the left side to open it up.
  2. Step 2. Move to Live Server extension under Installed.
  3. Step 3. Click on the gear icon at it's bottom and open up Extension Settings.
  4. Step 4. Navigate to  Live Server > Settings : Use Browser Preview, if it's selected then un-select it.
  5. Step 5. Now, move to Live Server > Settings : Use Local Ip, if it's un-selected then select it.

It's done, now you can try opening your work in browser using the Live Server. Now, it should work properly.

Conclusion

So, these were the solutions for visual studio code live server not working:
  1. Restart VS Code
  2. Set Default Browser (VS Code)
  3. Set Default Browser (System)
  4. Manually Open Live Server
These were the different ways using which you can fix your Live Server not working problem inside Visual Studio Code. In case of any problem, you can write it down in the comments section below.




2 Comments

Please don't add any spam link in the comment box!

  1. thank you so much it's really useful information and helped me to make live server work

    ReplyDelete
Previous Post Next Post