FormData 개체의 내용을 효과적으로 디버깅하고 검사하려면 어떻게 해야 합니까?

FormData 디버깅: 내부 구조 공개

FormData 개체를 다룰 때 해당 내용을 검사하는 것이 어려울 수 있습니다. for in을 사용하여 개체 키를 통한 콘솔 로깅 및 반복은 효과적이지 않은 것으로 입증되었습니다. 그러나 최근 브라우저 지원이 향상되면서 FormData를 검사할 수 있는 새로운 길이 열렸습니다.

업데이트된 솔루션: FormData.entries() 활용

2016년 3월 현재 Chrome 및 Firefox는 간단한 작업을 허용하는 FormData.entries() 메서드를 도입했습니다. 반복:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!