chrome devtool how to inspect form data submitted by form.submit()

Question

xhr content-type form-data I can inspect the form-data content submitted by xhr on chrome devtool as the above pic shows

form.submit() form-data However, I see an old library using the default form.submit() method to upload an image. From the request headers, it shows "Content-Type: multipart/form-data; boundary=----...". But the request body (Form Data section) does not even appear on the devtool.

I rarely use the default submit method. Is it the default behaviour on chrome? If so, why is it? And is there any workaround? As I want to see the Content-Disposition.

---

Edit:

Tried "preserve log" option, but no luck. Seems like a bug on chrome, as I can see the request payload on Edge and Firefox.

Answer 1

Have you tried to check the preserve log option in Chrome dev tool see this picture:

https://ibb.co/cxNRCDD

When you send the form and the browser is refreshing the chrome dev tool lose the date, so if that is the case you just need to check "preserve log" option

Answer 2

You can use submit event to output data.

const form = document.querySelector('#formId');
form.addEventListener('submit', console.log);

That should work fine if your form uses preventDefault();