Debugger output is laggy and janky when scrolling

[acoutts]

When scrolling up on fresh output in the debugging console while running a flutter app, it's very janky and doesn't scroll. After you've "viewed" it at least once then it scrolls up/down fine in the future.

This regression happened sometime recently after upgrading to 1.50.

Screenshots
https://i.imgur.com/dpMBVl3.mp4

It's also adding lots of whitespace to the end of each line printed so you have to scroll up:

I originally reported the issue to the Dart-Code extension but was told it looks like a bug in VSCode and to submit it here. Original issue: Dart-Code/Dart-Code#2829

• VSCode Version:

Version: 1.50.0-insider
Commit: 772aa0723f7f6b04b710bc3a92b7a904b60ef439
Date: 2020-09-28T05:41:42.988Z (15 hrs ago)
Electron: 9.3.0
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Darwin x64 19.6.0

• OS Version:

macOS Catalina 10.15.6

Steps to Reproduce:

1. Run any flutter app.
2. Try to scroll on some output in the debugging area.

Does this issue occur when all extensions are disabled?: Yes/No
I cannot test because I need extensions to use the debugger and view the debugger output.

[isidorn]

@acoutts thanks for filling this. Can you reproduce this issue with VS Code stable 1.49.2? If you can not then it seems like something broke in insiders.
I do not have dart setup and I can not repro with Node.
Is there new output coming in while you are scrolling? Or is there anything special going on?

[acoutts]

cc @DanTup as he might be able to explain more about what's being piped in there, but I believe it's just stdout/stderr.

I just tested on 1.49.2 and it looks to be fine on that, so it's something changed in a recent insiders build.

[isidorn]

Is it possible to create a minimal reproducable case and put it on GitHub so I can clone this on my machine and investigate further?

[DanTup]

Yeah, it should just be stdout/stderr from the Flutter process (though we do have some detection of stack frames to attach location metadata to the OutputEvents).

I don't know if it's related, but in Dart-Code/Dart-Code#2733 (comment) it was noted that there's some weird escaping on Flutter's part (I can see that in the screenshot above). I'm not sure if that matters here though.

@acoutts are there new lines being added to the output while this is happening? Can you repro in a simple project created with the *Flutter: New Project command?

[acoutts]

I've found something interesting - it only happens when using the logger library to print: https://pub.dev/packages/logger
But still, something has recently changed in code vs insiders that's broken it, with the logger library staying fixed.

• First download flutter: https://flutter.dev/docs/get-started/install
• Clone the test project: https://github.com/acoutts/vscode_issue_107704
• Add the project folder to your vscode workspace.
• Start an iOS or Android emulator, or plug in a device you have.
• Select the device in the lower right corner of vscode:

* Click the play button in the debugging tab with the `Flutter (vscode_issue_107704)` profile selected:

* Tap the plus button in the lower right to trigger some debug output

* Observe the extra space printed in the debug console and the scroll jank when you try to scroll up slowly, which prevents you from actually scrolling up.

[acoutts]

@isidorn did you get a chance to try that out?

[acoutts]

Just want to report it's still happening on the latest insiders:

Version: 1.50.0-insider
Commit: 93c2f0fbf16c5a4b10e4d5f89737d9c2c25488a3
Date: 2020-10-07T00:58:35.624Z (2 days ago)

[DanTup]

I saw this today on stable (1.50.0) but it was when I was running the Dart extension's tests (and scrolling up through a lot of output they were writing) so it's seems unrelated to Dart, because the extension is written in TypeScript.

It was the Mocha coloured output from the tests (similar to the VS Code extension sample project would have). I ran a test run, the debug session ended, and it scrolled really far down leaving a big empty space at the bottom. As I scrolled up, the scrolling would sometimes jitter around.

It only occurred on one debug run out of 20-30 though, and I couldn't reproduce it afterwards.

[1ka]

I too see this issue, both with Flutter debug output and sometimes with node development output. I don't have the Logger plugin as mentioned by @acoutts

Using the mousewheel to scroll up the debug output is painful, more like scroll up 2 lines and back 1 for every line.

Weirdly, if I select some text in the debug output the problem immediately disappears and scrolling is fine, only to resurface with later output.

Version: 1.50.0 (user setup)
Commit: 93c2f0fbf16c5a4b10e4d5f89737d9c2c25488a3
Date: 2020-10-07T06:10:52.432Z
Electron: 9.2.1
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.19041

[lwestfall]

I'm having this issue as well, not using flutter or node, but debugging an ASP.NET Core 3.1 application. I am using Serilog in this application if that matters.

Version: 1.50.0 (user setup)
Commit: 93c2f0fbf16c5a4b10e4d5f89737d9c2c25488a3
Date: 2020-10-07T06:10:52.432Z
Electron: 9.2.1
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.18363

[acoutts]

This is really making it hard to use VSCode now. Is anyone actively looking into it yet?