Comment puis-je déboguer et inspecter efficacement le contenu d'un objet FormData ?

Débogage de FormData : dévoiler la structure interne

Lorsque vous traitez des objets FormData, inspecter leur contenu peut être un défi. La journalisation de la console et le bouclage des clés d'objet à l'aide de for s'avèrent inefficaces. Cependant, les progrès récents dans la prise en charge des navigateurs ont ouvert de nouvelles voies pour examiner FormData.

Solution mise à jour : tirer parti de FormData.entries()

Depuis mars 2016, Chrome et Firefox introduit la méthode FormData.entries(), qui permet une itération simple :

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

for (const [key, value] of formData.entries()) {
    console.log(key, value);
}

Plus ancien Approche : Utiliser un dictionnaire

En l'absence de FormData.entries(), une approche alternative consiste à créer un dictionnaire régulier et à le convertir en FormData :

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

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

Débogage avec Network Request

Pour déboguer un objet FormData simple, pensez à l'envoyer via un AJAX request :

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

En examinant la requête réseau dans la console du navigateur, vous pouvez obtenir un aperçu du contenu de FormData.

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!