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!
2
Answers
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
In case it is related to
ritwickdey/vscode-live-serverissue 579, do add Live Preview – VS Code Extension, an extension that hosts a local server for you to preview your web projects on.