Did you ever have phantom console.log - or more specifically you’ve no idea where it was happening?

I have. This tiny bit of code will help you identify where the logging is being called from. The nice thing is it works in the browser and in node.

[![](/images/terminal-600.jpg)](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[$49 - only from this link](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

Honourable mention: [@garychambers108’s](https://medium.com/@garychambers108/b3cc6fd0dafd) node.js better logging - I’ve been wanting to do something about my rogue consoles and Gary’s article kicked me in to action.

Upgrading log to show where logging is happening[](#upgrading-log-to-show-where-logging-is-happening)

['log', 'warn'].forEach(function(method) {
  var old = console[method];
  console[method] = function() {
    var stack = (new Error()).stack.split(/\n/);
    // Chrome includes a single "Error" line, FF doesn't.
    if (stack[0].indexOf('Error') === 0) {
      stack = stack.slice(1);
    }
    var args = [].slice.apply(arguments).concat([stack[1].trim()]);
    return old.apply(console, args);
  };
});

If you include this as high as possible in your code base, all subsequent console.log (or warn) calls will include the line the call was made from:

![](/images/where-logging.png)

Here’s a simplified demo: https://jsbin.com/wataw/2/edit?js,console

All the code is doing is rewriting the log and warn methods and appending the location of the call at the end of the log. Note that I’m not overloading the error method because it comes with it’s own stacktrace.

The location of the call is deduced using new Error, then looking at the stack property (disclaimer: this won’t work in all browsers - I’ve only tested in Firefox, Chrome and Node).

Simple. Now I can hunt down those rogue logs and remove them from the codebase.

Published 23-May 2014 under #code & #console & #de & #debug & #javascript. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/where-is-that-console-log.md)

Comments

Lock Thread

Login

Add Comment[M ↓   Markdown]()

[Upvotes]()[Newest]()[Oldest]()

![](/images/no-user.svg)

Jonz

0 points

6 years ago

Super late to the conversation but! if you’re using Chrome, the debug function in the console performs a similar function [https://developers.google.c…​;](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#debugfunction)

I have no idea how long it’s been around!

![](/images/no-user.svg)

assignment help

0 points

7 years ago

Knowing on where to locate this console log is actually important in order for you to know on how to use this kind of tool for them to provide a good output on their work and a good thing for them to use for their performance.

![](/images/no-user.svg)

Etienne

0 points

9 years ago

Great thanks !

?

Anonymous

0 points

9 years ago

Awesomeeee! I was actually trying to solve this myself, for my little logger [https://github.com/gabrielc…​;](https://github.com/gabrielcatalin/tint.js/) , but didn’t quite get it, and I dropped it for a while. Great to see a solution. Thanks Remy Sharp.

?

Anonymous

0 points

9 years ago

Chromium console actually shows the file and line from console.log() calls.

You shall not debug minified files, use the uncompressed version, and production code should not include console.log() calls anyway — if some dependency lib does, you can easy find it with a grep.

![](/images/no-user.svg)

rem

0 points

9 years ago

Sure, but node.js doesn’t which is my actual issue and use case.

?

Anonymous

0 points

9 years ago

I’ve created a gist which includes grouping to reduce the visual noise.

[https://gist.github.com/fdn…​;](https://gist.github.com/fdn/85563337ca5cd815ca6e)

?

Anonymous

0 points

9 years ago

In IE (10?) you have to try-catch threw error, to get stack property from your error object

?

Anonymous

0 points

9 years ago

The whole Error workaround is a very clever hack for "arguments.caller" not working in strict mode. Might even be a bug.

?

Anonymous

0 points

9 years ago

I think it do not work for all lgs if you are using iframes or web workers.

?

Anonymous

0 points

9 years ago

This is very useful. I’ve had issues in node where some dependency is angry and logging out nonsense, but I couldn’t for the life of my find WHERE or WHICH LIBRARY was causing it! The message was super generic. I debugged for hours before I found myself nested deep within a long node\_modules hierarchy where the logging was happening. Turned out the parent lib of the lib throwing a fit just needed to upgrade its dependencies to the latest version and all was well.

With a little adapting for node (possibly including the \_\_filename), this code would have helped sooooo much.

[Commento](https://commento.io)