Node: [Feature request] Add node-report to cdp and add Visual Panel like React or Vue

[gengjiawen]

I found node-report is very usefully (tbh I am a little surprised that Node.js has this level of clarity, really amazing job 👍 ), in some cases more usefully than profiler :)
I would like two thing:

• Introduce it to CDP panel
  kind of like this (pic from https://github.com/vuejs/vue-devtools), but for node-report

• Add it to CDP protocal
  kind of like https://chromedevtools.github.io/devtools-protocol/tot/SystemInfo, but we add it only in Node domain https://chromedevtools.github.io/devtools-protocol/v8.

cc @nodejs/inspector @nodejs/report @richardlau
(Not sure I ping the group right, I don't know the Node.js group category )

[richardlau]

cc @nodejs/diagnostics

[gireeshpunathil]

• adding report to the CDP panel of Vuejs: makes perfect sense, as one could generate an in-memory report upon user selection, and then render the relevant sections in the view.
• adding report to the CDP protocol: Not very much sure about how does it work / help. Can you please elaborate a little on that?

Also in both cases, where does the feature be developed? in core, or in chrome? can the report.getReport() api can be consumed as is by the panel / protocol implementors?

[gireeshpunathil]

node-report largely is used to refer the original npm module https://www.npmjs.com/package/node-report and diagnostic-report or simply report is used to refer to the one that is available in core. It may be great if you change the title to reflect the right report meant in this case.

[gengjiawen]

adding report to the CDP panel of Vuejs

Nope, my thought is a new panel, like opened in chrome://inspect. May need to change chrome front-end code https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/node_main/NodeConnectionsPanel.js.

node-report largely is used to refer the original npm module npmjs.com/package/node-report.

Hopefully work on Node.js with node-report installed too.

[hashseed]

TBH I don't know how much value it is to show the JSON data that node-report or diagnostic-report provides in a DevTools panel, visually..

[gengjiawen]

TBH I don't know how much value it is to show the JSON data that node-report or diagnostic-report provides in a DevTools panel, visually..

Kind of like DOM in front end (Elements Panel in Devtools).

[june07]

@gengjiawen Will likely drop in the next version of NiM(see screenshot from the DevTools Panel)...

Will have the ability to save reports and quickly access reports from multiple node instances.

Stay tuned.

[june07]

Took over a week to get the update pushed thru the Chrome Web Store but it is done. https://blog.brakecode.com/nodejs-diagnostic-reports/