Meet a flat-log — console.flog will make your team save time

Artur Kurowski

3 min read

·

Feb 12, 2023

--

Listen

Share

Logging is an essential part of any software development project. It helps to track down bugs and gain insight into what the code is doing. However, logging can quickly become tedious and even distracting due to tiny inconveniences with logging tool of choice. That’s also the case when logs we are looking for are not standing out from bloat of other logs, that we might not always control. Have you ever found yourself adding a “spam” of special characters before or after log just to make it more visible?

console.log(`### ITEM ###`, item);

That’s one of the cases where flat-log comes in.

npm install flat-log

// Call just once in program's entrypoint to extend "console" object.
import 'flat-log';

console.flog({ item });

And the difference on the output is (left side classic, right side with flat-log):

Press enter or click to view image in full size

Press enter or click to view image in full size

flat-log is not a replacement for any full-featured logging library in your framework. It’s more of an extension to native “console”, that in some form could even be added to standard console and save precious seconds for millions of developers. It’s use case is the logs that are added within milliseconds, without thinking, when we’re focused on greater problem and removed quickly after we finish debugging process. Not for ones that are there to stay!

When you may want to use it

• If your framework, libraries or codebase bloats console with lots of logs that are less important than your log entries.
• If you at moments bloat console with many logs to find out what’s happening and get overwhelmed.
• If you care about precious seconds and “Operation Cycles” of your brain saved.
• When pair-programming, it’s doubly important to have clear labeling of logs, so both of you can quickly focus on the same information instead of pointing fingers or explaining to each other which log is interesting. console.flog can help reduce misunderstandings and ensure that both developers are on the same page.

Why that dead-simple library is actually well-thought?

• Although I hate abbreviations, console.flog is quite a neat name. It’s easily typed on keyboard and very similarly to console.log, which is probably one of most often typed command in JavaScript community. Being able to type it fast and without typos is important, when we need to focus on building a mental model of what code is doing, rather than get distracted by thinking how to print things on the console.
• flat-log is solving couple of problems with just one method: it flags important places in bloat of logs by colors carefully chosen to be well visible in both dark and light mode of DevTools and it prints keys and objects pair — preventing the need for custom labeling things ourselves. Instead we just wrap object in brackets console.flog({ label }).
• It’s small (<40 lines of code), comes with just one method and doesn’t allow for customization, making it suitable for a quick copy-paste into codebase if you’d rather not install such a small library for whatever reason: https://github.com/radarsu/open-source-libraries/blob/main/packages/any/flat-log/src/main.ts

Summary

flat-log as everything in the software is not a one-size-fits-all library. If you don’t have any of the problems listed above, already have a full-featured library for logging or you don’t ever use native console even during quick debugging sessions — that just might be not for you.

Otherwise, if you do have some of the mentioned problems, consider improving your focus on building a mental model of what code is doing, rather than getting distracted by poor logging experience and tiny brain “Operation Cycles” wasted in writing, searching and labelling logs.

flat-log might not be a huge gain, but cost of adding is also minimal and will likely pay off in the long run.