Why Chrome Dev Tools Console generates log entries in two different ways (single-line and multiline)?

Viewed 264

The following code generates incremental single-line log in the Chrome Dev Tools console:

var run = function() {
  console.log('hello');
}    
setInterval(run, 250);

enter image description here

When I use lodash throttle wrapper I see multiline log:

var run = function() {
  console.log('hello');
}
var _run = _.throttle(run, 250);
setInterval(_run, 20);

enter image description here

All log entries link to the second source code line which is console.log('hello'); in both versions. Why there is such a splitting for throttled logging?

1 Answers

The relevant specification

2.3.2. Printer user experience innovation

  • De-duplication of identical output to prevent spam.

    Example In this example, the implementation not only batches multiple identical messages, but also provides the number of messages that have been batched together. enter image description here

Workarounds for the example string passed to .log() include concatenating a variable number of space characters to the output to prevent duplicate content being recognized by the .log() function

var run = function() {
  console.log("hello".concat(" ".repeat(Math.random() * (1000 - 1) + 1)));
}    
setInterval(run, 250);

using setTimeout() instead of setInterval()

var run = function() {
 console.log("hello");
 setTimeout(run, 250);
}    
setTimeout(run, 250);

or using console.table()

var run = function() {
  console.table(["hello"]);
}    
setInterval(run, 250);
Related