如何在VS Code中测试HTML代码？localhost:8080无法访问

问题场景 #

我在VS Code中测试包含index.html、style.css、app.js的Google Maps API项目，点击运行按钮后Edge浏览器打开http://localhost:8080，但提示无法访问该页面。之前按教程运行成功过，现在想解决这个问题，同时想了解是仅用VS Code本地测试即可，还是需要部署到我的Wix站点测试。

当前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": "msedge",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

项目代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps Api</title>

<link rel="stylesheet" href="/style.css">

    </head>
    <body>
    <h1>Google Maps</h1>
    <div id="map"></div>
    
        <script defer
        src="https://maps.googleapis.com/maps/api/js?key=I HAVE A KEY&callback=initMap">
    </script>
    <script src="/app.js"></script>
    </body>
    </html>

style.css #

#map
{
    height: 700px;
    width: 100%;
}

app.js #

function initMap()
{
    var options = 
    {
        center: {las: 38.3460, lng:-0.4907 },
        zoom: 8
    }

    map = new google.maps.Map(document.getElementById("map"), options)
}

问题排查与解决方案建议 #

1. 本地服务未启动 #

VS Code的launch配置仅负责启动浏览器，不会自动启动本地HTTP服务器，这是无法访问页面的核心原因。之前能运行大概率是手动启动过服务器，现在未开启就会报错。

• 解决：安装Live Server扩展，右键点击index.html选择「Open with Live Server」，它会自动启动本地服务（默认端口多为5500）；若需使用8080端口，可在Live Server设置中修改端口号，同时确保该端口未被其他程序占用。
• 也可修改launch.json中的url为Live Server启动的地址，实现一键启动浏览器+服务。

2. 代码拼写错误 #

app.js中存在明显拼写错误：center: {las: 38.3460, lng:-0.4907 }里的las应为lat（纬度的正确缩写），该错误会导致地图初始化失败，即使服务正常也无法显示地图，需立即修正。

3. 资源路径问题 #

index.html中使用根路径/style.css和/app.js引用资源，若本地服务的根目录与项目文件夹不一致，会导致资源加载失败。建议改为相对路径./style.css和./app.js，适配更多本地服务场景。

Wix站点测试相关说明 #

• 本地VS Code配合Live Server足够完成大部分功能测试，包括Google Maps API的逻辑验证。需注意：要在Google Cloud控制台的API密钥设置中，将http://localhost:8080、http://127.0.0.1:*等本地域名添加到允许调用列表。
• 若需测试真实线上环境表现或部署代码到Wix，可通过Wix的自定义代码功能嵌入：
  • Wix不支持直接上传本地HTML/CSS/JS文件，需通过「添加元素」→「嵌入代码」→「HTML iframe」插入页面，或使用Wix Velo代码编辑器重构逻辑。
  • 同时要在Google Cloud控制台将Wix站点域名添加到API密钥的允许列表，确保线上环境能正常调用API。

内容的提问来源于stack exchange，提问作者Daniel Lip