Human Readable AJAX Requests

As a JavaScript developer, you must have seen code like this before:

fetch('/users.json', {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'Hubot',
      login: 'hubot',
    }),
  })
  .then(response => response.json())
  .then(json => console.log('parsed json', json))
  .catch(ex => console.log('parsing failed', ex))

Anyone who claims to be a web developer knows that fetch is the new standard for making http requests from JS. Last week, I came up with an idea to wrap this api in something that is easily readable and sharable. What if we could turn the code above into text form?

If you inspect any page in Chrome, you can switch to the network tab and view the request headers, url, etc. This is shown under the general tab:

Request URL:http://test.app/settings/user/19
Request Method:PATCH
Status Code:200 OK
Remote Address:192.168.10.10:80

If you scroll down, there's a request payload section showing the body of the…