144

Will use of the debugging feature console.log reduce JavaScript execution performance? Will it affect the speed of script execution in production environments?

Is there an approach to disable console logs in production environments from a single configuration location?

4
  • 2
    All the answers, so far, assume you are simply outputting string messages. What about the performance of logging objects, with possibly large object structures? eg console.log(largeObj)?
    – PandaWood
    Nov 3, 2016 at 4:18
  • 2
    Outputting significant numbers of objects to console can turn 3 second page load into 30 seconds. Just an example...
    – Andrew
    Mar 21, 2017 at 16:37
  • 1
    A simple console.log takes ~50ms Aug 13, 2019 at 3:58
  • This whole thread reeks of premature optimization.
    – Kevin
    Dec 7, 2022 at 18:22

12 Answers 12

111

Actually, console.log is a lot slower than an empty function. Running this jsPerf test on my Chrome 38 gives stunning results:

  • when the browser console is closed, calling console.log is about 10 000 times slower than calling an empty function,
  • and when the console is open, calling it is as much as 100 000 times slower.

Not that you'll notice the performance lag if you have a reasonable number of console.… calls firing once (a hundred will take 2 ms on my install of Chrome – or 20 ms when the console is open). But if you log stuff to the console repeatedly – for instance, hooking it up through requestAnimationFrame – it can make things janky.

Update:

In this test I've also checked out the idea of a custom “hidden log” for production – having a variable which holds log messages, available on demand. It turns out to be

  • about 1 000 times faster than the native console.log,
  • and obviously 10 000 times faster if the user has his console open.
14
  • 2
    When a compiler sees an empty function, it executes nothing wether as it sees a line to execute it will have to run the function. the compiler simply doesn't run an empty, unused function as an optimisation.
    – SidOfc
    Apr 28, 2015 at 13:05
  • 1
    @SidneyLiebrand thanks for the info, that’s good to know. The results of the second test can be optimized in the same way as console.log though. Both of them are functions which produce side-effects.
    – tomekwi
    Apr 28, 2015 at 18:44
  • 2
    console.log by itself doesn't really impact performance in a way that you'll notice unless you bind it to a scroll / resize handler. These get called alot and if your browser has to send text to the console like 30/60x a second it can get ugly. And then there's that IE bug that didn't allow you to have console.log's at all with the console closed :(
    – SidOfc
    Apr 29, 2015 at 8:20
  • 1
    You’re absolutely right – I wrote that in my answer too. As a rule of thumb, I try to have no console calls in production code. But performance is not the reason – it’s rather because “its too easy for a layman to read your logs” as @Ramesh wrote.
    – tomekwi
    Apr 29, 2015 at 13:00
  • 2
    4 years later (checking @Ĭsααctիεβöss's comment), the links are still broken.
    – Aj Otto
    Nov 23, 2020 at 11:37
77

If you are going to have this on a public site or something, anyone with little knowledge on using the developer tools can read your debug messages. Depending on what you are logging, this may not be a desirable behavior.

One of the best approaches is to wrap the console.log in one of your methods, and where you can check for conditions and execute it. In a production build, you can avoid having these functions. This Stack Overflow question talks in details about how to do the same using the Closure compiler.

So, to answer your questions:

  1. Yes, it will reduce the speed, though only negligibly.
  2. But, don't use it as it's too easy for a person to read your logs.
  3. The answers to this question may give you hints on how to remove them from production.
13
  • 20
    Just a note - using console.log to log objects does cause memory leak as browser retains the object structure to allow developers to expand the log. May 26, 2014 at 11:25
  • 4
    @Gajus Your edit is being discussed on Meta Apr 22, 2016 at 12:47
  • 23
    "it's too easy for a person to read your logs" — How is this a problem? It's JavaScript, they already have full access to the source code!
    – Quentin
    Apr 24, 2016 at 21:31
  • 4
    @BluDragn — Why are you sending personal customer data, which you don't trust the customer with, to the customer? Even without console.log they can just look in the Network tab.
    – Quentin
    Dec 8, 2016 at 15:12
  • 6
    Just to chime in: I just discovered, spamming the console.log even with the same static text (no object or array; literally just console.log('test') would do it) also causes a performance hit. This came to my attention as I was logging "called" within a function that got invoked on hundreds of React components during re-renders. The mere presence of the logging code caused very noticeable stutter during frequent updates.
    – SikoSoft
    Apr 28, 2018 at 20:01
30
const DEBUG = true / false
DEBUG && console.log('string')
2
  • what an elegant solution! May 26, 2020 at 8:38
  • 3
    missing semi-colons ;)
    – trevorgk
    Jul 29, 2021 at 2:33
20

Will use of the debugging feature console.log reduce JavaScript execution performance? Will it affect the speed of script execution in production environments?

Of course, console.log() will reduce your program's performance since it takes computational time.

Is there an approach to disable console logs in production environments from a single configuration location?

Put this code at the beginning of your script to override the standard console.log function to an empty function.

console.log = function () { };
2
  • 3
    This seems to be one of the simplest solutions for disabling console logs in production environment. Wondering why it does not have more attention! We can control the definition of this empty function under a variable which we can toggle as true/false depending on which environment we are working on (prod or dev) Mar 5, 2019 at 10:24
  • 4
    This is such a brilliant answer! Thanks! May 26, 2020 at 8:46
13

If you create a shortcut to the console in a common core script, eg:

var con = console;

and then use con.log("message") or con.error("error message") throughout your code, on production you can simply rewire con in the core location to:

var con = {
    log: function() {},
    error: function() {},
    debug: function() {}
}
1
  • 16
    the dirty way: console.log = function(){}
    – br4nnigan
    Mar 21, 2016 at 16:36
8

Any function call will slightly reduce performance. But a few console.log's should not have any noticeable effect.

However it will throw undefined errors in older browsers that don't support console

4

The performance hit will be minimal, however in older browsers it will cause JavaScript errors if the users browsers console is not open log is not a function of undefined. This means all JavaScript code after the console.log call will not execute.

You can create a wrapper to check if window.console is a valid object, and then call console.log in the wrapper. Something simple like this would work:

window.log = (function(console) {
    var canLog = !!console;
    return function(txt) {
        if(canLog) console.log('log: ' + txt);
    };
})(window.console);

log('my message'); //log: my message

Here is a fiddle: http://jsfiddle.net/enDDV/

3

I made this jsPerf test: http://jsperf.com/console-log1337

It doesn't seem to take any longer than other function calls.

What about browsers that doesn't have a console API? If you need to use console.log for debugging, you might include a script in your production deployment to override the console API, like Paul suggests in his answer.

4
  • if i can select two answers this will go to top
    – Sudantha
    Jul 11, 2012 at 6:14
  • 1
    Your test not only adds a console.log call, but also execute the same jquery operation twice. I've created the following revision of your test, hope it helps: jsperf.com/console-log1337/7 PS: thanks, I didn't know about jsperf.com :)
    – dubrox
    Oct 15, 2013 at 16:06
  • 2
    It actually does seem to be a lot slower than a normal function call. In a direct duel the results are incomparable: jsperf.com/console-log1337/14
    – tomekwi
    Nov 5, 2014 at 9:45
  • 1
    Bad answer. Not even remotely correct. Wishful thinking up-votes as @tomekwi demonstrates the difference is remarkable. I've done several real world tests myself and can absolutely say without a shadow of a doubt spamming console.log definitely causes a performance hit. A few logs here and there every second or two, no big deal, but log something frequently (on frame updates, re-renders of massive components) and the difference with and without console.log is night and day.
    – SikoSoft
    Apr 28, 2018 at 20:09
1

I do it this way to maintain original signature of console methods. In a common location, loaded before any other JS:

var DEBUG = false; // or true 

Then throughout code

if (DEBUG) console.log("message", obj, "etc");
if (DEBUG) console.warn("something is not right", obj, "etc");
0
1

I prefer it doing this way:

export const println = (*args,) => {
   if(process.env.NODE_ENV === "development") console.log(args)
}

and then use println everywhere in your code.

0

You can also test if if you're on production before replacing console.log with a empty function: (example on Vue)

//* disable console.log on production: 
if (import.meta.env.MODE === 'production') console.log = function () {};
0

Create a wrapper function to use for logging which takes the environment into consideration. Lots of room for improvement on this example wrapper function, but the point is you have the ability to update your logging logic in a single place rather than spread throughout the code base.

const DEBUG = true

const logger = (level, message) => {
  if (!DEBUG) return
    if(level="log") console.log(message);
    else if (level="warn") console.warn(message);
}

logger("log", "This is me log message")

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.