Counting Function Calls

Greetings, friends! Have you ever been debugging code and found yourself needing to count how many times a function is called? No? Well, carry on then.

Just kidding 😆. I know this likely happens to developers at some point in their life. Let's look at an example.

console.count();
console.count();
console.count();

If you're using Google Chrome, then you can open up the Chrome DevTools console using the keyboard shortcut Option + Command + J on a Mac or Ctrl + Shift + J on Windows. Copy the code snippet above and paste it into the console. When you run the code, you should see the following in the console.

default: 1
default: 2
default: 3

In the code above, we are calling console.count() three times. Every time console.count() function is called, the counter goes up by one. If we don't pass anything into the console.count method, then the browser will use the label, default. If we pass in a parameter, then that parameter will be used as the label instead. The console.count function outputs the number of times it has been called with the specified label.

console.count('pizza');
console.count();
console.count('pizza');
console.count();
console.count('pizza');

Refresh the page to clear previous counters and run the code snippet above in the console. Each label is counted separately.

pizza: 1
default: 1
pizza: 2
default: 2
pizza: 3

Suppose we want to reset one or more counters without having to refresh the page. We can use the console.countReset function to reset a specified counter. If we pass nothing into it, it'll reset the default counter.

console.countReset();
console.count();
console.count();
console.count();
console.countReset();
console.count();

The above code should result in the following:

default: 1
default: 2
default: 3
default: 1

If we pass in pizza, it'll reset the pizza counter.

console.countReset('pizza');
console.count('pizza');
console.count('pizza');
console.count('pizza');
console.countReset('pizza');
console.count('pizza');

Running this code should result in the following:

pizza: 1
pizza: 2
pizza: 3
pizza: 1

We can put console.count inside our own functions to keep track of how many times those functions are called in our code.

function message() {
  console.log('Greetings, friends!');
  console.count('message');
}

message();
message();
message();

When you run the code, you should see the following in the console.

Greetings, friends!
message: 1
Greetings, friends!
message: 2
Greetings, friends!
message: 3

In the code above, we're calling the message function which then calls the console.count function. Every time the message function is called, the counter goes up by one. We can even be sneaky and override built-in functions such as fetch.

const originalFetch = fetch;

fetch = function () {
  console.count('fetch');
  return originalFetch.call(this, ...arguments);
}

const getUser = (num) => {
  fetch(`https://jsonplaceholder.typicode.com/todos/${num}`)
    .then(response => response.json())
    .then(data => console.log(data));
};

getUser(1);
getUser(2);
getUser(3);

In the code above, we are calling the original fetch function after calling console.count. This lets us count how many times the fetch function is called!

fetch: 1
fetch: 2
fetch: 3
{userId: 1, id: 3, title: 'fugiat veniam minus', completed: false}
{userId: 1, id: 1, title: 'delectus aut autem', completed: false}
{userId: 1, id: 2, title: 'quis ut nam facilis et officia qui', completed: false}

If there are too many logs, you could call console.count('fetch') on its own one more time after your code runs. Subtract one from that number and that's how many times fetch has been called. Clever, eh?