Copy the formatted value from the Variables pane

[ndbroadbent]

Maybe related to: #2163

I'm working on some tests for a library that modifies webpack configuration. I started the debugger to inspect the current webpack config, and now I'm struggling to copy/paste the existing rules so that I can use them as a test case.

I don't want to use JSON.stringify to get the string output because the JS object contains some regexes and they can't be serialized. I'm looking for an easy way to copy/paste the complete JavaScript Object, including all of the nested Objects and Arrays, but with JS syntax instead of JSON.

I've tried right-clicking on rules. If I click "Copy Value" I just get the following string in my clipboard:

Array(3) [Object, Object, Object]

If I click "Copy as Expression", I get:

webpackConfig.module.rules

Would it be possible to add something like "Copy Full Value"? Not sure how to name it.

Or is there a way I can serialize this into a string that can be copy/pasted? I also tried webpackConfig.module.rules.toString(), but I just get:

"[object Object],[object Object],[object Object]"

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• An extension's default plain object setting is displayed as [object Object] (#45987)

[weinand]

VS Code knows nothing about JavaScript or JSON.
And since you do not even know what serialisation format you need/want, I think VS Code is out of the loop here.

I suggest that you first create a (global) utility function that serialises an object into your format. Then you can use this function either in a watch expression, interactively in the REPL, or you can store the resulting string in additional variables so that it becomes available in the VARIABLES view of the debugger.

[vscodebot]

Please ask your question on StackOverflow. We have a great community over there. They have already answered thousands of questions and are happy to answer yours as well. See also our issue reporting guidelines.

Happy Coding!

[ndbroadbent]

Hi @weinand, thanks for your reply!

I don't know if it's accurate to say that VS Code knows nothing about JavaScript or JSON. The Debug window has a ton of features that are specifically for JavaScript, including the variables pane, call stack, breakpoints, and debug console. But do you mean that all of these features are provided by a separate plugin? If so, I would be happy to open an issue on the appropriate project that deals with JavaScript debugging.

At the moment, the "Copy Value" feature is useless in the VS Code Variables pane. If someone copies an array with one element, they will get this string in their clipboard: Array(1) [Object]. They obviously want to get: [{ foo: "bar" }], because how are you going to use Array(1) [Object]? WIth that in mind, I would like to call this a bug and fix the issue so that the "Copy Value" feature doesn't have a surprising or useless behavior.

JSON should suffice for most cases, because this is also valid JS syntax. So even if VS Code just called JSON.stringify, I would be happy with that result.

But actually I would like to propose that VS Code adds two new options to the right-click menu:

• Copy as JSON
• Copy as JS

Example:

const foo = {
  a: [1, 2, 3],
  b: function(a) { console.log(a) },
  c: /asdf/
}

Copy Value as JSON would call JSON.stringify(foo), and copy this to the clipboard:

{"a":[1,2,3],"c":{}}

(This is how JSON.stringify handles functions and regular expressions.)

Copy Value as JS would call javascriptStringify from the javascript-stringify package. (See the README for examples.)

Would it be possible to re-open this issue to discuss this new feature? Thanks!

EDIT: I found the file where these new options should be added: https://github.com/Microsoft/vscode/blob/master/src/vs/workbench/parts/debug/electron-browser/electronDebugActions.ts

[weinand]

@ndbroadbent the debugger UI (variables pane, call stack, breakpoints, watches, and debug console) lives in VS Code but is language agnostic. All data showing up in the UI comes from debug extensions.

Filing an issue with the JavaScript debugger would not help because debug extensions do not directly participate in the "Copy Value" action offered by VS Code.

So I agree that Array(1) [Object] is not a useful value returned for a one-element array.

Adding "Copy as JSON" and "Copy as JS" actions make sense when the underlying debugger is JavaScript/Json related. But for C++ and most other languages their usefulness is questionable.

javascriptStringify from the javascript-stringify package cannot be used in the generic debugger UI (e.g. in https://github.com/Microsoft/vscode/blob/master/src/vs/workbench/parts/debug/electron-browser/electronDebugActions.ts) because the debugger has no direct access to JavaScripts objects. The debugger only sees variables through the Debug Adapter Protocol.

One option would be to implement javascriptStringify based on the Debug Adapter Protocol.

@isidorn what are your thoughts about this?

[ndbroadbent]

I've actually forked vscode and started seeing if I could get this to work. I've copied the CopyValueAction class to a new CopyAsJSONAction class. And on this line, I've discovered that this.value.evaluateName is the name of the variable (or a path to a key in an object.) And when it calls session.evaluate, I think this is actually evaluating some JavaScript inside the VM. My first test was to change this.value.evaluateName to "2 + 2", and I confirmed that the result was 4.

So then I tried:

return session.evaluate(`JSON.stringify(${this.value.evaluateName})`, frameId)`

and it worked! I just need to strip the leading and trailing quotes from the string. But like you say, the debugger is used for multiple languages, and not just JavaScript. But actually if this session.evaluate call will evaluate code for any language, then all the plugins could define their own serialization formats and inject the copy options. I haven't used this in Ruby or Python before, but that would also be really useful. (Or maybe I'm wrong and session.evaluate only works in JavaScript?)

[ndbroadbent]

Here is a prototype that is working for me, but doesn't know anything about the language: ndbroadbent@7d37fe0

[weinand]

Your prototype assumes that the debug extension's evaluate request understands JavaScript. This only works for node and chrome debugger extensions...

[ndbroadbent]

Yes that's right, it's only a proof-of-concept to show that it's possible. It looks like it should work, but I'll probably need a lot of help to understand where to put the code and make it work for different languages (or just for JavaScript at the beginning.) And of course, only if other people think this is a useful core feature. Otherwise I can try to build it as an extension.

[weinand]

I never said that a "Copy as JSON" action is "impossible" ;-)
But "hacking" a prototype and adding a sound feature that works well in all situations is not the same...

[ndbroadbent]

Oh yes I totally agree, haha I honestly didn't know if it would be possible at all. I was initially worried that VS Code and the JavaScript environment were totally separate, and that it was a one-way binding into the variables pane. E.g. I was worried that you could only copy what was already in there, but there was no way to actually execute any additional JavaScript. So just for my own sake, it was great to learn more about how it works. And I have to say I am extremely impressed with the Contributing to Code documentation and the setup instructions. For such an enormous project, I'm so impressed that I could just get it running and start debugging with only a few commands.

Do you have any ideas for how this might work at the language level? For example, is there already a mechanism for language plugins to inject new commands and features into the Debug window?

[weinand]

@isidorn could you please help @ndbroadbent

[isidorn]

First of all thanks for the feature request, however closing as a dup of #27950

Secondly, how to solve this:

1. Currently there is no way for extensions to contribute commands to the variables view. The variables view is simply not exposed yet. Feel free to open a feature request for this
2. Thus this command can only be added from inside vscode. If we put it inside vscode it has to be language agnostic and not do anything node specific.

hope this helps

[ndbroadbent]

@isidorn Thanks for your help, and sorry for the duplicate issue! I might take a look at this some more and see if I can find a good solution.