How to make the Console automatically scroll?

Developer Tools
#1

I am using Firefox (Developer Edition) as my primary debugging environment for web-development. Is there some way to make the Web Console automatically scroll to keep up with new output as it is logged?

I’m using Webpack with HMR and the console quickly fills up with messages and then I have to keep manually scrolling down all the time. This is extremely annoying because it is a lot quicker to move one’s eyes across two monitors than to move the mouse all the way, just to scroll a log.

#2

hello there.
It should automatically scrolled until you scroll up, but maybe we do have bugs?
Would you have a use case where it doesn’t scroll so we can investigate?
Thanks!

#3

As a developer, I did wonder if it had stopped automatically scrolling because I had “detached” it from the tail of the log by scrolling up and so I tried to scroll to the end but that failed to “attach” it, again – hence this post.

Let me do some quick experiments and see if I can work out the bug…

#4

so yes, the heuristic is that if you scrolled up, we’re not going to automatically scroll (because you might want to have a look at a given message, and if we keep jumping you down it will be annoying).
But there has been issues in the past, so maybe there’s a case where we don’t handle that right

#5

It appears to be nothing fancy, just a bug.

Firefox Developer Edition: 66.0b13 (64-bit)

Steps to reproduce:

  1. Open site.
  2. Open developer tools and web console
  3. Observe that the console is not full (no vertical scroll bar)
  4. Touch source files to cause WDS to recompile, adding messages to the log. (Firefox is not focussed)
  5. Observe that the console does not scroll to keep up.

I never scrolled up or anything. Happens with a brand new tab or Window, too.

#6

would you have an online example I can look at? a glitch app or something? I don’t know what WDS is.

#7

WDS is webpack’s development server. It serves webpack content and implements hot-module-replacement, notifying the browser to reload certain modules only (instead of the whole page) when certain code files change.

Reproducing the bug is non-trivial. I tried to do it with a basic webpack app but the console scrolled as expected.

In the end, I had to gut my own project and put together a sample that reproduces the bug. It needs a node.js environment and yarn (or npm). The bug can definitely be reproduced thusly:

  1. Extract archive: attached to a gist at: https://gist.github.com/stephenmartindale/7401843adbd0976b2d2e64c2805861bd/raw/6d07f3e2d69aac7cecdda3b6efc4737b364bf725/Console%20not%20Scrolling%20(Firefox).zip
  2. Build with npm in the usual way: npm install
  3. Start webpack’s development server with npm run serve
  4. Navigate to http://localhost:8085
  5. Observe that a site with one line of text appears.
  6. Open the developer console. Observe some entries in the console.
  7. Use a text editor to repeatedly touch the file ./src/components/App/App.vue.html (can be done by appending spaces to the end and saving.)
  8. Every time the file is touched, WDS recompiles and the browser should show messages in the console indicating that it was notified that the app updated but that “nothing changed”
  9. Eventually, the console will stop scrolling down. (In my real project, this happens immediately. With the cut-down sample, I found I had to try several times after the log messages exceeded the height of the console window.)

Firefox D.E. 66.0b13 (64-bit); Windows 10; Node.js v10.15.0

1 Like
#8

Archive uploaded to GitHub gist:

https://gist.github.com/stephenmartindale/7401843adbd0976b2d2e64c2805861bd/raw/6d07f3e2d69aac7cecdda3b6efc4737b364bf725/Console%20not%20Scrolling%20(Firefox).zip

#9

Thanks for all the information Stephen.
Do you think that could be caused by https://bugzilla.mozilla.org/show_bug.cgi?id=1533667 ?

#10

Seems likely. I’ll test when I get Firefox 67.

#11

This still happens for me with Firefox 69.0.3 on macOS 10.15

Here’s a screen recording of the console not auto-scrolling (despite being empty and later scrolled to the bottom)

https://i.imgur.com/pNKlKS5.jpg(image larger than 15000KB)

#12

There was another fix in Firefox 70 https://bugzilla.mozilla.org/show_bug.cgi?id=1571992
Could you try on Firefox Beta or DevEdition to check if it’s fixed for you?

1 Like
#13

Thanks for the quick reply! Yes, it seems to be fixed in Firefox 70 on the Developer Edition :raised_hands:

#14

glad it’s fixed for you :wink:

#15

I’m having the same issue using the version 82.0.

#16

I am having this issue with firefox-99-0b6 development edition. Same problem as initially mentioned. When WDS is recompiled, my console behaves just like @andreasvirkus attached recording.

I also experienced this problem with firefox 80 standard/community edition.
@Nicolas_Chevobbe

#17

I reproduced the issue with a small snippet flooding tall warnings and filed https://bugzilla.mozilla.org/show_bug.cgi?id=1760910

From what I can see, the height of messages matters. If you have a recording to share it could be interesting to see what kind of messages trigger the bug for you.

1 Like
#18

https://imgur.com/a/CbREFj6

See imgur link above. You are probably right about the tall messages. In this case it’s tall logs, the warnings are pretty short.

1 Like
#19

Just wanted to follow up: Bug https://bugzilla.mozilla.org/show_bug.cgi?id=1760910 is included in Firefox 101 which should very soon be on the release channel. So if anyone still experiences similar issues with Firefox 101 or newer, please add a comment here (or file a bug directly :slight_smile: )

Thanks!

#20

hi,lately There was another fix in the Firefox 70 https://bugzilla.mozilla.org/show_bug.cgi?id=1571992
Could you try on Firefox Beta or DevEdition to check if it’s fixed for you?