• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Computing / How to Run Code in the Browser Console
Speaking: Sal is one of the speakers at WordCamp Montclair on June 24, 2023 and tickets are only $25!

How to Run Code in the Browser Console

Last updated on May 6, 2023 by Sal Ferrarello

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
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.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit

Filed Under: Computing, Dev Tips, Programming Tagged With: JavaScript, troubleshoot, web browser

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in