[Feature]: Traces UI ability to show APIs details within viewport

[a8trejo]

🚀 Feature Request

Add "Show in viewport" button in traces API actions that prints the requests and responses details (headers, body, query params, etc) within the traces viewport for easier readability and debugging.

Have a global toggle that automatically shows all API actions within the traces viewport.

Similar to what happens with https://github.com/filiphric/cypress-plugin-api but performed by the trace viewer.

Will submit a PR soon with a proposal

Example

Any trace that includes API requests as part of the test actions will allow its debugger to have an easier view of the API details (full URL, request headers, request body, response header, response body, response status, duration, etc) in panels within the traces viewport.

Will submit a PR soon with a proposal

Motivation

For API automation suites or E2E suites using APIs as preconditions in before/after hooks it is useful to have the option to print the APIs details within the viewport for easier readability and debugging.

[yury-s]

/cc @cpAdm, sounds similar to the improvements that you did recently.

[yury-s]

Discussed this request with the team, we can try to make the browser panel collapsable and have drawer to become the central panel in that case. For API testing scenarios that would give more screen estate to the network panel as you want.

[cpAdm]

Discussed this request with the team, we can try to make the browser panel collapsable and have drawer to become the central panel in that case. For API testing scenarios that would give more screen estate to the network panel as you want.

Reminds me of the experiment done by @Skn0tt in #34933