Special statement

This article is a series by Tomek Sułkowski published on Medium. According to the author revealed a total of 24 articles, updated until December 24, the copyright of the original author.

The translator had communicated with the author before getting permission to translate the whole series. In order not to disturb your reading, the permission is recorded here

The author recommended our Chinese translation on Twitter ~~ the picture at the end of the article

The body of the

In the 24 days leading up to the holiday season, I will be publishing a series of short posts on how to use development tools in a more interesting way. Yesterday we measured time, today we will talk about…

28. Custom FormattersCustom converter

The way DevTools’s Console defaults to objects are converted is useful in most cases, but sometimes you want something different. The default is always “default” – so we customize the way we output objects. The function that does this is called Custom Formatter. Before we write the next one, we need to turn on the corresponding Settings in DevTools Settings (go to the DevTools ⋮ drop-down box to find Settings, or press F1) :

So, what should a formatter like this look like? It is an object with at most three methods:

  • header— How is the processing presented inconsoleThe main part of the log.
  • hasbody– If you want to display an object that is used to expand the object▶Arrow, go backtrue
  • body– The definition will be displayed in the contents of the expansion section.

Let’s look at a basic custom Formatter

I removed error handling from the loop structure to make it look cleaner

The header method returns a JsonML array consisting of:

  1. Tag name
  2. Attribute object
  3. Content (text values or other elements)

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

On output, the simple formatter prints the object directly with seven Spaces indent for each layer of nesting. So now our output looks like this:

29. Application practice of custom formatting converters

There are several custom Formatters available for you to use. For example, you can find a perfect illustration of the immutable.js structure in the immutable- devTools repository. But you can also build your own.

In general, you can use a Custom Formatter whenever you encounter some unusual objects, or a large number of logs (best avoided, but sometimes useful) and want to distinguish between them.

A useful tip: Filter out objects that you don’t care about and don’t need special treatment, in which case return NULL from the header method. Let DevTools use the default conversion to handle these values.

Here’s a silly example of a console method: it’s called console.Clown () and it transforms the object to be printed, prefacing it with an emoji… Probably for better display, I guess 😁

For your convenience, the source code is posted below:

window.devtoolsFormatters = [{
    header: function(obj){
      if(! obj.__clown) {return null;
      }
      delete obj.__clown;
      const style = ` color: red; border: dotted 2px gray; border-radius: 4px; padding: 5px; `
      const content = ` 🤡The ${JSON.stringify(obj, null.2)}`;

      try {
        return ['div', {style}, content]
      } catch (err) { // for circular structures
        return null;  // use the default formatter}},hasBody: function(){
        return false; }}]console.clown = function (obj) {
  console.log({... obj,__clown: true});
}

console.log({message: 'hello! '});   // normal log
console.clown({message: 'hello! '}); // a silly log
Copy the code

As you can see, I’m using the console.clown method to add a special attribute to the printed object, so I can distinguish it and treat it differently in the Formatter, but in most real-world cases it looks like this: Check whether the object is an instance of a special class, and so on.

Oh, clown prints something? In the following:

That’s all for today’s sharing

Routine: If you learn something new from this

→ Follow me on Twitter: Tomek Sułkowski

Other series

Other articles in this series will be translated soon, with links posted here.

  • Day 1: ‘$’ in the Console
  • Tips you might not know about Chrome debugging tools Day 2: Copying & Saving
  • Chrome debugging tools you didn’t know about
  • The Chrome debugging tool has a few tricks you don’t know about.
  • Day 5: Console log, puzzling case
  • You don’t know the Command menu for Chrome
  • 7. Fun tips you didn’t know about the Chrome Debugging Tool Consle
  • Chrome’s Color picker is a Color picker that you don’t know about.
  • Day 9: Time console
  • Custom Formatters are custom formatters for Chrome.
  • Today: Style Editors continued
  • Tips you don’t know about the Chrome Debug Tool Day 12: Ninja Log Print! (the ninja logs)
  • Chrome debugging Tool tips you didn’t know about
  • Chrome Debugging Tool tips you didn’t know About day 14: Other shortcuts
  • Chrome debugger tips you didn’t know about
  • Tips you don’t know about Chrome debugging Tools 16: Breakpoints
  • Day 17: Farewell to Console
  • What you Didn’t know about Chrome Debug Tools
  • Chrome debug tool tips you don’t know
  • Tips you didn’t know about Chrome debugging tools Day 20: The dark arts of Workspace
  • Tips you Don’t Know about Chrome Debugging Tools Day 21: Snippets
  • Chrome Debugging Tool tips you didn’t know
  • Chrome debug Tool tips you don’t know
  • Day 24: The last day, New Year’s Day, is awesome

Write in the last

If you are sure of my translation, you can also pay attention to my wave oh ~ incidentally my open source project, for a wave of star→ see here, beautiful blog system

The author recommended our Chinese translation on Twitter