DevTools tips — day 10: custom formatters

part of the “Advent calendar for front-end developers” series

Tomek Sułkowski
Dec 10, 2018 · 4 min read

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve measured time, today let’s talk about…

28. Custom Formatters

The default way DevTools console formats your objects is useful for most scenarios but sometimes you’d like something different. We’re in luck because that default way is… well, default — and we can define our own output for displaying objects. The function that does this is called a Custom Formatter and before we write one, we need to turn on the corresponding setting in the DevTools’ Settings (find it in the DevTools’ dropdown or press F1):

So how does such formatter look like? It’s an object with up to 3 functions:

  • header — handles displaying the main part of the log in the console
  • hasBody — returns true if you want to display the ▶ arrow that expands the object
  • body— defines what will be displayed in the expanded section

Let’s look at a basic custom formatter:

I’ve removed the code handling circular structure error for brevity

What this header function returns is a JsonML array that consist of:

  1. tag name
  2. attributes object
  3. content (text value or another element)

(If this looks familiar it’s probably because you’ve written some code in React :D)

In out case, this sample formatter just prints the object with indentation of 7 spaces for each level of nesting, so the output will now look like this:

29. Practical application of custom formatters

The are several custom formatter out there for you to use, e.g. for nicely displaying Immutable.js structures see the immutable-devtools repo. But you can always create your own.

Basically, whenever you have some unusual objects, or a lot of logs (better to prevent these kind of situations, but sometimes that’s useful) and you want to distinguish one kind from another, you can employ a custom formatter for that.

A practical tip for that is just to filter out the objects that you don’t care about treating specially and just return null in the header function for those cases. For these values DevTools will use the default formatting.

Ok, practicality aside, you can also have some fun with it—here’s a silly example of a new console method: it’s called console.clown() and it formats the logged object and prefixes it with a clown emoji… for better visibility, I guess 😁

See the source code here: https://gist.github.com/sulco/e635a7511d5ff17d44fe9bb2ab8b3cc6

As you can see I’m using the console.clown method to add a special property to the logged object so I can recognize it and treat specially in the formatter, but for many real-world cases you could e.g. just check for the object being an instance of some specific class etc.

Oh, and the output of the clown log? Here it is:


Tomek Sułkowski

Written by

Frontend trainer, Angular enthusiast, family man, https://twitter.com/sulco

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade