32

Say, in my Google Chrome extension I do this:

console.log(msg);

and the Chrome debugger groups similar messages like so:

enter image description here

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

c00000fd
  • 20,994
  • 29
  • 177
  • 400
  • It depends on your `msg` object. You did not show any code, so it's hard to say. `console.log()` returns what YOU put there, not Chrome. – lesssugar Sep 07 '14 at 01:30

4 Answers4

46

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:

enter image description here

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.

Jason Goemaat
  • 28,692
  • 15
  • 86
  • 113
  • I can put a timestamp to address it myself. You see, this unnecessarily clutters the log. Evidently people who wrote that console log didn't think that the order of messages can be important (even if some of them are identical.) – c00000fd Sep 07 '14 at 02:06
  • The order is not changed – Jason Goemaat Sep 07 '14 at 02:08
  • 1
    Yes, it is. In my screenshot those messages can come as such: `Page=`, `iframe`, `iframe`, `Page=`, `iframe`, `iframe` but the way the console shows it, this order is not preserved. – c00000fd Sep 07 '14 at 02:12
  • 1
    I don't believe you, can you show your code? Run my sample code and you can see that 'hello' shows in three groups and the words show in order. Also turn on timestamps and it will ungroup your log for you and post that. – Jason Goemaat Sep 07 '14 at 02:17
  • 1
    Obviously it won't happen if I enable timestamps. Did you even read my 1st reply to your post above? – c00000fd Sep 07 '14 at 02:20
  • The ***order*** is preserved. Period. Messages are not grouped unless they come in ***consecutively***. If a you see a group of 4 messages, you can be guaranteed that they all came in without other messages being logged in between. I think you may not be getting the messages in the order you expect, that's why I recommended turning on timestamps so you can see that they did come in the order. In your example the messages did NOT get logged in the order you say in your second comment above. – Jason Goemaat Sep 07 '14 at 19:31
  • OK. You have a point. I made another simple test and the order was indeed preserved. Hmm. I'm not sure why it wasn't in my original case. I could tell that it wasn't by other criteria in the messages. You see, this creates an additional vector for error... that's why I was looking to disable this grouping. – c00000fd Sep 07 '14 at 19:45
  • @c00000fd, if it happens again, take a screenshot of the console, then go enable timestamps and take a screenshot of that to compare. The timestamps are recorded even if the option is turned off and you can turn it off and on to see if the timestamps are in order. – Jason Goemaat Feb 07 '15 at 01:35
  • The collapsing is not always consecutive. **Order is not preserved.** I can see this by expanding the set and seeing the [non-chronological timestamps](https://www.visibone.com/bobstein/images/non%20chronological%20timestamps%20in%20collapsed%20chrome%20js%20errors.png). – Bob Stein Oct 14 '19 at 15:08
  • Interesting, I wonder if it has something to do with either different log levels (error vs. warning) or if the infos come from different context, it looks like dealing with iframes? Strange that the timestamps are two whole minutes later... – Jason Goemaat Oct 15 '19 at 17:25
  • @JasonGoemaat that's true, the cases I've seen are coming from different domains, and only grouping errors. Quantities vary 10-100. One case is coming from inside an iframe, a second is not. Curiously, a third recurring error, also inside an iframe, is not grouped, and does conserve order. Can't tell why it's treated differently. Anyway I suggest you backpedal absolutist statements such as "The order is preserved. Period." (1) The console sometimes collapses non-consecutive rows (2) timestamps don't prevent that. It's a moving target of course, but your answer is no longer accurate. – Bob Stein Oct 30 '19 at 22:11
5

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.

enter image description here

foolo
  • 804
  • 12
  • 22
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.

Community
  • 1
  • 1
Volune
  • 4,324
  • 22
  • 23
  • 2
    Thanks. It seems like a workaround but not the actual solution. I also ended up using timestamps. Too bad there's no button to disable it. It's a good example when Google developers _overthink it_. – c00000fd Sep 07 '14 at 01:52
  • @c00000fd agreed, this is an oppressively engineered aspect of the console, to group messages with no way to disable it. In my case timestamps reveal the messages are [out of chronological order](https://www.visibone.com/bobstein/images/non%20chronological%20timestamps%20in%20collapsed%20chrome%20js%20errors.png), but enabling them doesn't put them back in order. So it's a pretty weak-tea workaround if I have to sort timestamps in my meat-computer to determine the actual sequence. – Bob Stein Oct 30 '19 at 22:20
1

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/

Rob W
  • 341,306
  • 83
  • 791
  • 678