Web Inspector: The "Network" tab doesn't show the bodies of AJAX requests sent with a Blob

• Component: Web Inspector
• Status: NEW ---

The "Network" tab of the Safari's Web Inspector doesn't show the bodies of AJAX requests sent with a Blob. It makes it harder to use Safari for a website development, because it's impossible to see request bodies.

To reproduce, open any website in Safari and run these commands in the browser console:

    fetch('/test', {method: 'post', body: new Blob(['{"foo":"bar"}'], {type: 'application/json'})});
    var req = new XMLHttpRequest(); req.open('post', '/test', true); req.send(new Blob(['{"foo":"bar"}'], {type: 'application/json'}));

Then open the "Network" tab, open a request produced by these commands and try to find the request body. The request body is not shown. I expect to see the request body at the very bottom of the "Headers" section and in the "Preview" section (after selecting "Request" in the top right corner).

The following commands produce absolutely the same requests, but their bodies are visible in the Web Inspector:

    fetch('/test', {method: 'post', headers: {'Content-Type': 'application/json'}, body: '{"foo":"bar"}'});
    fetch('/test', {method: 'post', headers: {'Content-Type': 'application/json'}, body: new TextEncoder().encode('{"foo":"bar"}')});
    var req = new XMLHttpRequest(); req.open('post', '/test', true); req.setRequestHeader('Content-Type', 'application/json'); req.send('{"foo":"bar"}');
    var req = new XMLHttpRequest(); req.open('post', '/test', true); req.setRequestHeader('Content-Type', 'application/json'); req.send(new TextEncoder().encode('{"foo":"bar"}'));

Web Inspector shows bodies sent with Uint8Array, so I suppose it's possible to display Blob requests too.

I can reproduce it in macOS Safari 15.0, macOS Safari TP 15.4, iOS Safari 13.1.2 and iOS Safari 15.1. I didn't check in other conditions.

[Radar WebKit Bug Importer]

<rdar://problem/84585984>