Debug HTML file with inline Javascript in GitHub Codespaces

Question

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!

score 1 · Answer 1 · answered Nov 18 '22 at 12:09

1

Try this...

From the extensions menu, search for and install "LiveServer".

Once installed click on "Go Live" in bottom right hand corner.

hope that helps

answered Nov 18 '22 at 12:09

russellfeeed

617
8
10

Thank you! How do you debug a html file? How do you set break points that work? – Carol.Kar Nov 30 '22 at 16:03

score 1 · Accepted Answer · answered Dec 30 '22 at 07:26

1

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.

answered Dec 30 '22 at 07:26

VonC

1,262,500
529
4,410
5,250

Thx for your reply! How do you debug these files? – Carol.Kar Jan 03 '23 at 17:17
1

@Carol.Kar I don't know of a breakpoints feature for that kind of file: the "live preview" feature I illustrate in the answer is supposed to help you "debug" your file, since you can see in real time how it is rendered. – VonC Jan 03 '23 at 17:24
Thx for your reply. True that I can see my file in real time. Still I am looking for a solution to debug my javascript files. Do you have any idea? I appreciate your reply! – Carol.Kar Jan 04 '23 at 08:47
1

@Carol.Kar Any debug/breakpoint operation would need to take place locally, on your computer, *before* pushing it to GitHub. See as an example, with Jekyll, "[Test your Github Pages content locally](https://haralduebele.github.io/2021/02/15/Test-your-Github-Pages-content-locally/)" or "[Testing your GitHub Pages site locally with Jekyll](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll)". – VonC Jan 04 '23 at 21:17
So as a result it is not possible atm to debug html/javascript files via codespaces using breakpoints and the build in debugger of vscode. – Carol.Kar Jan 06 '23 at 08:48

Debug HTML file with inline Javascript in GitHub Codespaces

2 Answers2