As a developer, a trick I often use is running some JavaScript directly in the browser to confirm the behavior.
In most browsers you can open a developer tools section that reveals lots of helpful areas for developers (see below for guidance for specific browsers).
Within these developer tools there is a typically a section called Console
, where messages, warnings, and errors are logged. In addition, this area is interactive – allow you to enter your own commands and have them run as part of the existing page.
Examples
Create an Alert Box with a Message
Running this code from the browser console will create an alert box with your message.
alert("Hello world!");
Highlight All HTML Tags
Running this code from the browser console will outline all elements on the page with a unique color per tag.
$$('*').forEach(el => {
let col = el.tagName.split('').
reduce( (sum, c) => sum+=c.charCodeAt(0), 0) % 360;
el.style.outline = `1px solid hsl(${col}, 99%, 50%)`
});
(source)
How to Run JavaScript in the Browser Console for Specific Browsers
Other Resources
- Dear Console is a library of useful snippets that can be run from the browser console
Leave a Reply