Expose (some) CDP commands

I’d love to play around with the Page.captureScreenshot request for an experimental VS Code extension. It would be awesome if the VS Code Debug Adapter would expose some request that would allow to call these CDB requests through debugSession.customRequest.

Advantages

1. This would allow for some cool (experimental) VS Code extensions. The captureScreenshot request could be used to show a screenshot of variables that point to an HTML element. I guess there are also some other cool methods exposed by chrome that could further push the debugging experience.

Risks

1. User experience could be degraded if such extensions bring the debug adapter in an inconsistent state by calling some CDP requests they are not supposed to call.

I guess to mitigate 1), the exposed CDP requests could be allow-listed (e.g. only when using the non-insiders build to enable exploring ideas). Page.captureScreenshot should be pretty risk free.

What do you think?

[connor4312]

whereas I would like to proxy “everything” to my own adapter

I would prefer a design where you don’t actually proxy ‘everything’. For example, you may not care about scriptParsed events for your use case and only request/response pairs and output events. CDP is chatty and latency is important, I don’t want to add extra work unnecessarily.

[hediet]

~Sorry for the delay. I had a look today, but I was not able to debug the debug-adapter. I opened the debug-adapter in the latest vscode insider build, ran npm run watch and launched the “Extension” launch config. The entry point of the extension called. However, my breakpoints in the constructor of the DebugAdapter are not hit.~

~I also get this error in the Extension Development Host:~

~I guess its a trivial mistake, but I’m stuck.~

I didn’t figure out that I had to uninstall the bundled JavaScript Debugger Extension. I didn’t even know this is possible… My breakpoints are being hit now 😉

It works nicely:

I’ll try to prepare a PR soon that exposes this cdp method. I think a hover provider can be implemented that shows a screenshot of HTML elements when hovering on an HtmlElement while debugging the code.