VS Code debug in Chrome - This site can’t be reached error

Question

I know this question has been asked before, but after reading a lot of the threads, I still haven't found my answer...

I am trying to debug a very simple html app with Chrome, but when I get to my localhost I get an error that says "This site can’t be reached". My launch.json code looks like this:

"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }

]
}

Any help would really be appreciated as I have been struggling for quite a while with this now.

Answer 1

Just change the value in launch.Json and remove unwanted and paste the html file location in the file attribute.

{ "configurations": [

    {
        "type": "chrome",
        "request": "launch",
        "name": "Open index.html",
        "file": "C:\\Users\\xyz\\projects\\PracticeProjects\\jsbasics\\index.html"
    }
]

}

Answer 2

As @Rob-Lourens has mentioned you need to start your own local server to host your HTML/Javascript/CSS and images.

You can use a VS code plugin Live Server to create a local development server for you. Please make sure your URL("url": "http://localhost:3000") in your configuration file matches the URL of Live Server.

If you are on Windows and want to use IIS or IIS Express you can read up on IIS and IISExpress