本地主机不工作 - vs 代码中的 chrome 扩展答案

【问题标题】：localhost not working - chrome extension in vs code本地主机不工作 - vs 代码中的 chrome 扩展
【发布时间】：2016-11-28 09:25:41
【问题描述】：

在 vs 代码中，我在一个 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}"
        }
    ]
}

有人可以帮我解决这个问题吗？提前致谢

【问题讨论】：

你/etc/hosts的内容是什么？
@YanYang 你问的是项目结构吗？我已经更新了帖子。可以查一下吗？
@YanYang /etc/hosts是什么意思？
在 Linux/macOS 中有一个名为 hosts 的文件。 cat /etc/hosts 可能有助于确定 localhost 是否是有效的主机名。我遇到过这种问题，但我不确定是不是你的情况。
@YanYang 我正在使用 Windows。你能告诉我如何在 Windows 中做到这一点吗？

标签： angularjs typescript google-chrome visual-studio-code

【解决方案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 文件。两者都为我工作。

【讨论】：

【解决方案2】：

只需更改您的设置，将所有内容放入您的 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}"
        }
    ]
}

【讨论】：

它没有被格式化，但是一旦你在.json页面中复制并粘贴并按ctr+k+D
然后自动格式化。并运行 ng serve 或 ng s --open

【解决方案3】：

我遇到了同样的问题。

将我的 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}"
        }
    ]
}

【讨论】：