Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
resolving the proper location and line number through a console.log wrapper

console.log wrap resolving for your wrapped console logs

I've heard this before:

What I really get frustrated by is that I cannot wrap console.* and preserve line numbers

We enabled this in Chrome DevTools via blackboxing a bit ago.

If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.

You can try it out here: http://plnkr.co/edit/3wg4u9HUGXfFH0U7MR7j

Blackbox the source file:

image

You can right-click the file in the editor, as well. Or blackbox via regex in Settings.

Logs will be resolved back to their call frame.

image

FWIW, Blackboxing does a lot. Blackboxing a file means:

  • Exceptions thrown from library code will not pause (if Pause on exceptions is enabled),
  • Stepping into/out/over bypasses the library code,
  • Event listener breakpoints don't break in library code,
  • The debugger will not pause on any breakpoints set in library code.

Read more about it over at https://developer.chrome.com/devtools/docs/blackboxing

Cheers and thanks crbug/249575

@mattLummus

This comment has been minimized.

Show comment
Hide comment
@mattLummus

mattLummus Feb 27, 2015

Awesome, this is just what I've been looking for.

mattLummus commented Feb 27, 2015

Awesome, this is just what I've been looking for.

@aharpervc

This comment has been minimized.

Show comment
Hide comment
@aharpervc

aharpervc commented Feb 28, 2015

Dynamite

@thany

This comment has been minimized.

Show comment
Hide comment
@thany

thany Feb 28, 2015

Can it be done in Firebug?

thany commented Feb 28, 2015

Can it be done in Firebug?

@wixo

This comment has been minimized.

Show comment
Hide comment
@wixo

wixo Feb 28, 2015

Nice! no more Error throwing :) https://github.com/wixo/debug

wixo commented Feb 28, 2015

Nice! no more Error throwing :) https://github.com/wixo/debug

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 28, 2015

@wixo: check out http://www.briangrinstead.com/blog/console-log-helper-function .. it preserves original line number without throwing an exception.

Owner

paulirish commented Feb 28, 2015

@wixo: check out http://www.briangrinstead.com/blog/console-log-helper-function .. it preserves original line number without throwing an exception.

@mahemoff

This comment has been minimized.

Show comment
Hide comment
@mahemoff

mahemoff Feb 28, 2015

Very nice and I was hoping to see some way to automatically whitelist the blackboxed URLs - the regex list didn't disappoint.

Suggestion for further improving it: Standardise the whitelist into a manifest.json equivalent (dev.json or something) so the default setting can be part of the project instead of (or in addition to) the browser settings. It would be a hassle for every developer of a project to have to configure the same whitelist manually after checkout and whenever it needs to change.

mahemoff commented Feb 28, 2015

Very nice and I was hoping to see some way to automatically whitelist the blackboxed URLs - the regex list didn't disappoint.

Suggestion for further improving it: Standardise the whitelist into a manifest.json equivalent (dev.json or something) so the default setting can be part of the project instead of (or in addition to) the browser settings. It would be a hassle for every developer of a project to have to configure the same whitelist manually after checkout and whenever it needs to change.

@patik

This comment has been minimized.

Show comment
Hide comment
@patik

patik Feb 28, 2015

@wixo also supports line numbers: https://github.com/patik/console.log-wrapper/ and logs in legacy browsers (but no line numbers there)

patik commented Feb 28, 2015

@wixo also supports line numbers: https://github.com/patik/console.log-wrapper/ and logs in legacy browsers (but no line numbers there)

@derblub

This comment has been minimized.

Show comment
Hide comment
@derblub

derblub commented Feb 28, 2015

👍

@msafi

This comment has been minimized.

Show comment
Hide comment
@msafi

msafi Feb 28, 2015

That's great! Thanks so much! Is it also possible to filter out 3rd party libraries from the stack trace by blackboxing? :D

msafi commented Feb 28, 2015

That's great! Thanks so much! Is it also possible to filter out 3rd party libraries from the stack trace by blackboxing? :D

@jlukic

This comment has been minimized.

Show comment
Hide comment
@jlukic

jlukic Feb 28, 2015

Semantic UI uses a slightly different implementation for wrapping console calls that preserves line numbers and doesn't require blackboxing.

module.debug = function() {
  if(settings.debug) {
    // overwrite self
    module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
    module.debug.apply(console, arguments);
  }
};

We also use a console.table to do grouped performance logging, console.groupCollapsed is epic.

log gif

jlukic commented Feb 28, 2015

Semantic UI uses a slightly different implementation for wrapping console calls that preserves line numbers and doesn't require blackboxing.

module.debug = function() {
  if(settings.debug) {
    // overwrite self
    module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
    module.debug.apply(console, arguments);
  }
};

We also use a console.table to do grouped performance logging, console.groupCollapsed is epic.

log gif

@leonardopaiva

This comment has been minimized.

Show comment
Hide comment
@leonardopaiva

leonardopaiva commented Apr 28, 2015

thanks

@IRus

This comment has been minimized.

Show comment
Hide comment
@IRus

IRus Aug 5, 2015

Any tips for Firefox users?

IRus commented Aug 5, 2015

Any tips for Firefox users?

@zspitzer

This comment has been minimized.

Show comment
Hide comment
@zspitzer

zspitzer commented Jun 26, 2018

here's the FF bug about implementing this https://bugzilla.mozilla.org/show_bug.cgi?id=1060904

@zspitzer

This comment has been minimized.

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