8

I'm using live server extension in Visual Studio Code, and it's doesn't work. What i mean about "doesn't work" is that it doesn't refresh the broswer after modifications of the code but i can open it. The only way to see the modifications is to close it and open it again...

What i tried :

-Make chrome as the default broswer but it's already. -Reinstall VS code.

What i tried but failed :

-Edit the code for making chrome the default broswer in the code but i have a error "cannot edit in read only editor" that i can't fix it.\

Installed extensions : Code runner - HTML CSS Support - Live Sass compiler - Live server - Monokai Pro (themes).

Front-end-developper-Diogo
  • 119
  • 1
  • 1
  • 7
  • Edit : I know it's been a very long time but autosave is required to reload the page after each changes you do on the file. That fixed my issue. – Front-end-developper-Diogo Aug 23 '22 at 16:04
  • This should not be an "edit", neither a comment: please post an answer (and then accept it), so it is clearly visible to others that a solution has been found. – desertnaut May 29 '23 at 21:12

8 Answers8

8

For me the problem was in .html file missing the

<head><meta charset="UTF-8"></head>

Adding it resolved the issue.

Jamato
  • 170
  • 1
  • 2
  • 6
4

I found it! I spent many hours trying to find the solution. I followed your steps but it didn't change something during the refreshing of the page.

I tried to change the setting.json, uninstall and install the vs code (insider and classic) again, delete and open a new account in GitHub, and see many videos but it remained the same; each change in HTML or CSS didn't appear on the page when I refreshed it.

So, I followed your steps about the Line Server and nothing changed but I kept them. I ended up searching the settings on the visual studio code.

  1. Open ⚙️
  2. Choose "Settings"
  3. In the section "Commonly Used", find the option "Files: Auto Save" (the first option on 08/09/2022)
  4. Open the menu of options and confirm the "afterDelay"
desertnaut
  • 57,590
  • 26
  • 140
  • 166
nik_kaz
  • 41
  • 1
3

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, add a comma after the last setting, then paste in "liveServer.settings.CustomBrowser": "chrome":

If for some reason Live Server still isn't opening the page in your browser automatically, you can 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.

Adam
  • 43
  • 1
  • 7
2

I finally fixed. Firstly I check my UTF-8 in below code

<meta charset="UTF-8">

And it was there but it never fixed it, then I check and uncheck auto save, but it never worked too, then I disable and re-enabled the live server, but it never worked too, also I restarted my desktop but it never fixed it too.

Then, I went ahead to download five server extension and after right clicking then I started with five server instead. Now, auto refresh is working perfectly with my auto save just like Android Studio design preview.

halfer
  • 19,824
  • 17
  • 99
  • 186
chisom emmanuel
  • 166
  • 2
  • 6
1

It has a simple solution. I had the same problem and tried many things like:

  • restart vs code
  • set chrome as default
  • check tag
  • check settings > Commonly Used > Files: Auto Save > "afterDelay"
  • Live Server -> clik on the ⚙️ -> extension settings-> Full Reload -> enabling it.

But non of them was working for me... I was able to use live server by just right clicking on the editor text space and then select "Open with Live server". If you skipped this step, you can't use live server just by opening a html file in a browser. This selection is required. Hope it works for you as well.

Whitenerius
  • 65
  • 7
1

I uninstalled the extension, removed references in the settings.json file. Live Server showed that a restart was required and provided a button to do so, which I clicked. I installed Live Server again and it worked.

mesadams
  • 11
  • 2
-1

i faced a similar problem like this.

When adding tailwind classes to html element and saving the file while live server(vs code) is running, but the browser don't show the changes unless I reload it.

For fixing this issue,

Go to live server extension -> extension settings -> scroll down until you find

Liver Server -> clik on the ⚙️ -> extension settings-> Full Reload -> enable it.

Then restart the live server, there we go you fixed the issue.

It works for me, happy day!!!

Guru Hari Venkat
  • 31
  • 2
-1

This is a classic, this has nothing to do with your preferences and other things just press F1 key and search for "AUTO SAVE TOGGLE" it will auto save your progress and make it seen in your browser.

Rituraj
  • 1