Logging and debugging in JavaScript. A few methods I use on a daily basis.

I wrote this article to share a few debugging and logging methods I tend to use on a daily basis. I hope that at least some of them aren’t as popular as console.log, at least among the ones that just begin their journey with JavaScript.

1. console.log()

I think the console.log method is pretty straight forward. However, if you’re new to web development, here is a quick description. The console.log method is probably the most used utility developers use to debug their JavaScript. You can pass an object, string, number, array etc. as an argument and it will print its value to the console available in most modern browsers.

Code example

const elements = ["theDevelobear", { is: "a" }, ["great", "blog"]]; console.log(elements); console.log(...elements);

The console.log trap

console.log can sometimes be deceiving. What I mean is that what you see in the console can be something you wouldn’t expect it to be. Consider the following code:

const bear = { name: "Teddy" }; console.log(bear); bear.name = "Bearnard"; console.log(bear);

Stylish console.logs

Printing values to console is really useful, but the .log() method can do much more cool stuff. It takes a formatting string as a first argument, so you can place a %c operator and pass a string with CSS styles as a second argument. This way you can make the values more visible, or display a message to users who are accessing the console on your production site (just like Facebook does).

Code example

const styles = [ "border: 1px solid #3E0E02", "color: white", "padding: 20px", "background: -webkit-linear-gradient(#ee0979, #ff6a00)", "font-size: 1.5rem", "text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)", "box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset", "line-height: 40px", "text-align: center", "font-weight: bold" ].join(";"); console.clear(); console.log( "%c Are you sure you need to be here? Please visit https://example.com/faq to read more about security issues", styles );

2. Use debugger and feel like an embedded developer

What if you don’t want to put console.logs everywhere? You can use the debugger.

Example — debugger basics

Let’s say you have a function in your code which looks like this:

const dummyFunc = () => { const a = 7; debugger; const b = a * 2; debugger; const c = b * 2; debugger; };

3. console.assert()

You can use console.assert() to make assertions inside your code. It is really useful when you need to check whether some condition occurs and you don’t want to go through a list of true/false values or put additional “ifs” only to debug the app. Using console.assert you can just throw a message when the assertion method returns false.

Code example

console.assert(true, "This message will NOT be outputted"); console.assert(false, "This message WILL be outputted");

4. console.count()

If you don’t know this one and you develop React apps, you definitely should try it. console.count() method logs the number of times it was called. This function takes an optional string type argument which will be its title. In case you don’t provide the argument, it will display a message like “default — ”.

Code example

console.count(); // returns "default: 1" console.count("Sidebar component render count: "); // returns "Sidebar component render count: 1" console.countReset(); // default: 0 console.countReset("Sidebar component render count: "); // Sidebar component render count: 0

5. Turbo Console Log

  • alt + shift + C (C like comment) — by pressing this combination you can comment out all console.logs inside a file.
  • alt + shift + U (U like uncomment) — uncommenting all console.logs.
  • alt + shift + D (D like delete) — deleting all console.logs from the file.

6. Be creative, add your own console methods

You can easily add your own methods and use them in your projects, just get creative and remember that it is meant to help you be more productive. You can create a console.yolo method which will for example… see for yourself!

Writing articles for all the front-end develobears in the woods.