使用Chrome的Visual Studio Code调试器拒绝连接到localhost

Question

我已经尝试了其他帖子的几个建议无济于事。

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

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

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

此站点无法访问localhost拒绝连接。你的意思是http://localhost8000.com/？在Google上搜索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!!!!!

任何帮助将不胜感激！

Answer 1

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

1）在这里安装ritwickdey / vscode-live-server：vscode-live-server link

2）重启vscode

3）单击屏幕底部的“Go Live”按钮

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调试窗格，然后按“启动Chrome对localhost”旁边的绿色箭头

希望这可以帮助其他人！

Answer 2

对于有人想要像我这样调试react-app。配置后作为上述问题。请注意：Ensure that your development server is running ("npm start").。然后F5调试。

它适用于我的情况。

Answer 3

我使用laragon for windows在本地托管我的网站。对于我自己，我只需要将URL更改为laragon url，它工作正常