带有 Chrome 的 Visual Studio Code 调试器拒绝连接到 localhost [英] 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:

无法访问此网站localhost 拒绝连接.您是说 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) 点击屏幕底部的上线按钮

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"

希望这对其他人有所帮助！

Hope this helps someone else out!

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