Chrome debugger - how to turn off console.log mess

Question

Say, in my Google Chrome extension I do this:

console.log(msg);

and the Chrome debugger groups similar messages like so:

Is there any any to turn it off and have messages post just as they are?

Answer 1

It only collapses consecutive rows that are identical, I don't see it as much of a problem, but with the settings button in the top right corner of the console you can enable 'Show timestamps' which will put them on different lines:

You can see they only collapse consecutive duplicates with this:

msgs = ['hello', 'world', 'there'];
for (i = 0; i < 20; i++) console.log(msgs[Math.floor((i/3)%3)]) 

The console api has a lot of other functions that might help you follow your code. For instance console.count(label) logs label with a count of how many times it's been logged, console.group() lets you group other logging calls together and console.timeline(label) lets you group logs into a timeline.

Answer 2

Messages are only collapsed with the previous if they are identical.
To prevent messages from being collapsed, you can either alternate the log levels, or use alternate the log output.

console.log and console.debug are visually similar in Chrome's devtools (i.e. there is no icon in front of it). If you don't use the verbosity filter, then alternating between console.log and console.debug will solve your problem:

console.log('message');
console.debug('message');
console.log('message');

// Convenience function:
function log() {
    log.counter = log.counter ? log.counter + 1 : 1;
    console[log.counter % 2 ? 'log' : 'debug'].apply(console, arguments);
}

The other way to get the desired result is to insert an invisible character in front of the message (note: I use %s to prevent an extra space from appearing (see devtools formatting options), and also a ZWSP to prevent any visual character from appearing at all):

function log() {
    log.counter = log.counter ? log.counter + 1 : 1;
    var args = [].slice.call(arguments);
    if (log.counter % 2) {
        args.unshift('%s\u200B'); // ZWSP (zero-width space, you won't see it)
    }
    console.log.apply(console, args);
}

Demo: http://jsfiddle.net/x3725j38/1/

Answer 3

Someone had the same problem there: Google Chrome developer tools console logging… almost useless? with no answer to disable this feature.

As a workaround, you can enable Show timestamps for the console in the developer tool settings.