Chrome debugger - how to turn off console.log message grouping?

Solution 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.

Solution 2:

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.

Solution 3:

In the top-right corner of the console window, there is a cogwheel button that opens a panel with a setting called "Group similar". If you un-check this checkbox, similar log entries will no longer be grouped together.

Solution 4:

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/