Html Question posted in
Some basic documentation can be found here.

Html – 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:WindowsSystem32 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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Setting the file type to ".html" fixed my problem.

    Thank you Oneli Jayodya for giving me the troubleshooting information, you're amazing. I'll be sure to do the other steps in case it errors again.

    For those who don't know how to do it and having this same issue, here's how!

    1. Open up Visual Studio Code
    2. Select your file with your code
    3. Click "File" tab in the corner of the upper hotbar
    4. On the window that pops up click "Save As"
    5. With the file window that pops up, click "Save As Type" bar
    6. Find "HTML", select it, and save your file
    7. Run your live server, should work now and show your code in action!

    This should fix your problem if you didn't save your file as an HTML. If not, check the other solutions Jayodya offered. Shes awesome!


  2. 0

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

    1. make sure the file is saved with a .html extension

    2. You can right-click on the HTML file in the Explorer pane and select "Open with Live Server".

    3. It should look something like http://127.0.0.1:5500/yourfile.html. Ensure this matches the file you are trying to serve.

    4. Sometimes other browsers or VS Code extensions can interfere with the Live Server.

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

    6. Clear the Browser Cache

    7. Update Visual Studio Code

    8. Reinstall Live Server

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search