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?

[lwestfall]

Agreed, it's very frustrating. What info is needed to remove the needs more info tag?

[acoutts]

Everyone please help upvote the issue for more visibility.

[archon52]

Having the same issue trying to debug a dotnet core application on linux. This just started happening after updating to 1.50

Version: 1.50.0
Commit: 93c2f0fbf16c5a4b10e4d5f89737d9c2c25488a3
Date: 2020-10-07T06:01:33.073Z
Electron: 9.2.1
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Linux x64 5.2.9-200.fc30.x86_64

[1ka]

I think this issue is related to line wrapping in the output window.

When lines that wrap scroll out of the window, the view/viewport erroneously jumps up an extra line. Looks really bad when a batch of long lines scrolls up as the next debug appears half way up the view.

[lwestfall]

@1ka you may be on to something there, I notice it frequently with debug messages that log SQL queries from EF Core (which of course end up being several lines long at minimum). You can also see in the OP that the scrolling seems to trip up as soon as that multiline output appears.

[archon52]

@lwestfall I'm seeing the same thing with an EF Core project i am working on. To add to this though, it seems to only be an issue the first time you try to scroll through the logs after they are generated. If i'm running my project and refresh the page, several ef queries are output to the logs. If i try to scroll up the scrolling is broken, but once i scroll to the entries from before the refresh everything works fine. I can then scroll back and forth through the whole debug log without any issues.

[szmcdull]

Seems it happens when a lot of lines output to the debug console. But it is very common case.

When there are a lot of lines output to the debug console, it auto scrolls to somewhere EXCEEDS the BOTTOM, leaving a blank in the bottom part of the debug console. Sometimes all of the debug console becomes blank. The position is not constant. So as the program keeps on printing debug logs, the debug console will be flickering with random blank area. Even when I stop at a break point, it is hard to scroll up back to the REAL END of logs. It will take me several scrolls to achieve it.

[isidorn]

Is anyone seeing this that is not using Flutter?
If yes do you have exact reproducable steps?

[lwestfall]

I see it using .NET Core 3.1, where any logging to the debug window with multiple lines in a single log message causes the issue. Unfortunately I can't share my repo due to confidentiality, but I might be able to whip up a repro sample console app?

Version: 1.50.1 (user setup)
Commit: d2e414d9e4239a252d1ab117bd7067f125afd80a
Date: 2020-10-13T15:06:15.712Z
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

[isidorn]

@lwestfall that would be useful. If it is is just single log message with mutpile lines then I can also try to repro with JS

[lwestfall]

@isidorn It was naive of me to assume this would be so easy to reproduce. I made a sample console app that logs a random message (sometimes single line, sometimes multi line) and I wasn't getting the problem initially. Eventually though I was able to get it to jankify consistently. It might have had to do with waiting until the output was sufficiently full. Anyway here you go, see readme for steps:

https://github.com/lwestfall/JankyDebugOutputRepro

[SoftWyer]

3. Go to debug console. Try to scroll up.
4. Keep trying to scroll up.
5. Repeat steps 3-4 until angry.

🤣

@isidorn It was naive of me to assume this would be so easy to reproduce. I made a sample console app that logs a random message (sometimes single line, sometimes multi line) and I wasn't getting the problem initially. Eventually though I was able to get it to jankify consistently. It might have had to do with waiting until the output was sufficiently full. Anyway here you go, see readme for steps:

https://github.com/lwestfall/JankyDebugOutputRepro

[isidorn]

@lwestfall I tried reproducing this using your program just slightly changed for JS (I only use numbers, not words). And I was unable to reproduce the issue (waiting 15 minutes for the output to be really long). I tried switching to the terminal and back to debug console and all was good.

Here's my example code.
If somebody has ideas on how to modify this to reproduce I am open for suggestions.
Thanks!

setInterval(() => {
    var count = Math.random() * 50;
    var message = Date.now() + 'new log message: ';
    for (var i = 0; i < count; i++) {
        message += ' ' + Math.random();
    } 
    console.log(message);
}, 200);

[joaomoreno]

Another way to reproduce on macOS:

1. Open Settings editor
2. Click the very bottom of the scrollbar to go the end of the settings contents
3. Scroll up 🐛

[isidorn]

Also shout out to @acoutts for sitting down with us and helping us find a reproducable case. Thanks!

[joaomoreno]

Thanks @alexdima for the awesome fix! eec97b8

[lwestfall]

Thanks to all involved in troubleshooting and helping to repro. Looking forward to seeing this fix in a future release!😃

[isidorn]

@alexdima thanks!

Would be great if some people take the VS Code Insiders starting from next week and try this out in practice. And let us know if it is good.
I have verified that it is now good for me with @acoutts steps

[acoutts]

@isidorn when should the explorer build be up do you think?

[isidorn]

@acoutts I believe Friday...
@deepak1556 might know more

[github-actions]

Unable to locate closing commit in issue timeline. You can manually reference a commit by commenting \closedWith someCommitSha.

[joaomoreno]

\closedWith 1aa76d7

[themisir]

😇 Is there any estimated release date for this patch? Because it's very annoying bug.

[isidorn]

@themisir in insiders it will be later today.
In stable it will be early February.

[isidorn]

Users did anybody get a chance to try this with VS Code insiders?
Asking because we would like to get the fix verified. Thanks

[lwestfall]

@isidorn Just tried a debug session on the same code in code-insiders as well as code (stable) for control. Can confirm that code-insiders has the issue fixed in my case! Thanks!

[isidorn]

Awesome, thanks for verifiying. Thus adding verified label