크롬 브라우저에서 XHR 디버깅

크롬 브라우저에서 XHR 디버깅

크롬으로 게시물 내용을 보는 방법은?

개발자 도구를 시작합니다(Shift+Ctrl+J를 클릭합니다.Enable Resource Tracking페이지가 새로 고쳐집니다.Resources(리소스) 버튼을 클릭하면 XHR이 노란색으로 표시됩니다.게시 내용을 보려면 리소스를 클릭하십시오.POST 내용이 요청 헤더에 있습니다.탭 아래의 막대에 있는 XHR 버튼을 사용하여 XHR만 필터링할 수도 있습니다.

이게 도움이 되길 바랍니다.
d34dh0r53

Windows, Chrome 12에서는 콘솔 창 어딘가를 마우스 오른쪽 버튼으로 클릭하고 XMLHttpRequest logging을 선택하여 활성화해야 했습니다.

2015년 업데이트

Chrome 버전 43 지금 다음으로 이동합니다.Settings > General > Console"Log XMLHttpRequests" 옵션을 선택합니다.

업데이트: XHR Object를 보고 싶었지만, 로깅에도 불구하고 여전히 볼 수 없는 것 같습니다.

Javascript 콘솔 창에서 "Log XMLHttpRequests" 옵션을 마우스 오른쪽 단추로 클릭하고 선택합니다.그런 다음 개발자 도구 섹션에서 네트워크 탭을 선택합니다.

Ajax 요청을 실행하면 네트워크 탭에 새 항목이 나타납니다(때로는 지연됨).해당 항목을 클릭하여 검사한 후 "헤더"를 선택합니다.

방금 보낸 게시물 데이터가 표시됩니다.

2020년 업데이트

현재 버전의 Chrome(Google Chrome 81.0.4044.138)에서는 다음과 같이 간단히 수행할 수 있습니다.

• 개발자 도구 열기
• 콘솔로 이동합니다.
• 콘솔 설정을 클릭합니다(오른쪽 상단 모서리 근처의 스프로킷 위젯으로 표시됨).
• 'Log XMLHttpRequests' 설정 전환

한 가지 옵션은 다음과 같은 일반 패킷 스니퍼를 사용하는 것입니다. 와이어샤크 Chrome은 이제 XHR을 직접 스니핑하는 기능을 지원하는 것 같습니다. 아래를 참조하십시오.

2015년 업데이트

최신 크롬은 타임라인에서 요청(작은 파란색 점으로 표시됨)을 선택하도록 합니다.슬라이더 후크를 사용하여 브라우저에 페이지가 로드된 후 요청을 보낸 시간으로 확대합니다.타임라인 아래에 있는 창에 요청이 표시됩니다(이 경우에는 숨겨졌고 개발 콘솔을 페이지 영역으로 훨씬 더 깊이 끌어와야 했습니다).구글이 이것을 추가한 것은 당신이 시간에 걸쳐 이벤트를 더 잘 추적할 수 있도록 하기 위해서라고 생각합니다.

언급URL : https://stackoverflow.com/questions/1535462/debug-xhr-in-chrome-browser