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

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