Long strings are cutoff when hovering over local value while debugging

[nicolehaugen]

• VSCode Version: 1.11.0-insider
• OS Version: Win 10

Steps to Reproduce:

This issue likely can be repro'ed with other types of projects, but I ran into this when working with node.js where you hover over a value during debugging that contains a large string.

For example, node.js's internal modules have methods that take the contents of an entire javascript file as a string parameter in order to compile it (such as VM.js's runInThisContext method) - if you attempt to hover over this parameter to see its value while debugging, you aren't able to see all of the javascript because it is cutoff and there isn't any ability to scroll within the window to see all of the javascript. This can be painful when trying to debug.

Below are basic steps to repro the issue - but keep in mind, that the real scenario when I've hit this is when debugging through node.js internal modules where javascript is passed around as a string parameter.

1. Create a node.js project
2. Store a string as a var and place a break point on the variable (the string should be very long, such as the contents of a multiline js file)
3. When you hit the breakpoint, hover over the var to see it's value

Notice that the popup that shows the value of the string doesn't have scrollbars - also, if the contents of the string are long enough, the text will be cut off so that you can't see the entire contents of the string value.

Here is a screenshot that also shows the problem - note that when I hover over the "code" parameter. The popup window doesn't have anyway to scroll through the entire contents of the "code" parameter and it's cutoff so that I can't view all of the parameter's value.

[isidorn]

Treating this as a feature request to add scroll bar to debug hover.
Currently we distuingish between two hovers, there is one for complex variables - this one has the tree inside and has the scroll bar. While the regular hover shows no scroll bar at the moment.
Here is a code pointer https://github.com/Microsoft/vscode/blob/master/src/vs/workbench/parts/debug/electron-browser/debugHover.ts#L29

[cristianhosu]

If there isn't anyone else working on it, i could take it.
Thanks

[isidorn]

@cristianhosu nobody is currently working on this. If you submit a PR feel free to ping me on it to provide feedback. Also feel free to ask questions if needed.

[cristianhosu]

@isidorn I've started the vscode debug version and i can't seem to start a debug session in it. I have no environment, no debuggers installed. How do i enable debuggers in the debug version of vs code?

Edit: i've managed to start it and have the breakpoint in place but i can't seem to start the debug in that instance... it says: "Configured debug type 'node' is not supported."
I've tried to edit the start command to run the code.sh with --extensionDevelopmentPath to the primary extension path of vs code, but it just throws an error.
How do I get my extensions to work in the debug version of vs code?

[isidorn]

@cristianhosu sorry about that, my comment in this issue should help you out
#20623 (comment)

[isidorn]

Fixes by a great PR by @cristianhosu

[weinand]

I've verified with:

let longstring = 'z'.repeat(1000000);

For "legacy" protocol the DA truncates after 10000 characters so we do not profit from the scrolling a lot. For the "inspector" protocol the string is not truncated which makes the interaction with the hover difficult for a long string.

We should probably consolidate both approaches.

/cc @roblourens