[SOLVED] Debug HTML file with inline Javascript in GitHub Codespaces

Debug HTML file with inline Javascript in GitHub Codespaces

I have created a *.html file with some inline javascript, like the following below:

// 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)
        }
    }
}

<!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>

I would like to debug the file using GitHub codespaces.

I installed the Live Server plugin to run my html file in the browser.

I created the following launch.json file:

{
    // 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}"
        }
    ]
}

When running the Editor_2 configuration I get:

Unable to launch browser: "Timed out waiting for browser connection"

Any suggestions what I am doing wrong?

I appreciate your replies!

Solution

In case it is related to ritwickdey/vscode-live-server issue 579, do add Live Preview - VS Code Extension, an extension that hosts a local server for you to preview your web projects on.

Preview your HTML files quickly by clicking the preview button in the top right corner of your editor or using the context menu.