You can make a Javascript sandbox by creating an index.html file in a directory with another file with a .js extension. Here’s the HTML content:
<html> <head> <script src="DEBUGhelpers.js"></script> </head> <body> <h1>Hello World of Javascript</h1> <p>Here is some text.</p> <div>And a div!</div> <ul> <li>A list item.</li> <li>Another list item.</li> </ul> </body> </html>
Here’s a little Javascript function which will put red outlines around your HTML elements. BTW it’s best practice to separate Javascript and HTML like this.
function DEBUGborders(){
console.log("Borders on");
var Element = document.createElement('style');
document.head.appendChild(Element);
var Sheet = Element.sheet;
Sheet.insertRule("*{outline: 1px red solid;}", 0);
}
Open the index.html page in your browser and type in “DEBUGborders()” at the console and you should see something like this:
