Live server not refreshing browser

user_17227538 0
Viewed 8262

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

liveserver visual-studio-code html
5 Answers

For me the problem was in .html file missing the

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

Adding it resolved the issue.

user_35293840

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.

user_175006420

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.

user_190655770

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!!!

user_197663230

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"

That was the SOLUTION for me!

user_199516990
Related