时间戳

首页 > 解决方案 > 带有 Chrome 的 Visual Studio Code 调试器拒绝连接到 localhost

google-chrome - 带有 Chrome 的 Visual Studio Code 调试器拒绝连接到 localhost

问题描述

我在其他帖子上尝试了几个建议，但无济于事。

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

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

我在 chrome 中不断收到一个错误页面，上面写着：

无法访问此站点 localhost 拒绝连接。您的意思是http://localhost8000.com/吗？在 Google 上搜索 localhost 8000 ERR_CONNECTION_REFUSED

启动.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}"
        }
    ]
}

索引.html：

hello world!!!!!

任何帮助将不胜感激！

标签： google-chromedebuggingvisual-studio-codelocalhost

解决方案

如果其他人遇到此问题，我通过以下方式解决：

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

2）重启vscode

3) 点击屏幕底部的上线按钮

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

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

{
    "version": "0.2.0",
    "configurations": [

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

6) 使用以下 json 创建（或编辑）一个 settings.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”旁边的绿色箭头

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

推荐阅读