Visual Studio Code debugger with Chrome refused to connect to localhost

问题

I've tried several suggestions on other posts to no avail.

I have a 9 month old project that no longer shows in the browser from F5 debugging in vs code.

I set up a brand new simple project with an index.html file to try to get Visual Studio code to launch it in a Chrome browser window.

I keep getting an error page in chrome that says:

This site can’t be reached localhost refused to connect. Did you mean http://localhost8000.com/? Search Google for localhost 8000 ERR_CONNECTION_REFUSED

launch.json:

    {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

index.html:

hello world!!!!!

Any help would be greatly appreciated!

回答1:

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!

回答2:

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!

回答3:

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"
    }
]
}

回答4:

For someone wants debug react-app like me. After config as question above. Pls note: Ensure that your development server is running ("npm start").. And then F5 to debugg.

It works with my case.

回答5:

I use laragon for windows to host my websites locally. For myself I just needed to change the URL to the laragon url and it worked fine

回答6:

I use chrome developer edition, this is the configuration that worked for me:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "${workspaceFolder}/index.html",
            "runtimeExecutable": "YOUR PATH TO THE EXE"
        }
    ]
}

I used the advice of @tuchunxiao, but using the file as url.

Note that this works for experimental JS, but for react, vue, or a production enviroment this is likely not to suit you.

来源：https://stackoverflow.com/questions/52682446/visual-studio-code-debugger-with-chrome-refused-to-connect-to-localhost

标签

google-chrome

debugging

visual-studio-code

localhost