Chrome에서 HTTP POST를 어떻게 디버깅 할 수 있습니까?
Chrome에서 전송 된 HTTP POST 데이터를보고 싶습니다.
데이터가 메모리에 있으며 양식을 다시 제출할 수 있습니다.
다시 제출하면 서버에서 오류가 발생한다는 것을 알고 있습니다. 어쨌든 Chrome의 메모리에있는 데이터를 볼 수 있습니까?
- Chrome 개발자 도구 (Chrome 메뉴-> 추가 도구-> 개발자 도구)로 이동
- "네트워크"탭을 선택하십시오
- 현재 페이지를 새로 고침
- 네트워크 콘솔이 켜져있는 동안 발생한 http 쿼리 목록이 표시됩니다. 왼쪽에서 그중 하나를 선택하십시오
- "헤더"탭을 선택하십시오
짜잔!
Chrome DevTools를 사용하여 HTTP POST 요청을 필터링 할 수 있습니다 . 다음을 수행하십시오.
- 열기 크롬 DevTools로 ( Cmd+ Opt+ IMac에서, Ctrl+ Shift+ I또는 F12Windows의 경우) 및 "네트워크"탭을 클릭
- "필터"아이콘을 클릭하십시오
- 필터 방법을 입력하십시오 :
method:POST - 디버깅하려는 요청을 선택하십시오.
- 디버깅하려는 요청의 세부 사항보기
스크린 샷
Chrome 버전 53으로 테스트되었습니다.
Chrome의 Canary 버전을 사용 하여 POST 요청의 요청 페이로드를 볼 수 있습니다 .
유용 할 수있는 또 다른 옵션은 전용 HTTP 디버깅 도구입니다. HTTP Toolkit을 제안하는 것이 몇 가지 있습니다 .이 같은 문제를 스스로 해결하기 위해 노력하고있는 오픈 소스 프로젝트 (예, 편향 될 수 있습니다).
The main difference is usability & power. The Chrome dev tools are good for simple things, and I'd recommend starting there, but if you're struggling to understand the information there, and you need either more explanation or more power then proper focused tools can be useful!
For this case, it'll show you the full POST body you're looking for, with a friendly editor and highlighting (all powered by VS Code) so you can dig around. It'll give you the request & response headers of course, but with extra info like docs from MDN (the Mozilla Developer Network) for every standard header and status code you can see.
A picture is worth a thousand StackOverflow answers:
The other people made very nice answers, but I would like to complete their work with an extra development tool. It is called Live HTTP Headers and you can install it into your Firefox, and in Chrome we have the same plug in like this.
Working with it is queit easy.
Using your Firefox, navigate to the website which you want to get your post request to it.
In your Firefox menu Tools->Live Http Headers
A new window pop ups for you, and all the http method details would be saved in this window for you. You don't need to do anything in this step.
In the website, do an activity(log in, submit a form, etc.)
Look at your plug in window. It is all recorded.
그냥 당신이 할 필요가 기억 확인 캡처 .
까다로운 상황에 해당합니다. 게시물 양식을 제출하면 Chrome에서 새 탭을 열어 요청을 보냅니다. 지금까지는 맞지만 파일 다운로드 이벤트가 트리거되면이 탭이 즉시 닫히므로 개발자 도구에서이 요청을 캡처 할 수 없습니다.
솔루션 : 게시물 양식을 제출하기 전에 네트워크를 잘라 내면 요청이 성공적으로 전송되지 않아 탭이 닫히지 않습니다. 그런 다음 chrome dev 도구에서 요청 메시지를 얻을 수 있습니다 (필요한 경우 새 탭 새로 고침)
참고 URL : https://stackoverflow.com/questions/15603561/how-can-i-debug-a-http-post-in-chrome
'IT story' 카테고리의 다른 글
| 업로드하기 전에 HTML5 사전 크기 조정 이미지 (0) | 2020.05.24 |
|---|---|
| 브라우저를 다시로드 할 때 Angular 2.0 라우터가 작동하지 않습니다 (0) | 2020.05.24 |
| Docker Postgres 스크립트에서 사용자 / 데이터베이스를 만드는 방법 (0) | 2020.05.24 |
| PDO에서 영구 연결을 사용할 때의 단점은 무엇입니까 (0) | 2020.05.24 |
| `on`과`live` 또는`bind`의 차이점은 무엇입니까? (0) | 2020.05.24 |