My Profile Photo

Rich Werden

Web Developer & Software Engineer

A site for Rich to write about code and show some completed projects for future reference...

console() Things Other Than log

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.


  • 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


  • 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


  • 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() {
const arrowFunction = () => {
  const 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.)

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