Visual Studio 中的 google chrome 调试器“站点无法访问 localhost 拒绝连接”

Question

我目前正在尝试在 google chrome 浏览器中打开一个用 Visual Studio 编写的 html 文件，并在 Visual Studio 中运行 Google Chromes 调试扩展

以下是.json文件，我使用的是第一个配置

 {
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }
]

但是当它在谷歌浏览器中打开时我收到错误

无法访问此站点

localhost 拒绝连接。

Answer 1

我有同样的问题。

有一个临时的解决方案就是在launch.json config中加入"file": "${workspaceRoot}/index.html"。

此更改将允许您在 Chrome 浏览器中打开您的 web 应用，并且您将能够进行调试、断点...但是，请注意浏览器将呈现您的项目就好像它正在打开一个本地文件，并且不使用网络服务器环境。

这是 launch.json 配置文件：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}",
            "file": "${workspaceRoot}/index.html"
        }
    ]
}

Answer 2

在使用 VScode 调试一段时间后，我意识到以下事实：

• VScode 可以原生调试任何 .js 文件。
• VScode 可以在扩展的帮助下调试 .html 和 .js 文件，例如 “Chrome 调试器”（您需要应用 @Machavity 更改以在没有 live-sever 的情况下呈现它。
• 如果您想呈现您的 .html 和 .js 文件，因为它是一个网络服务器 ( 类似于从 Apache 提供服务），您将需要一些 像“live-server”这样的节点扩展。

如何使用“Debugger for Chrome”和“live-server”扩展进行调试：

• 更改“Chrome 调试器”的配置选项 launch.json 文件，并使参数“url”与主机匹配 “live-server”将用于渲染：例如，localhost。

• 打开您的 index.html 文件并打开终端，运行“live-server”。 可以自定义端口、主机等设置 从命令行实时服务器。

• 启动调试器并在必要时应用断点。

更多信息： - Debugger for Chrome - Node live-server

Answer 3

又找到了一个选项：

1. 在终端运行ng serve
2. 在vscode中按F5启动chrome调试器

Answer 4

找到了这个related issue，它建议将端口转发到服务器的正确本地 IP 地址（它可能已更改），并确保在服务器上正确设置了防火墙规则。

基于此link 的另一个建议解决方案是更改项目中的端口号。

Project Properties -> Web -> Servers -> Project Url

您也可以从此SO question 遵循此解决方法：

1. 转到 LAN 设置（在 Chrome 中：工具-> 选项-> 后台 -> 更改代理设置 -> LAN 设置）

2. 会有一个“绕过本地地址代理服务器”复选框

3. 勾选复选框。

在 Mac/Apple 上：Chrome 使用系统偏好设置排除本地主机：

1. 进入系统偏好设置 -> 网络 -> 高级 -> 代理设置

2. 在底部添加“localhost”：“忽略这些主机和域的代理设置”（例外以逗号分隔）

希望这会有所帮助！

Answer 5

其他解决方案均无效（与有问题的 SO 链接相关），我没有尝试更改主机文件解决方案。下面的这个解决方案有效

https://www.webucator.com/blog/2016/06/launch-files-browser-visual-studio-code/

• CTRL+SHIFT+P
• 点击率
• “其他”→tasks.json
• 粘贴以下代码：

{ "version": "0.1.0", "command": "Chrome", "windows": { "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" }, "args": ["${file}"] }

• 在 index.html 文件或您正在处理的任何文件上，按 CTRL+SHIFT+B。

编辑

这个解决方案不是最好的，因为它要求您在每次进行更改时刷新/重建所有资产，这使得它相当慢，尤其是在您使用 jquery 时

编辑编辑

对于阅读本文的任何人，我运行 Windows 10 并在 stackoverflow 上测试了几乎所有可能的解决方案，但最终使用 atom + atom-live-server 几乎花了我 5 分钟的时间来安装和设置。设置方法在这里：https://www.youtube.com/watch?v=xg-W86U6_Ng

Answer 6

我遇到了同样的问题，通过先启动服务器解决了这个问题，然后启动了 chrome 调试器。

您无法在不存在或已启动的服务器上运行 chrome 调试器。