Comment puis-je inspecter et déboguer efficacement les objets FormData en JavaScript ?

Examen de FormData : un guide complet

Malgré les difficultés rencontrées avec des méthodes telles que console.log et les boucles for-in, il existe plusieurs approches efficaces pour inspecter FormData.

FormData dans les versions récentes

Heureusement, les versions modernes de Chrome et Firefox prennent désormais en charge FormData.entries() pour inspecter FormData. Voici comment l'utiliser :

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

Alternatives pour les navigateurs plus anciens

Pour les navigateurs plus anciens, il existe deux options :

1. Construire un dictionnaire régulier :

Vous pouvez créer un dictionnaire régulier, puis le convertir en FormData :

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    fd.append(key, myFormData[key]);
}

2. Inspection des requêtes réseau :

Pour déboguer un objet FormData, vous pouvez l'envoyer dans une requête réseau et l'examiner à l'aide de la console de requête du navigateur :

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);

Limitations de FormData

Il est important de noter que même si FormData est utile pour soumettre des formulaires via des requêtes AJAX, il a limitations :

• Il ne peut pas récupérer directement les clés définies.
• Itérer sur l'objet FormData à l'aide de boucles for-in ou de console.log affiche uniquement le nombre de propriétés, pas les clés elles-mêmes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!