Google Chrome follow developer console logging - google-chrome

Question

Im using console.log lots in my javascript for debugging mouse move events. The problem im having is that when in the chrome console the new entries aren't followed.
Its best illustrated in these screenshots:
First lot of logs is fine because its big enough to see all of it on the screen:
A few seconds later:
The log has gone past the size of the window requiring me to scroll.
This makes it incredibly difficult to debug mouse move events because I have to move over to the console and scroll down, thus adding more entries to the log.
So my question is: How can I get chrome to essentially tail the log instead of stopping and require me to scroll.

Answer 1

With the console open, drag the scroll bar down to the bottom of the window and release it. It should tail the output for you.
It took me quite a few tries to get it to work in Version 27.0.1438.7 dev-m. But in Version 27.0.1440.0 canary, not only did it happen automatically, I could reattach the auto-scroll each time I tried.
You can download Canary from here.

Answer 2

The default behavior is for Console to follow (tail) logs as they head in there.
However, we had a bug in the DevTools where if you changed the zoom factor (cmd++) it didn't work always.
We just fixed that: https://codereview.chromium.org/180733003/ You'll need canary for a little while (from the date of this post) but it'll work its way down to Stable in about 10 weeks.

Answer 3

There's a rather pernicious bug here (present in Chrome for as long as I remember), where if you log any sort of expando-item like a DOM element or some such thing, it messes with the display of the log, and causes the scroll to stop following.
I solved this by applying a little bit of ingenuity, and finding the offending log, and you don't even need to delete the log statement, you just have to make it "friendlier". What works very often is I take any such log statement such as
console.log((mouse ? "mouse" : "touch") + " start on", jqtarg[0]);
and wrap it in an array:
console.log([(mouse_not_touch ? "mouse" : "touch") + " start on", jqtarg[0]]);
You may try do other things as well, in an attempt to make the log more readable, such as an object (haven't tested any of this rigorously, it may still cause the annoying failure-of-scroll-follow):
console.log({"mouse/touch start on": jqtarg[0]});
Based on a very small amount of testing, it would appear that if a log appears in the log buffer as an item that can be directly hovered (as opposed to requiring you to manually expand it first) to cause the inspector to highlight the item in the DOM for you, then it may trigger "scroll lock syndrome".
BTW, a helpful thing to be aware of is that if you log the exact same stuff repeatedly, Chrome helpfully "stacks" them like so: (See? I fixed the autoscroll by shoving my log in an object! yay!)
If you don't really need to see values based on precise coordinates, printing coarser values more ... coarsely will lead to a more compact log (which will still give you sensible feedback with counts).
Update: Sometimes none of this works. Sometimes you're just out of luck with this and you just have to clean up all the logs that you don't need and log the minimal amount of information to prevent overloading it and causing it to fail to scroll down.