For me the problem was in .html file missing the
<head><meta charset="UTF-8"></head>
Adding it resolved the issue.
Answer from Jamato on Stack OverflowFor me the problem was in .html file missing the
<head><meta charset="UTF-8"></head>
Adding it resolved the issue.
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.
- Open
- Choose "Settings"
- In the section "Commonly Used", find the option "Files: Auto Save" (the first option on 08/09/2022)
- Open the menu of options and confirm the "afterDelay"
node.js - npm live-server not auto-reloading - Stack Overflow
html - Live Server extension is not auto-reloading with WSL2 - Stack Overflow
Auto reload no longer working
live server not reloading automatically
Videos
I had the same problem as you and managed to get it working by making sure that the .html-file was properly formatted. I.e. like this:
<!DOCTYPE html>
<html>
<body>
<h1>Script tester!</h1>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
You need to add this code: for
Usage from node
Example:
var liveServer = require("live-server");
var params = {
port: 8181, // Set the server port. Defaults to 8080.
host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
root: "/public", // Set root directory that's being served. Defaults to cwd.
open: false, // When false, it won't load your browser by default.
ignore: 'scss,my/templates', // comma-separated string for paths to ignore
file: "index.html", // When set, serve this file for every 404 (useful for single-page applications)
wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec.
mount: [['/components', './node_modules']], // Mount a directory to a route.
logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
middleware: [function(req, res, next) { next(); }] // Takes an array of Connect-compatible middleware that are injected into the server middleware stack
};
liveServer.start(params);
Or else you can add a file .live-server.json :
If that exists it will be loaded and used as default options for live-server on the command line.
For more details see: https://www.npmjs.com/package/live-server
a quick google search gave me this: https://lightrun.com/solutions/ritwickdey-vscode-live-server-live-server-not-reloading-automatically/#:~:text=Open%20the%20settings%2C%20search%20for,live%20server%20not%20reloading%20automatically.
This may be what you need? I have noticed the same thing as well.
When you use the live server extension, you need to start it using the "Go Live" button at the bottom right of the screen (where it shows the current line and column numbers).
When you start the server, a new browser window should pop up at the correct address and auto reload should work when you save the file(s).
Hello, The Visual Studio Code Live Server extension doesn't work properly for me anymore. When I open a live server on any project, the project opens a tab with the live server port (http://127.0.0.1:5500/) as intended however any project I open will make the tab always stuck on refreshing. This causes many issues such as images/assets not loading all the time, Javascript/typescript not working and also Any changes after I press save on a project won't automatally update to the live server. I attached a video of the problem.
A little more info: The extension used to work for me ~4 months ago and I hadn't used VS code since then as I was working on a different project that didn't need me to use VS Code. The problem still happens no matter what is loaded, the word "Hello" could be the only thing in the body of the html and it would still have the issue. (Also yes I use <meta charset = “UTF-8”>, I saw someone mention it in another thread)
What I've tried:
Reinstalling VS Code and extensions (Same problem)
Trying the Insider Version (Same Problem)
I changed Autosave to AutoDelay
DIsabling every extension except live server and disabling every chrome extension.
Also any other extension similar to Live Server doesnt work such as Five Server, Live Preview etc
If anyone has had this problem, or can help with the issue, or has any question let me know! Thanks!
For me, I was trying to save a file that was not fully HTML.
I wrapped my code with proper HTML structure and now its working fine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- YOUR CODE -->
</body>
</html>
Make sure meta charset is "UTF-8" in the head.