Chrome에서 HTTP POST를 어떻게 디버깅 할 수 있습니까?

Chrome에서 전송 된 HTTP POST 데이터를보고 싶습니다.

데이터가 메모리에 있으며 양식을 다시 제출할 수 있습니다.

다시 제출하면 서버에서 오류가 발생한다는 것을 알고 있습니다. 어쨌든 Chrome의 메모리에있는 데이터를 볼 수 있습니까?

1. Chrome 개발자 도구 (Chrome 메뉴-> 추가 도구-> 개발자 도구)로 이동
2. "네트워크"탭을 선택하십시오
3. 현재 페이지를 새로 고침
4. 네트워크 콘솔이 켜져있는 동안 발생한 http 쿼리 목록이 표시됩니다. 왼쪽에서 그중 하나를 선택하십시오
5. "헤더"탭을 선택하십시오

짜잔!

Chrome DevTools를 사용하여 HTTP POST 요청을 필터링 할 수 있습니다 . 다음을 수행하십시오.

1. 열기 크롬 DevTools로 ( Cmd+ Opt+ IMac에서, Ctrl+ Shift+ I또는 F12Windows의 경우) 및 "네트워크"탭을 클릭
2. "필터"아이콘을 클릭하십시오
3. 필터 방법을 입력하십시오 : method:POST
4. 디버깅하려는 요청을 선택하십시오.
5. 디버깅하려는 요청의 세부 사항보기

스크린 샷

Chrome 버전 53으로 테스트되었습니다.

Chrome의 Canary 버전을 사용 하여 POST 요청의 요청 페이로드를 볼 수 있습니다 .

유용 할 수있는 또 다른 옵션은 전용 HTTP 디버깅 도구입니다. HTTP Toolkit을 제안하는 것이 몇 가지 있습니다 .이 같은 문제를 스스로 해결하기 위해 노력하고있는 오픈 소스 프로젝트 (예, 편향 될 수 있습니다).

가장 큰 차이점은 유용성과 힘입니다. Chrome 개발 도구는 간단한 작업에 유용하지만 여기에서 시작하는 것이 좋습니다.하지만 정보를 이해하는 데 어려움을 겪고 있고 더 많은 설명이나 더 강력한 기능이 필요한 경우 적절한 도구가 유용 할 수 있습니다!

이 경우, 친숙한 편집기와 강조 표시 (모두 VS 코드 제공 ) 와 함께 찾고있는 전체 POST 본문을 보여 주므로 둘러 볼 수 있습니다. 물론 요청 및 응답 헤더를 제공하지만 볼 수있는 모든 표준 헤더 및 상태 코드에 대해 MDN ( Mozilla Developer Network ) 의 문서와 같은 추가 정보 가 있습니다.

그림은 수천 개의 StackOverflow 답변 가치가 있습니다.

다른 사람들은 매우 좋은 답변을했지만 추가 개발 도구를 사용하여 작업을 완료하고 싶습니다. Live HTTP Headers 라고 하며 Firefox에 설치할 수 있으며 Chrome 에는 이와 같은 플러그인 이 있습니다.

그것으로 작업하는 것은 쉽지 않습니다.

1. Firefox를 사용하여 게시 요청을 받으려는 웹 사이트로 이동하십시오.

2. Firefox 메뉴에서 Tools-> Live Http Headers

3. 새 창이 팝업되고 모든 http 메소드 세부 사항이이 창에 저장됩니다. 이 단계에서는 아무 것도 수행 할 필요가 없습니다.

4. 웹 사이트에서 활동을하십시오 (로그인, 양식 제출 등).

5. 플러그인 창을보십시오. 모두 기록됩니다.

그냥 당신이 할 필요가 기억 확인 캡처 .

까다로운 상황이 있습니다. 게시 양식을 제출하면 Chrome에서 새 탭을 열어 요청을 보냅니다. 지금까지는 유효하지만 파일 다운로드 이벤트가 트리거 되면이 탭이 즉시 닫히므로 개발자 도구에서이 요청을 캡처 할 수 없습니다.

솔루션 : 게시물 양식을 제출하기 전에 네트워크 를 끊어야합니다. 그러면 탭이 닫히지 않도록 요청을 보낼 수 없습니다. 그런 다음 Chrome Devtool에서 요청 메시지를 캡처 할 수 있습니다 (필요한 경우 새 탭 새로 고침)