live-server gives "Change detected" but chrome console doesn't, how do I make my chan-CodePudding

I'm trying to have live-server auto reload the code once I save my change.

I've installed live-server globally and created a folder test and put 3 files in there

mkdir test
cd test
touch index.html main.js .live-server.json
live-server

Here's the contents of index.html

<script src='main.js'></script>

Here's the contents of main.js

console.log('hi');

and I got 'hi' in my chrome dev console.

When I changed the code, I got

Change detected /Users/ubuntu/dev/test/main.js

However, my chrome dev console didn't yield that change. I have to refresh the page manually. How do I make my change auto loaded?

CodePudding user response：

Firstly update your browser and live-server package! Try to re-run your live-server without .live-server.json (remove it !) file because as we can read in docs:

If a file ~/.live-server.json exists it will be loaded and used as default options for live-server on the command line. See "Usage from node" for option names.

You need to add to your index.html boilerplate ! Now it should works like a charm! ;-)

<!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>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

You can also try run live-server with different port like so:

live-server --port=5000