Visual Studio Code Live Server Not Working

1

Visual Studio Code Live Server Not Working [Solved]

VSCode has a lot of great extensions, and Live Server is one of the best.

With just a couple of clicks, Live Server lets you see your page live in an actual browser. Better yet, it features live reloading, so if you update your code, the changes are also reflected in the browser.

All you have to do is right click in the HTML file you want to view, right click, then select “Open with Live Server”:

live-server-ex
live-server-ex1917×692 180 KB

But what if Live Server doesn’t open your browser and show your page like you expect? If this is happening to you, here are a few things you can try.

Restart VSCode

Sometimes the best you can do is start VSCode from scratch.

First, save all of your work. Then close VSCode, which will also stop all of the extensions you’ve installed.

Then, reopen VSCode and try again – go to the HTML file you want to view, right click, and select “Open with Live Server”.

Set the browser for Live Server

It’s possible that the extension is working, but your system doesn’t have a default browser.

Even if you did set the default browser for your system, it wouldn’t hurt to let Live Server know which browser you’d like to use explicitly.

First, open the Command Pallete with F1, then type in Preferences: Open Settings (JSON) and select that option.

This will open your VSCode settings.json file.

Scroll all the way to the bottom of the file and paste in "liveServer.settings.CustomBrowser": "chrome".

Scroll all the way to the bottom of the file, add a comma after the last setting, then paste in "liveServer.settings.CustomBrowser": "chrome":

settings-json
settings-json986×423 52.4 KB

Note that you can also use "firefox", "safari", or any other browser as the value for the "liveServer.settings.CustomBrowser" setting.

Finally, save the settings.json file and try to run Live Server again.

Set the default browser for your operating system

Even after telling Live Server which browser you want to use, it’s possible that it’s still not opening your page in that browser correctly.

The next thing to try is to set the default browser for your operating system itself.

The exact method for doing this can vary based on your operating system, so it’s best to search for how to do this if you aren’t sure.

Here’s what the settings page looks like in Windows:

image-56

Go to the live page yourself

If for some reason Live Server still isn’t opening the page in your browser automatically, no worries. You can always open the browser of your choice and view the page directly.

Just open your preferred browser and go to http://127.0.0.1:5500/<your_file_name>.

For example, if your file is called index.html, just go to http://127.0.0.1:5500/index.html.

As long as Live Server is running, you should see your page.

3 Likes
2

I don’t know why this does that, but what you can try:

  • Restart VSCode and try it agian, if this doesn’t work,
  • Go to the Open the Command Pallete by pressing F1, then type in Preferences: Open Settings (JSON), then at the very end on the file, copy paste this: "liveServer.settings.CustomBrowser": "chrome", so it would look like this:
    image
    image661×700 32.6 KB
    .
3

How do you start your server?

For me, it stopped working when I hit “live server”.

What works for me is right-clicking the html file and then click on Live Server. That opens up Chrome for me.

Other than that, follow what @Catalactics says.

4

I do the same thing. I right click on html file and click on start with live server but server status shows port 5500 but chrome does not open. I have reinstall the visual studio

5

PFA for reference

image
image1600×900 109 KB

7

Have you tried to uninstall the plugin as well, and re-install back on again?

8

You can either press the Go Live button, or Right click the HTML file then press Open with Live Server

image
image1366×755 99.2 KB

9

Yes i did but it is not working

1 Like
10

I used to open my files in that same way you are telling. But is is not working. I think i have to contact Microsoft support team

11

Remove chrome, visual studio altogether… restart the computer. Install chrome again, and then VS again.

12

Tried but not working

1 Like
13

Hello there,

Someone else with this issue, recently, had the issue, because they were running an outdated version of Windows.

Are you on Windows 7? Or, have you just not updated in a while?

2 Likes
14

I am using windows 8.1 recently latest updates installed.

15

Well, I recommend you do one of the following:

  1. Update to Windows 10 (if you can)
  2. Use live-server instead: https://www.npmjs.com/package/live-server

I have used live-server for years, and it has never failed.

Hope this helps

1 Like
16

I faced the same problem today when I copied code from code pen , make sure that your HTML code contains head and body tag

17

Hello my live server is not working properly , plz solve my issue anyone help me

I am right click on html file and click on start with live server but server status shows port 5500 but chrome does not open. I have reinstall the visual studio

18

have you tried opening http://127.0.0.1:5500/<your index file name>
or
http://127.0.0.1:5500/main.html

2 Likes
19

Not open my chrome browser go live
click after

20

Thanks @Advitya-sharma it worked.But can you tell me why it doesn’t directly open in chrome when i click on golive.

21

make sure your default browser for protocols is set

Screenshot (393)
Screenshot (393)1366×768 56.1 KB