We all know the basics of debugging values, that console.log(someVar) will print the current value of someVar. It is the core of “CDD” [Console Driven Development <rimshot>🤣]. I thought I’d share some other functions from the console that I use when debugging. Please know that this is by no means a complete list of all the options available on the console object, you can check MDN for that.

console things you gotta know:

console.clear() -

Actually a do not use - If you are reading this and use console.clear() in your code, or even if you just use clear() by itself - you should know that the keyboard-shortcut to clear the console is CNTRL + L. This is actually a pretty universal clear-screen command and also works in your computer’s terminal. Learn it. Live it. Love it.

console.table(obj)

• Turns object values into a literal table on the screen
• Primarily this is for Object{}s, but you could use it for other things I guess 🤷.
• Even though I can’t give a good example of the output (and it is a bit different between browsers), .table() is so important that I’m putting it all the way up here.

Other Useful Console commands I use

console.assert()

• Quick conditional test for failures - if the test result is true/passes, nothing happens.
• console.assert() takes two arguments:
  • 1st: A condition to test
  • 2nd. Something to return if test fails (usually text, but doesn’t need to be)])

const a = 123;
const notA = 456;
console.assert(a == notA, `Uh oh! The value ${a} is not the same as ${notA}`);
// ⮕ Assertion failed: Uh oh! The value 123 is not the same as 456

console.count()

• Logs how many times the count() has been called in your code and is useful for monitoring code execution
• ALL counters are global - they do not care about scope or arrow-function/this-bindings!
• console.count(); by itself triggers a default global counter
  • console.countReset(); resets a counter back to zero
• You can get unique counts by using labels as an argument: console.count('Some Name')
  • The exact same counter can be called/shared by different functions (A caveat about counters: If you are manually checking a counter value, they are unfortunately a bit like the Heisenberg Principal. Let’s say you have paused your code with a debugger() statement and want to check the current value of a counter… To check the value you have to call the .count() functon, but, since .count() incremements *every* time it is called - you end up increasing the count by 1 which can throw things off) Ex:

function basic() {
  console.count();
}
const arrowFunction = () => {
  const nestedFunction = () => {
    console.count();
  };
  console.count();
  nestedFunction();
};
function x() {
  console.count('shared count');
}
function y() {
  console.count('shared count');
}
function z() {
  console.count('unique counter');
}

/**~~~~~~~~~~~~~~~~~~~~  Results ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~**/

basic(); // ⮕ "default: 1"
console.count(); // ⮕ "default: 2"
arrowFunction(); // ⮕ "default: 3", followed by "default: 4"

x(); // ⮕ "shared count: 1"
y(); // ⮕ "shared count: 2"
z(); // ⮕ "unique counter: 1"

Some final minor tricks for the console:

Simple color formatting

• console.warn() - works exactly like .log(), but prints in a pretty yellow color instead.
• console.error() - works exactly like .log(), but prints in a pretty red color instead.

Destructuring in log()

This is trivial, but hey…

If you want to log a value - instead of writing this:

const a = 1;
const b = 2;
console.log('a:', a, 'b:', b); // ⮕ "a: 1 b: 2"

You can get pretty much the same thing by putting those variables inside the .log() as an object{} and it will automagically deconstruct the values:

console.log({ a, b }); // ⮕ `{a: 1 b: 2}` - Not the exact same but

Like I wrote at the top, these are just some things I commonly use when debugging. There are ways to group log messages together, reformat text size\colors, track operation timing, and more but you should take a look at MDN for all of those…

(Man, I really gotta start using console.trace() for checking call-stack execution order.)

❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦