google chrome调试器在visual studio“站点无法到达localhost拒绝连接”

u2nhd7ah  于 2023-02-13  发布在  Go
关注(0)|答案(7)|浏览(656)

我目前正在尝试在谷歌Chrome浏览器中打开一个用Visual Studio编写的HTML文件,并在Visual Studio中运行谷歌Chrome调试扩展
以下是. 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拒绝连接。

kwvwclae

kwvwclae1#

我也有同样的问题。
有一个临时的解决方案是将"file": "${workspaceRoot}/index.html"添加到launch.json配置中。
此更改将允许您在Chrome浏览器中打开Web应用,并且您将能够执行调试、断点...但是,请考虑到浏览器将呈现您的项目,就像它正在打开本地文件一样,并且不使用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"
        }
    ]
}
nzrxty8p

nzrxty8p2#

在花了一些时间调试VScode之后,我意识到了以下事实:

  • VScode可以本地调试任何.js文件。
  • VScode可以在“Chrome调试器”等扩展的帮助下调试.html和.js文件(您需要应用@Machavity更改来渲染它,而无需 live-sever)。
  • 如果你想把你的.html & .js文件渲染成一个Web服务器(类似于从Apache提供服务),你需要一些节点扩展名,比如“live-server"。
    如何使用“Chrome调试器”和“live-server”扩展进行调试:
  • 更改launch.json文件中“Chrome调试器”的配置选项,并使参数“url”与“live-server”将用于渲染的主机相匹配:例如,本地主机
  • 打开index.html文件,打开终端,运行“live-server”,可以在命令行自定义live-server的端口、主机等设置。
  • 启动调试器并在必要时应用断点。
    更多信息:-Debugger for Chrome-Node live-server
zbdgwd5y

zbdgwd5y3#

找到了另一个选择:
1.在终端中运行ng serve
1.在vscode中按F5以启动chrome调试器

mutmk8jj

mutmk8jj4#

找到了这个related issue,它建议将端口转发到服务器的正确本地IP地址(它可能已经更改),并确保服务器上的防火墙规则设置正确。
基于此link的另一个建议解决方案是更改项目中的端口号。

    • 一月一日**

您也可以从该SO问题开始执行此解决方法:
1.转到LAN设置(在Chrome中:工具-〉选项-〉幕后操作-〉更改代理设置-〉LAN设置)
1.将有一个复选框"绕过本地地址的代理服务器"
1.勾选复选框。
在Mac/苹果电脑上:Chrome使用系统偏好设置来排除localhost:
1.进入系统偏好设置-〉网络-〉高级-〉代理设置
1.在底部添加"localhost",其内容如下:'忽略这些主机和域的代理设置'(例外情况用逗号分隔)
希望这有帮助!

sxpgvts3

sxpgvts35#

其他解决方案都不起作用(与SO链接有关),我没有尝试更改主机文件解决方案。
https://www.webucator.com/blog/2016/06/launch-files-browser-visual-studio-code/

  • CTRL + SHIFT+鼠标左键
  • 中心
  • "其他" →任务. 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

khbbv19g

khbbv19g6#

我遇到了同样的问题,通过启动服务器首先,然后启动chrome调试器来解决它。
您不能在不存在或已启动的服务器上运行chrome调试器。

bgtovc5b

bgtovc5b7#

只需修改启动chrome配置并在末尾添加这一行即可

{
"name": "no change",
"request": "no change",
"type": "no change",
"url": "no change",
"webroot": "no change",
"file": "${file}"
}

相关问题