'Live server installed but not working in VS code

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?

javascripthtmlcssvisual-studio-code


Solution 1:[1]

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

Solution 2:[2]

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
}

Solution 3:[3]

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.

Solution 4:[4]

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

Solution 5:[5]

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

Solution 6:[6]

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.

Solution 7:[7]

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

Solution 8:[8]

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

Solution 9:[9]

Turn on the autosave feature on. File-> AutoSave

Solution 10:[10]

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?.

Solution 11:[11]

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

Solution 12:[12]

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.

Solution 13:[13]

If not going to this address: http://127.0.0.1:5500/ Try @Avneet's solution.

If you can reach the address and only the browser does not open, follow this method:

  1. Check the browser with the default option from the live server settings.
  2. Reset Windows default apps.
  3. I was using Brave browser and when I made the default browser from the browser's settings and restarted the vscode program, the problem was resolved. It also works in other browsers.

Solution 14:[14]

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.

Solution 15:[15]

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.

Solution 16:[16]

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.

Solution 17:[17]

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.

Solution 18:[18]

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

Related Questions