在GitHub Codespaces中调试含内联JS的HTML文件时遇连接超时

我创建了一个包含内联JavaScript的HTML文件（代码如下），希望在GitHub Codespaces中调试该文件。已安装Live Server插件来在浏览器中运行HTML文件，并创建了对应的launch.json配置文件，但运行Editor_2配置时出现错误：“Unable to launch browser: "Timed out waiting for browser connection"”，请问哪里操作有误？

JS代码 #

// noprotect
function setup() {
    createCanvas(windowWidth, windowHeight);
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            rect(50, 50, 80, 80)
        }
    }
}

HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/7.8.0/simple-statistics.min.js" integrity="sha512-xDFZFTH4OUC3OXrn92+YDyIq7VOQDTSAfcAy2kc9h9Wp/BiGwGVPDCDT2CXy6Aml2j+8AMX98jgdk5gZPcsfbw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <div id="palette"></div>
    <script src="sketch.js"></script>
  </body>
</html>

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": [
        {
            "name": "Editor_2",
            "request": "launch",
            "type": "chrome",
            "url": "http://127.0.0.1:5502/_ui/editor_v02.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

• Codespaces环境下本地地址无效：GitHub Codespaces是远程开发环境，127.0.0.1是本地回环地址，在远程环境里无法直接映射到你的本地浏览器。必须改用Live Server启动后，Codespaces提供的公共外部URL（格式类似https://<你的代码空间名称>-5502.app.github.dev），替换launch.json里的url字段。
• 端口不匹配：确认Live Server实际使用的端口是否是5502。Live Server默认端口是5500，如果手动修改过端口，要保证launch.json里的端口和Live Server运行的端口完全一致。
• 适配Codespaces的Chrome调试配置：在Codespaces中调试Chrome，需要添加--no-sandbox运行参数避免权限问题，同时确保webRoot路径正确。修改后的launch.json示例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Editor_2",
            "request": "launch",
            "type": "chrome",
            "url": "https://<你的代码空间名称>-5502.app.github.dev/_ui/editor_v02.html",
            "webRoot": "${workspaceFolder}",
            "runtimeArgs": ["--no-sandbox"]
        }
    ]
}

• 文件路径验证：检查_ui/editor_v02.html是否确实存在于${workspaceFolder}指定的目录下，路径拼写错误会导致页面无法加载，进而触发连接超时。
• 确认Live Server状态：调试前务必确保Live Server已经成功启动，并且可以通过Codespaces的公共URL正常访问页面。如果Live Server未启动，调试器会因无法连接到目标页面而超时。

内容的提问来源于stack exchange，提问作者Carol.Kar