Add option to show getter evaluation without expanding

[andrewbranch]

When inspecting an object with getters, the old debugger would show the getters as regular properties, evaluating them and showing their return values inline with the rest of the other properties. In this screenshot, all the __debug properties are actually getters on the Node’s prototype:

In the new debugger, each getter has to be clicked to be evaluated:

Presumably the motivation here is that getters can cause side effects, and it would be horrible if observing a variable in the debugger caused observable effects to your program state. However, in TypeScript, all our getters are pure, and we rely on these __debug-prefixed ones heavily to be able to identify objects at a glance, and those extra clicks add up to a lot of pain.

I would suggest a configuration option that could be set to opt into the old inlining behavior.

[Jaffsterz]

I think this is a must-have for Vue developers where all reactive properties are wrapped in getters and setters. I'm finding it really frustrating at the moment not to be able to see object properties. without clicking each one separately.

[connor4312]

This sounds good. I would be happy to accept a PR for it, otherwise I can try to get to it this coming month. Code pointers:

Currently we evaluate the 'getter' when we inspect the variable for the getter itself:

https://github.com/microsoft/vscode-js-debug/blob/ea8cc4b8a521e9881a1a383080dee70011118293/src/adapter/variables.ts#L129-L145

Instead we can evaluate it directly here:

https://github.com/microsoft/vscode-js-debug/blob/ea8cc4b8a521e9881a1a383080dee70011118293/src/adapter/variables.ts#L487-L491

[connor4312]

There's now a config option debug.javascript.autoExpandGetters for this.

[alexr00]

I set "debug.javascript.autoExpandGetters": true. Reloaded (wasn't sure if this was needed) Getters are still not expanded: I have version 2020.6.317 of the JavaScript Debugger (Nightly).

[connor4312]

hm, this works for me 🤔

@alexr00 can you enable trace: true in the launch config and share a log? We do fall back if the getter evaluation fails for any reason, maybe that's what's happening for you.

[alexr00]

This is with extension host debugging using the builtin version of the extension. For some reason it produced two logs. Note: Using the "preview" debug extension Verbose logs are written to: C:\Users\alros\AppData\Local\Temp\vscode-debugadapter-4.json from that log:

{"timestamp":1591366471650,"tag":"runtime.welcome","level":1,"message":"js-debug-nightly v2020.6.208 started","metadata":{"os":"win32 x64","nodeVersion":"v12.8.1","adapterVersion":"2020.6.208"}}
{"tag":"dap.receive","timestamp":1591366471626,"metadata":{"connectionId":3,"message":{"command":"initialize","arguments":{"clientID":"vscode","clientName":"Visual Studio Code - Insiders","adapterID":"pwa-extensionHost","pathFormat":"path","linesStartAt1":true,"columnsStartAt1":true,"supportsVariableType":true,"supportsVariablePaging":true,"supportsRunInTerminalRequest":true,"locale":"en","supportsProgressReporting":true},"type":"request","seq":1}},"level":0}
{"tag":"dap.send","timestamp":1591366471627,"metadata":{"connectionId":3,"message":{"seq":1,"type":"response","request_seq":1,"command":"initialize","success":true,"body":{"supportsConfigurationDoneRequest":true,"supportsFunctionBreakpoints":false,"supportsConditionalBreakpoints":true,"supportsHitConditionalBreakpoints":true,"supportsEvaluateForHovers":true,"exceptionBreakpointFilters":[{"filter":"caught","label":"Caught Exceptions","default":false},{"filter":"uncaught","label":"Uncaught Exceptions","default":false}],"supportsStepBack":false,"supportsSetVariable":true,"supportsRestartFrame":true,"supportsGotoTargetsRequest":false,"supportsStepInTargetsRequest":false,"supportsCompletionsRequest":true,"supportsModulesRequest":false,"additionalModuleColumns":[],"supportedChecksumAlgorithms":[],"supportsRestartRequest":true,"supportsExceptionOptions":false,"supportsValueFormattingOptions":true,"supportsExceptionInfoRequest":true,"supportTerminateDebuggee":false,"supportsDelayedStackTraceLoading":true,"supportsLoadedSourcesRequest":true,"supportsLogPoints":true,"supportsTerminateThreadsRequest":false,"supportsSetExpression":false,"supportsTerminateRequest":false,"completionTriggerCharacters":[".","[","\"","'"],"supportsBreakpointLocationsRequest":true,"supportsClipboardContext":true}}},"level":0}
{"tag":"dap.send","timestamp":1591366471627,"metadata":{"connectionId":3,"message":{"seq":2,"type":"event","event":"initialized","body":{}}},"level":0}
{"tag":"dap.receive","timestamp":1591366471632,"metadata":{"connectionId":3,"message":{"command":"launch","arguments":{"type":"pwa-extensionHost","request":"launch","name":"Launch Extension","runtimeExecutable":"C:\\Users\\alros\\AppData\\Local\\Programs\\Microsoft VS Code Insiders\\Code - Insiders.exe","args":["--extensionDevelopmentPath=C:\\Users\\alros\\repos\\Microsoft\\vscode-pull-request-github2","--disable-extension=GitHub.vscode-pull-request-github-insiders"],"skipFiles":["<node_internals>/**/*.js","**/node_modules/**/*.js"],"smartStep":true,"sourceMaps":true,"outFiles":["C:\\Users\\alros\\repos\\Microsoft\\vscode-pull-request-github2/media/*.js"],"trace":true,"__workspaceFolder":"c:\\Users\\alros\\repos\\Microsoft\\vscode-pull-request-github2","__sessionId":"f7ccef70-30ba-4c3d-9d7f-dc013cd4cee2"},"type":"request","seq":2}},"level":0}
{"tag":"dap.send","timestamp":1591366471633,"metadata":{"connectionId":3,"message":{"seq":3,"type":"event","event":"output","body":{"category":"console","output":"Note: Using the \"preview\" debug extension\n"}}},"level":0}
{"tag":"dap.send","timestamp":1591366471634,"metadata":{"connectionId":3,"message":{"seq":4,"type":"event","event":"output","body":{"category":"telemetry","output":"js-debug/launch","data":{"type":"pwa-extensionHost","request":"launch","os":"win32 x64","nodeVersion":"v12.8.1","adapterVersion":"2020.6.208","parameters":"{\"type\":\"pwa-extensionHost\",\"name\":\"<string>\",\"request\":\"launch\",\"trace\":true,\"outputCapture\":\"console\",\"timeout\":10000,\"showAsyncStacks\":true,\"skipFiles\":[\"<string>\",\"<string>\"],\"smartStep\":true,\"sourceMaps\":true,\"pauseForSourceMap\":false,\"resolveSourceMapLocations\":[\"<string>\",\"<string>\"],\"rootPath\":\"<string>\",\"outFiles\":[\"<string>\"],\"sourceMapPathOverrides\":{\"webpack://?:*/*\":\"<string>\",\"webpack:///./~/*\":\"<string>\",\"meteor://💻app/*\":\"<string>\"},\"__workspaceFolder\":\"<string>\",\"__autoExpandGetters\":false,\"cwd\":\"<string>\",\"env\":{},\"envFile\":null,\"localRoot\":null,\"remoteRoot\":null,\"autoAttachChildProcesses\":false,\"runtimeSourcemapPausePatterns\":[],\"args\":[\"<string>\",\"<string>\"],\"runtimeExecutable\":\"<string>\",\"__sessionId\":\"<string>\"}"}}}},"level":0}
{"tag":"dap.send","timestamp":1591366471639,"metadata":{"connectionId":3,"message":{"seq":5,"type":"event","event":"output","body":{"category":"console","output":"Verbose logs are written to:\nC:\\Users\\alros\\AppData\\Local\\Temp\\vscode-debugadapter-4.json\n"}}},"level":0}
{"tag":"dap.send","timestamp":1591366471658,"metadata":{"connectionId":3,"message":{"seq":6,"type":"request","command":"launchVSCode","arguments":{"args":[{"prefix":"--debugId=f7ccef70-30ba-4c3d-9d7f-dc013cd4cee2"},{"prefix":"--inspect-extensions=9797"},{"prefix":"--extensionDevelopmentPath=","path":"C:\\Users\\alros\\repos\\Microsoft\\vscode-pull-request-github2"},{"prefix":"--disable-extension=GitHub.vscode-pull-request-github-insiders"}],"env":{}}}},"level":0}
{"tag":"dap.receive","timestamp":1591366471663,"metadata":{"connectionId":3,"message":{"command":"setBreakpoints","arguments":{"source":{"name":"issueFeatureRegistrar.ts","path":"c:\\Users\\alros\\repos\\Microsoft\\vscode-pull-request-github2\\src\\issues\\issueFeatureRegistrar.ts"},"lines":[41],"breakpoints":[{"line":41}],"sourceModified":false},"type":"request","seq":3}},"level":0}
{"tag":"dap.send","timestamp":1591366471663,"metadata":{"connectionId":3,"message":{"seq":7,"type":"response","request_seq":3,"command":"setBreakpoints","success":true,"body":{"breakpoints":[{"id":1,"verified":false,"message":"Unbound breakpoint"}]}}},"level":0}
{"tag":"dap.receive","timestamp":1591366471683,"metadata":{"connectionId":3,"message":{"command":"setExceptionBreakpoints","arguments":{"filters":[]},"type":"request","seq":4}},"level":0}
{"tag":"dap.send","timestamp":1591366471683,"metadata":{"connectionId":3,"message":{"seq":8,"type":"response","request_seq":4,"command":"setExceptionBreakpoints","success":true,"body":{}}},"level":0}
{"tag":"dap.receive","timestamp":1591366471692,"metadata":{"connectionId":3,"message":{"command":"configurationDone","type":"request","seq":5}},"level":0}
{"tag":"dap.send","timestamp":1591366471692,"metadata":{"connectionId":3,"message":{"seq":9,"type":"response","request_seq":5,"command":"configurationDone","success":true,"body":{}}},"level":0}
{"tag":"dap.receive","timestamp":1591366471701,"metadata":{"connectionId":3,"message":{"command":"threads","type":"request","seq":6}},"level":0}
{"tag":"dap.send","timestamp":1591366471704,"metadata":{"connectionId":3,"message":{"seq":10,"type":"response","request_seq":6,"command":"threads","success":true,"body":{"threads":[]}}},"level":0}
{"tag":"dap.receive","timestamp":1591366471855,"metadata":{"connectionId":3,"message":{"type":"response","seq":7,"command":"launchVSCode","request_seq":6,"success":true,"body":{}}},"level":0}
{"tag":"runtime.launch","timestamp":1591366471856,"message":"Launched successfully","metadata":{"name":"u"},"level":1}
{"tag":"dap.send","timestamp":1591366471856,"metadata":{"connectionId":3,"message":{"seq":11,"type":"response","request_seq":2,"command":"launch","success":true,"body":{}}},"level":0}
{"tag":"dap.receive","timestamp":1591366471990,"metadata":{"connectionId":3,"message":{"command":"loadedSources","type":"request","seq":8}},"level":0}
{"tag":"dap.send","timestamp":1591366471991,"metadata":{"connectionId":3,"message":{"seq":12,"type":"response","request_seq":8,"command":"loadedSources","success":true,"body":{"sources":[]}}},"level":0}
{"tag":"dap.receive","timestamp":1591366472037,"metadata":{"connectionId":3,"message":{"command":"breakpointLocations","arguments":{"source":{"name":"issueFeatureRegistrar.ts","path":"c:\\Users\\alros\\repos\\Microsoft\\vscode-pull-request-github2\\src\\issues\\issueFeatureRegistrar.ts"},"line":41},"type":"request","seq":9}},"level":0}
{"tag":"dap.send","timestamp":1591366472037,"metadata":{"connectionId":3,"message":{"seq":13,"type":"response","request_seq":9,"command":"breakpointLocations","success":true,"body":{"breakpoints":[]}}},"level":0}
{"tag":"dap.send","timestamp":1591366476629,"metadata":{"connectionId":3,"message":{"seq":14,"type":"event","event":"output","body":{"category":"telemetry","output":"js-debug/dap/operation","data":{"errors":[],"initialize":{"operation":"initialize","totalTime":1.4,"max":1.4,"avg":1.4,"stddev":null,"count":1,"failed":0},"!initialize.errors":[],"setBreakpoints":{"operation":"setBreakpoints","totalTime":0.6,"max":0.6,"avg":0.6,"stddev":null,"count":1,"failed":0},"!setBreakpoints.errors":[],"setExceptionBreakpoints":{"operation":"setExceptionBreakpoints","totalTime":0.5,"max":0.5,"avg":0.5,"stddev":null,"count":1,"failed":0},"!setExceptionBreakpoints.errors":[],"configurationDone":{"operation":"configurationDone","totalTime":0.4,"max":0.4,"avg":0.4,"stddev":null,"count":1,"failed":0},"!configurationDone.errors":[],"threads":{"operation":"threads","totalTime":3.9,"max":3.9,"avg":3.9,"stddev":null,"count":1,"failed":0},"!threads.errors":[],"launch":{"operation":"launch","totalTime":224.5,"max":224.5,"avg":224.5,"stddev":null,"count":1,"failed":0},"!launch.errors":[],"loadedSources":{"operation":"loadedSources","totalTime":0.5,"max":0.5,"avg":0.5,"stddev":null,"count":1,"failed":0},"!loadedSources.errors":[],"breakpointLocations":{"operation":"breakpointLocations","totalTime":0.7,"max":0.7,"avg":0.7,"stddev":null,"count":1,"failed":0},"!breakpointLocations.errors":[]}}}},"level":0}
{"tag":"dap.receive","timestamp":1591366477504,"metadata":{"connectionId":3,"message":{"command":"disconnect","arguments":{"restart":false},"type":"request","seq":10}},"level":0}

Note: Using the "preview" debug extension Verbose logs are written to: C:\Users\alros\AppData\Local\Temp\vscode-debugadapter-5.json vscode-debugadapter-5.txt

[connor4312]

Ah. It looks like this doesn't work if you use the redirection from the existing Chrome/Node configurations -- you have to launch with the pwa-* debug type.

I'm not sure I want to fix that -- it adds some extra duplication and dependency to the standalone debug server, and I think that if people are tinkering with their js-debug options they would be satisfied prefixing their launch config until such time as js-debug becomes default.

[andrewbranch]

@connor4312 is there going to be an obvious migration path for people who have existing "node" launch configurations? Without your comment here, I would have never figured out that I needed to update mine. I assumed the auto-expand getters option was just broken.

[connor4312]

@andrewbranch we intend js-debug to be the default in the upcoming release, no action will be needed at that point.

[andrewbranch]

I’m already using VS Code Insiders, so my understanding was I’m already using the new debugger, and yet my preferences weren’t being used until changing the launch config type. But I could be misunderstanding something. What is pwa-node? Is it something that will be phased out after the next release? (Practically speaking, is this PR misinformed?)

[connor4312]

We fleshed this out some more today, details in https://github.com/microsoft/vscode-js-debug/issues/548. You will still need pwa-node through the upcoming June release. After that point, the previous debug adapters will be removed and you'll no longer need to use pwa-node.

We will probably keep the pwa- prefixed-configs around for at least one release to allow for migrations.

[andrewbranch]

@connor4312 this setting seems to have disappeared from VS Code Insiders and getters stopped expanding.

[connor4312]

I created an issue to reintroduce such a setting