google chrome debugger in visual studio "site cannot be reached localhost refused to connect"

Question

I am currently trying to open a html file written in visual studio in google chrome browser and run Google Chromes debugging extension in visual studio

the following is the .json file and i am using the first configuration

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

but when it open in google chrome i recieve the error

This site can’t be reached

localhost refused to connect.

Answer 1

I had the same issue.

There is a temporary solution that is to add "file": "${workspaceRoot}/index.html" to the launch.json config.

This change will allow you to open your webapp in the Chrome browser, and you will be able to do debugging, break points...however, take into account that the browser will render your project as if it was opeining a local file, and NOT using a webserver environment.

Here is the launch.json config file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}",
            "file": "${workspaceRoot}/index.html"
        }
    ]
}