12

I have installed the live server extension but the browser does not update after I save my HTML or other files. What might be causing a problem?

1

29 Answers 29

Reset to default
10

I had this problem and I solved it by changing the port number in the settings.json file to an opened one.

To get to the settings.json file you just click CTRL+SHIFT+P, then type "settings", click the "Preferences: Open Settings (JSON)", then paste this inside the { }:

"liveServer.settings.port": 0

This will randomly pick an opened port each time. This is how my JSON file looks like:

{
    "liveServer.settings.port": 0
}

If there are multiple lines in the JSON file, make sure each line is separated by a comma(,), like this:

{
    "liveServer.settings.CustomBrowser": "microsoft-edge",
    "liveServer.settings.port": 0
}
6

Re-install the extension and restart your text editor to fix the issue.

0
3

I have gone through many solutions and picked few combinations and all of a sudden it worked. So here are the steps:

Go to system environment variables > system variables > click on path > edit > add new path line : C:\Windows\System32 > apply it and close.

Now open VS Code and (re-)install Live Server.

Go to extension settings of Live Server.

Click on "Edit in settings.json" and add below statements:

"liveServer.settings.root": "/", "liveServer.settings.port": 63404, (this port number varies) Now go back to extension settings again and scroll down to set Live Server Custom Browser. Choose Null from the dropdown.

Note: These points all together solved my issue and may not work or work for others.

1
  • I didn't need to put that port number I just had 0 in there and it worked Below are my settings "liveServer.settings.AdvanceCustomBrowserCmdLine": "", "liveServer.settings.CustomBrowser": "chrome", "liveServer.settings.port": 0, "liveServer.settings.root": "/"
    – e11world
    Commented Jan 17, 2023 at 23:29
2

If live server is not runnning and rendering html page on port 5500,for example http://127.0.0.1:5500/index.html not working.

Then this may be due to connection issue on your system.

I had same problem when i was compiling below html page:

<!DOCTYPE html>
<html>
<body>
    <h1>Hello world</h1></body>
</html>

Solved it by changing live server settings to my local IP and it fixed issue.

My local ip: http://192.168.2.16:5500/index.html is rendering changes on fly and working.

For steps, you can refer: https://www.youtube.com/watch?v=_B3RRVhgCOw

This works for anyone for whom live server is not running by default with port 5500.

2
  • For such issues, refer settings.json file in vs code. { "liveServer.settings.useLocalIp": true, "liveServer.settings.CustomBrowser": "chrome" } Also if you are behind company firewall, this method might not work and you need to get it opened.
    – Avneet
    Commented Apr 30, 2021 at 0:18
  • Doesn't help. The issue is the server is not "live". I have to refresh page in browser.
    – Khom Nazid
    Commented Apr 5 at 12:21
2

It is because you have added insufficient paths in your Environmental variables.

  1. First you can do is close the vs code

  2. Go to the properties of My Pc

  3. Click on Advanced Settings

  4. click on Environmental Variables

  5. from there you can add path clicking the path variables in the table shown there 6 . Add a new line to the path and copy paste the path of your system 32

C:\Windows\System32

hope this solution works in your case

1

go to extension settings and edit settings.json. add this two lines

  "liveServer.settings.root": "/", 
  "liveServer.settings.port": 63404

you can set port number as your free port.

this changes works for me.

0
0

Live server started but still isn't opening the page in your browser automatically

open your preferred browser and type http://127.0.0.1:5500/<if_directory_name>/<else_direct_your_file_name>

example:

http://127.0.0.1:5500/index.html
-or-
http://127.0.0.1:5500/your_folder_name/index.html

Note: some time port number 5500 will be changed to 5501

0

I had a space in the file name, where the index.html was to be found.
Like: 3. Typography.
Just got rid of the space: 3.Typography because (of course) we can not have empty spaces in a url.

0

its easy to solve. just open setting by (ctrl + ,)and pick commonly Used first field is a (Auto save) Its value is by default off you must change it to After delay

1
  • Doesn't do anything.
    – Khom Nazid
    Commented Apr 5 at 12:20
0

Please use the proper HTML syntax which is 👇

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello, World</title>
</head>

<body>
  My first Web dev code
</body>

</html>

Being a newbie to web development, I was only using the head tag. The web page was working in the browser but the live server couldn't process it. You can get the above snippet in vscode by typing html:5 and then hitting tab.

Also, make sure that the autosave feature in vscode is enabled, which you can do by going to vscode settings shortcut : Ctrl + , and then type autosave. Change Files: Auto Save to afterDelay and if you want to view the changes in your code instatenously, edit Files: Auto Save Delay to 1 .

Now sit back and watch the magic happen😁.

1
  • Doesn't work. I still have to go the browser and manually refresh. So it's not "live".
    – Khom Nazid
    Commented Apr 5 at 12:23
0

Best way to solve 5500 port number error

Check the port number below in the Go Live section if it is (5500 port number) then go to browser window and type localhost:5500 then select your project folder then you can see the automatic update.

0

I was using this in a folder and folder's name has some irregular letters like capital i "İ". When I chance the folder's name to suits english rules it works.

0

This is happening because you have changed some default settings. You should reset them all to run the live server. Unless you should define what did you change to the live server.

If the live server still not working,

  1. Make sure you have embedded your folder to VS code. If you didn't just press Ctrl + B and Click on the Add New Folder Icon. Then choose your project's folder. Then right-click on your project.html and it will open.

  2. If didn't work, type in the Address bar in your browser like 127.0.0.1:5500. Localhost server should open now.

  3. Still, you had the problem, they try to close and reopen VS code several times.

  4. If still, you got the problem, try to install your default web browser in the default path in your C drive. (C://Program files.....)

  5. If you still have the problem it might be a problem with the live server. You should uninstall it and install another version outed lately.

0

In my case reinstalling did not help. After investigation of settings (JSON) I found that regardless removal of the extension I still have option from legacy version which tells Live Server to communicate to legacy Chrome Extension. So, you can search for

"liveServer.settings.useWebExt": true,

If you see such string, you can either comment it out or just delete the line. This worked for me.

0

Well, l am not quite sure why this worked for me. l changed my default browser from null to chrome:PrivateMode in VSCode under Settings/Extensions/Live Server Config/ Custom Browser. Restart VS Code and try again.

0

for me my extension was installed and I could see go live button, but when I clicked on that did not work. the solution was in my variable path. when I change the path to the correct one with set "PATH=%PATH%;C:\Users\mesimohi\AppData\Local\Programs\Python\Python310\Scripts" command it worked!

0
  1. Open the Extensions list (ctrl+shift+X)
  2. Go to Live Server Five Server (I'm using this extension)
  3. Open the context menu (right mouse button) or click on the settings icon
  4. Select ENABLE (WORKSPACE)

screenshot of Live Server extension with context menu

0

The first setting you should change is the auto save. First press ctrl + , and then change the first field titled 'Auto Save' to be afterDelay.

0

I have an easier method that worked for me. Go to VS Code settings using CTRL + , Search for autosave then set its value as afterdelay. and on after delay set the milliseconds to be 200.

I hope this helps.

-1

I have same problem then i solve it by deleting all settings of live server from settings.json file and reinstall live server extension and now running it correctly.

vs code

-1

Turn on the autosave feature on. File-> AutoSave

-1

I came across this issue a few times in VSCode and for me it was because I was calling live-server from PS prompt. I switched to "command prompt" and it worked just fine.

Switch from PowerShell to Command Prompt

-1

I had the same problem, sometimes it is because of HTML structure, Live server doesn't really work if the HTML structure is not proper. The file should have and tags.

1
-1

The reason could be that you might not be saving your changes. Save the changes and it should work fine

-1
  1. Go to Windows search bar.
  2. Type in PowerShell.
  3. Run PowerShell and enter this code: 
    Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
1
  • 1
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Mar 30, 2023 at 13:44
-2

[✓] Html boilerplate is missing in your code that's why live server not working First you need to add the html boilerplate in your code after that restart the live server //

2
  • Please eloborate more. Your answer looks like but I'd suggest you to improve and more info to like scrrenshot or some supporting information
    – Tushar
    Commented Oct 8, 2022 at 17:01
  • Html boilerplate is missing that's why live server not working First you need to add the html boilerplate in your code after that restart the live server #ThanksForComment
    – Ajay Saini
    Commented Oct 11, 2022 at 19:27
-2

I had the same problem It was the auto save in VS code, it was off Just go to File -> Auto save, then go live again and that's it

1
  • 1
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Shawn
    Commented Aug 14, 2023 at 5:47
-4

Open 'explorer' window, press open to folder button and browse your project folder. it work for me

-6

Or check if the name of your file contains spaces, like I named my file "Countdown Project.html" and it didn't work but as soon as I realised that the space between "Countdown" and "Project" is the problem the issue resolved. Name all your projects without spaces.

Not the answer you're looking for? Browse other questions tagged or ask your own question.