带有 Chrome 的 Visual Studio Code 调试器拒绝连接到本地主机 [英] Visual Studio Code debugger with Chrome refused to connect to localhost

问题描述

我在其他帖子上尝试了一些建议，但均无济于事.

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

我有一个 9 个月大的项目，在 vs 代码中通过 F5 调试不再显示在浏览器中.

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

我使用 index.html 文件设置了一个全新的简单项目，以尝试让 Visual Studio 代码在 Chrome 浏览器窗口中启动它.

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.

我一直在 chrome 中收到一个错误页面，上面写着:

I keep getting an error page in chrome that says:

无法访问此站点本地主机拒绝连接.您的意思是 http://localhost8000.com/?在 Google 上搜索 localhost 8000ERR_CONNECTION_REFUSED

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:

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:

index.html:

hello world!!!!!

任何帮助将不胜感激！

推荐答案

如果其他人遇到这个问题，我通过以下方式解决了:

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

1) 在此处安装 ritwickdey/vscode-live-server:vscode-live-server 链接

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

2) 重启 vscode

2) restarting vscode

3) 点击屏幕底部的 Go Live 按钮

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

4) 从生成的 Chrome 窗口中获取服务器地址(例如:http://localhost:5500/)

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

5) 更改 .vscode/launch.json 文件以包含该服务器地址:

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) 使用以下 json 创建(或编辑)settings.json 文件:

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) 切换到左侧的 vscode 调试面板，然后按下Launch Chrome against localhost"旁边的绿色箭头

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

希望这能帮助其他人！

这篇关于带有 Chrome 的 Visual Studio Code 调试器拒绝连接到本地主机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！