[SOLVED] Visual Studio Code Live Server extension displaying "~ /" on live server page, wont display my code

Visual Studio Code Live Server extension displaying "~ /" on live server page, wont display my code

I installed the live server extension for Visual Studio Code so I can see my code in action on a webpage as I learn.

I installed it and then typed some code (SEE BOTTOM for the code) to see how it would look on a webpage, but when the live server page showed up all it showed was (SEE BOTTOM for image) a blank page with "~ /" on the top and on the bottom showed in tinier text the name of the code used with a tiny picture of a file image.

I use Microsoft Edge, if that info is needed. I added the Liver Server extension on it (SEE BOTTOM for image)

Here's my Visual Studio and my code

---- BELOW is code if you cant access the image above ----

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

---- end of code ----

Heres the live server page

Image of Microsoft Edge Live Server extension settings

I looked up how to fix it, and I did add an environmental variable for the system 32, I made a new path C:\Windows\System32 and put it there.

I also looked through the extension settings and heres what I have right now, I added the "liveServer.settings.port": 0 as that was a solution someone online mentioned but I don't think it did anything , unsure if I need to change more settings or add anything to it

-- Live server extension settings code --

{
    "workbench.colorTheme": "Default High Contrast",
    "files.autoSave": "afterDelay",
    "liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "explorer.confirmDelete": false,
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "",
    "liveServer.settings.ChromeDebuggingAttachment": false,
    "liveServer.settings.port": 0
    
}

-- end of settings and code --

Generally unsure if its something to do with settings, or if I have to do extra stuff, or if my code just doesnt work lol, wouldnt be surprised as im still learning

Appreciate any and all help, and it would be helpful if someone could show me what steps to take to fix this

If you need any additional info just ask, unsure if I included everything here

Also if someone did ask this question already could someone show me where it is, I cant find one like this

Solution

Here are several steps you can follow to troubleshoot the problem:

make sure the file is saved with a .html extension
You can right-click on the HTML file in the Explorer pane and select "Open with Live Server".
It should look something like http://127.0.0.1:5500/yourfile.html. Ensure this matches the file you are trying to serve.
Sometimes other browsers or VS Code extensions can interfere with the Live Server.
you might want to set it to a standard port like 5500, which is commonly used with Live Server. Change it in your settings:

"liveServer.settings.port": 5500
Clear the Browser Cache
Update Visual Studio Code
Reinstall Live Server