Visual Studio Code debugger with Chrome refused to connect to localhost

If anyone else is having this issue, I solved it by:

1)installing the ritwickdey/vscode-live-server available here:vscode-live-server link

2) restarting vscode

3) clicking the Go Live button at the bottom of the screen

4) getting the server address from the resulting Chrome window (ex: http://localhost:5500/)

5) changing the .vscode/launch.json file to include that server address:

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

6) creating(or editing) a settings.json file with the following json:

{    "liveServer.settings.port": 5500,    "liveServer.settings.CustomBrowser" : "chrome",    "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",    "liveServer.settings.NoBrowser" : false,    "liveServer.settings.ignoreFiles" : [            ".vscode/**",            "**/*.scss",            "**/*.sass"    ]}

7) switching to vscode's debug pane on the left and pushing the green arrow next to "Launch Chrome against localhost"

Hope this helps someone else out!

If you don't have a web server,You can just change the option "webroot" to "file", and remove the "url" option, like this:

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

For others using VS code to debug Vue it could be as simple as this:

You must have your project running before you start debugging. Contrary to what a user would think, clicking the play button doesn't start your project. It just starts the debugger. The solution for me (using yarn) was running "yarn serve" before starting the debugger. Maybe this is obvious!