FormData オブジェクトの内容を効果的にデバッグおよび検査するにはどうすればよいですか?

FormData のデバッグ: 内部構造を明らかにする

FormData オブジェクトを扱う場合、その内容を検査するのが難しい場合があります。 for を使用したコンソールのロギングとオブジェクト キーのループは、効果がないことがわかります。ただし、ブラウザ サポートの最近の進歩により、FormData を調べるための新しい道が開かれました。

更新されたソリューション: FormData.entries() の活用

2016 年 3 月現在、Chrome と Firefox FormData.entries() メソッドを導入しました。これにより、簡単な操作が可能になります。 iteration:

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

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

古いアプローチ: 辞書の利用

FormData.entries() がない場合の代替アプローチには、通常の辞書の作成と変換が含まれます。 FormData へ:

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

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

ネットワークを使用したデバッグリクエスト

プレーンな FormData オブジェクトをデバッグするには、AJAX リクエスト経由で送信することを検討してください。

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

ブラウザのコンソールでネットワーク リクエストを調べることで、 FormData のコンテンツ。

以上がFormData オブジェクトの内容を効果的にデバッグおよび検査するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。