How to Run Code in the Browser Console

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

• Chrome Browser Console
• Firefox Browser Console
• Microsoft Edge Browser Console
• Safari Web Inspector

Other Resources

• Dear Console is a library of useful snippets that can be run from the browser console

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.