Dear Console,…

Christian Heilmann - Sep 29 '22 - - Dev Community

The browser developer tools Console is so much more than a place to log your messages. It is a way for you to programatically access the currently shown document and window, read out values and change them. On top of that, it has a powerful API of helper methods to make that easier than with vanilla JavaScript.

Over the years, I wrote dozens of helper scripts that I use in the Console or as Snippets in the browser to make my day to day work easier. And lately I started tweeting about them using a "Dear Console,…" moniker. People seemed to like that so I started to collect these links on a Dear Console,… web site.

The Dear console web site

On this site you can:

  • see all the scripts with explanations what they do
  • either click each of them to see the code, or copy them directly using the copy icon
  • paste them into the Console on web sites you want to query or change and hit enter

Here's what that looks like in action:

screen recording of how to interact with the page

You can also filter the scripts by tag and you can use them in your own snippets .

The site is hosted on GitHub , and I welcome any issues and pull requests there.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .