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:
- Extract archive: attached to a
gist at: https://gist.github.com/stephenmartindale/7401843adbd0976b2d2e64c2805861bd/raw/6d07f3e2d69aac7cecdda3b6efc4737b364bf725/Console%20not%20Scrolling%20(Firefox).zip
- Build with
npm in the usual way:
- Start webpack’s development server with
npm run serve
- Navigate to http://localhost:8085
- Observe that a site with one line of text appears.
- Open the developer console. Observe some entries in the console.
- 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.)
- 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”
- 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