How can I cleanly set up debug logging in my javascript frontend?

Question

I basically want to be able to "turn on debug logging" like you can do with many applications that run in a shell. The naive way of implementing it would be to insert a statement like this in every one of my functions:

if (DEBUG) console.log('Executing <name of function>');

But having this in every function seems a bit annoying. Is there a more established or cleaner way of doing this?

Answer 1

You can specify the level in the logging statement, like this

console.debug('this is a debug level log statement');
console.info('this is an info level log statement');
console.warn('this is a warn level log statement');

In your console viewer (for example Developer Tools in Chrome) you can select which log messages you want to view.

See also https://developer.mozilla.org/en-US/docs/Web/API/console

Answer 2

The way I am dealing with it rigth now is by having my logger a singleton/dependency injected object so that I just have to write

logger.debug('Something happening')

which obviously contains

function debug(msg){ if (this.DEBUG) console.log(msg) }

Then I just have to initialise it with the proper log level that I want when loading it.