Deeper integration with Chrome DevTools

[lucacasonato]

Deno already has great support for inspection of APIs via DevTools: we support the panels for CPU profiling, memory analysis, console, and source browsing. Chrome DevTools has a lot more to offer though: the network panel, the applications panel for browsing through local storage, or the performance panel.

It would be awesome to integrate support for these. For example it should be possible to view outbound fetch and WebSocket connections in the Network panel. Our local storage APIs could be hooked up to the application panel, and the user timing measurements from the performance global could be wired into the Performance tab.

An initial prototype for network panel integration is in progress in denoland/deno#11660. It is already working quite well:

deno_chrome_devtools_network_panel.mov

Next to the implementation of the "backend" APIs, we should investigate a custom build of DevTools in chrome://inspect (or at https://devtools.deno.land) like Node has. It would show these extra panels that Node does not support, without showing things like the Elements panel.

[caspervonb]

Very certified freaking awesome!

Next to the implementation of the "backend" APIs, we should investigate a custom build of DevTools in chrome://inspect (or at https://devtools.deno.land)

Think it's preferable to upstream this, have Chrome Tools itself look at at the protocol endpoint and filter the panels based on capabilities.

That way it'd work with the standalone inspector app as-well and be future proof (we roll out a new feature, auto enabled UI).