本地主机无法工作 - 在vs code中使用chrome扩展程序

Question

在vs code中，我已经在一个HTML AngularJS项目中创建了一个launch.json文件。但是我无法在本地主机上启动该项目。它一直显示为Failed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:8080/)。 项目结构：

Project => .vscode => launch.json
        => app
        => scripts
        => styles
        => index.html

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

有人能帮我解决这个问题吗？谢谢提前。

- Abraham Gnanasingh

---

@YanYang 你是在问项目结构吗？我已经更新了帖子。你能检查一下吗？ - Abraham Gnanasingh

@YanYang 你说的是什么意思 /etc/hosts？ - Abraham Gnanasingh

在Linux/macOS中有一个名为hosts的文件。使用cat /etc/hosts命令可以确保localhost是一个有效的主机名。我曾经遇到过这样的问题，但我不确定这是否也是你的情况。 - Yan Yang

不完全是答案，但如果你只关心在简单的http服务器中提供本地文件，你可以尝试使用npm模块serve。 - Ankit

@AnkitMishra 我需要通过 launch.json 在 VS Code 中运行。 - Abraham Gnanasingh

Answer 1

编辑.vs code文件夹内的launch.json文件，在配置（name, url, webroot）中删除最后三行。

编辑 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": "pwa-chrome",
        "request": "launch",
        "name": "sample1",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
    }
]

}

编辑 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": "pwa-chrome",
        "request": "launch",
    }
]

}

如果上面的答案不起作用，只需删除.vs code文件夹中的launch.json文件即可。 这两种方法对我都有效。

- Senthur Kumaran

---

谢谢@Senthur Kumaran，这个解决方案对我很有效。 - Abdul Rehman

Answer 2

我遇到了同样的问题。

将我的launch.json文件更改为以下内容解决了这个问题（Chrome是我的默认浏览器）：

{
    // 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": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\app.js"
        }
    ]
}

在我的工作区根目录中有一个名为app.js的文件。

以下是之前的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": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

- Saylo

Answer 3

只需更改您的设置，将所有内容放入launch.json文件中即可。

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

- Ramprit Sahani

---

它没有格式，但是一旦你将其复制并粘贴到 .json 页面中，然后按下 ctr+k+D 键。 - Ramprit Sahani

然后它将自动格式化。然后运行 ng serve 或 ng s --open。 - Ramprit Sahani

Answer 4

你试过删除URL行吗？下面是它:

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

我也

1. 在我的电脑上安装了Node JS（下载链接--https://nodejs.org/）
2. 在Visual Studio中，输入（Ctrl + Shift + X）并搜索“Live Server”
3. 通过Ritwick Dey安装“Live Server”，关闭并重新打开Visual Studio

- Viltrimite