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}"
    }
]

但是当它在Google Chrome中打开时我会收到错误

无法访问此网站

localhost拒绝连接。

Answer 1

我有同样的问题。

有一个临时解决方案是将"file": "${workspaceRoot}/index.html"添加到launch.json配置。

此更改将允许您在Chrome浏览器中打开您的网络应用程序，您将能够进行调试，断点... 但是，考虑到浏览器将呈现您的项目好像它正在打开一个本地文件，而不使用网络服务器环境。

这是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＆amp; .js文件借助扩展名等 “适用于Chrome的调试器”（您需要应用@Machavity更改才能在不使用 live-sever 的情况下进行渲染。
如果你想渲染.html＆amp; .js文件，因为它是一个网络服务器（类似于从Apache服务，你需要一些节点扩展名，如“ live-server ”。

如何使用“Debugger for Chrome”调试＆amp; “live-server”扩展名：

更改“Chrome调试器”的配置选项 launch.json文件，并使参数“url”与主机匹配 “ live-server ”将用于呈现：例如， localhost 。
打开index.html文件并打开终端，运行“live-server”。您可以自定义端口，主机和其他设置来自命令行的live-server。
启动调试器并在必要时应用断点。

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

Answer 3

发现了另一个选择：

在终端机上运行ng serve
在vscode中按下F5以启动Chrome调试器

Answer 4

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

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

<强> Project Properties -> Web -> Servers -> Project Url

您也可以通过此SO question：

关注此变通方法

转到局域网设置（在Chrome中：工具 - ＆gt;选项 - ＆gt;引擎盖下 - ＆gt;更改代理服务器设置 - ＆gt;局域网设置）



“为本地地址绕过代理服务器”

会有一个复选框

勾选复选框。


在Mac / Apple上：Chrome使用系统首选项进行本地主机排除：



转到系统偏好设置 - ＆gt;网络 - ＆gt;高级 - ＆gt;代理设置



在底部添加'localhost'，其中显示：'忽略这些主机和域的代理设置'（例外以逗号分隔）

希望这有帮助！

Answer 5

其他解决方案都没有工作（与SO链接相关），我没有尝试更改主机文件解决方案。以下解决方案

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

CTRL + SHIFT + P
CTR
＆＃34;其他＆＃34; →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调试器。

在visual studio＆＃34;站点中无法访问google chrome调试器localhost拒绝连接＆＃34;

6 个答案: