How can I see post body data in chrome dev tools? - php

Question

I have this fetch api in React that is sending data to the server. The server runs PHP and I'm having trouble accessing the data with $_POST or with file_get_contents('php://input');
So I want to check every step of the process until I can see where the error is. I also want to verify how the post data is being sent. ie I want to see the actual data and the full request from the browser.
Fetch request looks like this:
export function sendEmail (data) {
return fetch('http://example.com/email.php', {
method: 'POST',
credentials: 'same-origin',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(response => response.json())
}
When I go into google chrome's dev tools I see the request headers, response, etc but nowhere can I see the actual data being sent. I've looked around online and no one can seem to give a clear answer.

Answer 1

In your dev tools, click Network tab, then do the request and click on it. Scroll to the Request body section.
Network tab

Answer 2

Fiddler might be helpful in this scenario. It will show you the post body sent to your PHP endpoint.

Answer 3

I recommend you axios, easier to check if success or error and cleaner:
Post without any body sent;
import axios from 'axios';
axios.post('http://example.com/email.php')
.then(response=>response.data)
.then(response=>console.log('Success:', response))
.catch(err=>console.log('Error: ',err))
With some arguments:
axios.post('http://example.com/email.php',
{
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(response=>response.data)
.then(response=>console.log('Success:', response))
.catch(err=>console.log('Error: ',err)