Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Wrapping `console.log` (et al.) in your own function to modify logging behavior.

JavaScript Log Wrapping

Wrapping console.log (et al.) in your own function to modify logging behavior.


You may want a simple way to:

  • Enable/disable logging with a flag, e.g., DEBUG = true
  • Prefix log messages with a common string to identify message origin, e.g., >>> [MyClass] Hello!
  • Shorter logging syntax, e.g., log("Hello!")
  • Etc.

We can acheive simple log wrappings by fiddling with the arguments object available in all JavaScript functions, and utilizing Function.prototype.apply.


For the impatient, a simple demo of these concepts can be found here.

Basic log wraps

The most basic log wrap to exactly mimic console.log behavior, e.g., to shorten logging syntax, looks like the following, which applies the arguments supplied to log when calling console.log.

var log = function(){
    console.log.apply(console, arguments);

Now you can do simple things like add a DEBUG flag to enable/disable logging:

var DEBUG=true; // Enable logging

var log = function(){
        console.log.apply(console, arguments);

Modifying Log Messages

You may want to modify the log messages, e.g., add a prefix to all logged messages to determine where the message is coming from, e.g.,

var LOG_PREFIX = "[MyClass]"

var log = function(){

    // 1. Convert args to a normal array
    var args =;
    // 2. Prepend log prefix log string
    args.unshift(LOG_PREFIX + " ");
    // 3. Pass along arguments to console.log
    console.log.apply(console, args);

We must convert the arguments object to a proper array to use Array.unshift. This is because the arguments object is only an "Array-like" object, i.e., you can use subscripts, e.g., arguments[0], and get its arguments.length property, but that's about it.


By Rob McGuire, May 2013

Copy link

dfoverdx commented Apr 1, 2018

@tomprogers Did you ever figure out getting the line numbers correct?

Copy link

lacymorrow commented Feb 23, 2020

I've been trying to write a custom function to process the arguments and bind console log but I'm losing the line numbers.

If anyone can figure this out, please post!

I essentially want this, but to maintain the line number:

(...args) => {
    // do something with args...
    console.log.apply(this, args);

Copy link

Typescript version?

Copy link

Typescript version:

log(...args: any[]) {
    if (this.debug) {
        console.log.apply(console, arguments);

Copy link

To log with line numbers you need to bind to the console.

var debug = console.log.bind(window.console);
// You could even do this:
console.debug = console.log.bind(window.console);

You can now call console.debug(...) and it will peform a console.log

debug('some message', 'with args');
// or
console.debug('some message', 'with args');

And you can add a switch like

var debugMode = true;

var debug = debugMode ? console.log.bind(window.console) : function(){};
// or
if(debugMode) {
    console.debug = console.log.bind(window.console);

// this will only log to the console when debugMode === true
debug('We are in debug mode!')

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment