How to inspect FormData?

Depth of inspection

Having a quick overview is great and swift, but let's go deeper to fully understand how to inspect FormData.

Advanced inspection techniques

Unfolding the 'console.table'

Do you like displaying data in a tidy and organized way? Meet console.table():

// Revealing your FormData's inner secrets... Now on HBO.
console.table([...formData.entries()]);


Raw appetizer: Previewing FormData with Response.text()

Want to see the raw appearance of your FormData when sent to a server? Call Response API to jump directly into action:

// Like looking into a mirror... A very technical mirror!
new Response(formData).text().then(console.log);


Looking into AJAX request

When sending the FormData through XMLHttpRequest or Fetch, you can inspect it in the network tab of your developer tools:

const xhr = new XMLHttpRequest();
xhr.open("POST", "/submit-form");
xhr.send(formData);
// Grab your spy glasses. Let's play detective in 'Network' tab!


Getting around pitfalls

Working with file-based FormData

In case you're juggling with files, they might play hide-and-seek during inspection. Use this trick to see them:

formData.append("file", fileInput.files[0]);
[...formData].forEach(([key, value]) => {
  console.log(key, value instanceof Blob ? value.name : value);
  // Found you! Nowhere to hide, dear Blob.
});


Compatibility: A wrinkle in FormData

Before implementing any methods, do a quick check on browser compatibility. Internet Explorer is like your old uncle who resists modern trends.

Pacing with complexity

For more complex data structures, consider converting your FormData into a JSON, like performing an API food makeover:

const jsonFormData = JSON.stringify(Object.fromEntries(formData));


Zooming to edge cases

Dealing with duplicate keys

Encountering multiple values for a single key in FormData? getAll(key) method is your friend then.

Cross platform collaboration

Online platforms like Stackblitz or CodePen can glue together your debugging sessions with real-time sharing and interactive inspection!

Typing with TypeScript

Working with TypeScript? Ensure your static type checking is in order before adding FormData into the game.

Debugging like a pro

Console.log reimagined

If you crave for a flexible debugging experience, console.log.apply allows you to log the entries in a fancy manner:

console.log.apply(console, [...formData.entries()]);
// Waiting for a one liner? BAM!


Unchaining with ES6

Use modern ES6 features like the spread operator and arrow functions for a functionally-rich and concise data manipulation.

Useful Resources

1. FormData - Web APIs | MDN
2. Using FormData Objects - Web APIs | MDN
3. FormData: append() method - Web APIs | MDN
4. Fetch - JavaScript Info
5. How to convert FormData (HTML5 object) to JSON - Stack Overflow
6. Promise-based HTTP client for the browser and node.js - Axios