Chrome에서 요청 모니터링

208

Firefox에서는 Firebug를 사용하여 아약스 호출이하는 모든 http 요청을 볼 수 있습니다. 개발을 Chrome으로 전환했으며 지금까지 좋아했습니다. 그러나 내 유일한 불만은 개발자 도구가 각 아약스 요청을 볼 수 없다는 것입니다. 리소스 패널에서 동일한 리소스에 대한 여러 요청을 표시 한 경우 한 번만 발생했지만 한 번만 수행하고 다시는 수행하지 않습니다.

Chrome에서 페이지가 자바 스크립트를 통해 수행하는 모든 http 요청을 안정적으로 볼 수있는 방법이 있습니까?

[편집 : 11/30/09 11:55]

현재이 문제를 해결하기 위해 Chrome 옆에 Fiddler를 실행하여 요청을 볼 수 있지만 브라우저 내에서 요청을 수행하는 방법이 있다면 선호합니다.

ajax google-chrome httprequest

— 웨스 피
소스

2

나는 같은 문제가있다-여기에 모든 해결책을 시도했다. 개발 도구에서 XHR 창의 응답 부분에 아무것도 나타나지 않습니다. "이 요청에는 사용 가능한 응답 데이터가 없습니다"라는 메시지 만 표시됩니다. Firebug를 사용하여 동일한 코드를 실행하면 정상적으로 나타납니다. 코그 개발 도구 설정에서 "Log XMLHttpRequest"를 체크하려고 시도했지만 도움이되지 않았습니다 (응답 유형은 응용 프로그램 / json입니다). 방화범에서 모든 디버깅을해야합니다. Firebug는 JSON을 멋지게 형식화합니다. 크롬 개발 도구는 응답을 표시 할 수 있다면 (예 : 아약스를 사용하지 않음) 않습니다.

— John Little

359

나는 이것이 오래된 실이라는 것을 알고 있지만 나는 차임 할 것이라고 생각했다.

Chrome에는 현재 솔루션이 내장되어 있습니다.

사용 CTRL+SHIFT+I(또는 탐색 Current Page Control > Developer > Developer Tools. 크롬의 최신 버전으로, 렌치 아이콘> 도구> 개발자 도구를 클릭하십시오.) 개발자 도구를 활성화합니다.
개발자 도구 내에서 Network버튼을 클릭하십시오 . 아직 세션이 아니면 세션에서 사용하도록 설정하십시오.
"XHR"하위 버튼을 클릭하십시오 .
을 시작하십시오 AJAX call.
왼쪽 열에 항목이 표시되기 시작합니다 "Resources".
리소스를 클릭하면 헤더와 반환 내용을 표시하는 2 개의 탭이 있습니다.

— 필
소스

2

고마워 Phil! 나는 이것을 제쳐두고 주로 피들러에 의존했습니다. 그러나 그 XHR 버튼은 내가 찾고 있던 것입니다 : D

— Wes P

어제 크롬 도구로 이렇게 할 수 있다면 완벽 할 것입니다. 고마워요.

— Germán Rodríguez

3

안녕하십니까, "XHR 하위 버튼"을 찾으려고 노력하고 있습니다. 누락 된 것 같습니다. 누군가 어디 있는지 말해 줄 수 있습니까? 이것은 내 관리자가 imgur.com/9e6yDcB

— David Williams

2

이것은 AJAX 호출이 응답을받는 경우에만 발생하지만 응답을 기대하지 않을 수있는 발신 요청은 표시하지 않습니다. 아무도 그것을 가능하게하는 방법을 알고 있습니까?

— MoMo

1

페이지가 동일한 창에서 리디렉션되는 경우 네트워크 탭 옵션 상단의 '로그 유지'확인란을 사용할 수 있습니다 (그렇지 않은 경우을 설정하여 동일한 창에서 열도록 링크를 변경할 수 있음 target='_self'). 예를 들어 리디렉션 된 후 제출 된 양식의 응답을 볼 수 있습니다. 응답이 새 페이지로드에 쌓일 때 필터를 확인하십시오.

— JeremyS

57

이에 대한 가장 최신 답변은 개발자 도구의 '네트워크'버튼 아래에 나열되고 더 이상 '자원'에 표시되지 않습니다.

— 우터
소스

5

그것은 실제로 지금 어디에 있으며, 업그레이드 후 스택 오버플로를 찾아서 검색했습니다.

— Kzqai

42

최신 정보

Chrome은 요청을 검사하는 방법을 변경 했으며 chrome : // net-export / 에서 내 보낸 로그와 함께 Catapult Netlog Viewer 를 사용할 것을 제안합니다 .

chrome://net-export/

더 많은 정보

이전 Chrome 버전

또한 관리자가 수행 한 것보다 자세한 정보를 위해 Chrome에서이 링크를 사용할 수 있습니다.

chrome://net-internals/#events

이것은 열려있는 동안 브라우저의 모든 요청에 대한 로그를 보여줍니다

— 칼 애들러
소스

당신은 그것을 내보낼 수 있습니까?

— Pacerier

14

사용 가능한 크롬 버전을 모르지만 'Console-Log XMLHttpRequests'설정을 찾았습니다 (Mac의 크롬에서 개발자 도구의 오른쪽 하단 모서리에있는 아이콘 클릭)

— 쉴 맥스
소스

3

이것은 XHR 요청을 모니터링하는 가장 쉽고 가장 좋은 방법입니다.

— 법원

6

DevTools를 열고 F1을 눌러 설정에 액세스하십시오. 콘솔 섹션을 찾아 "Log XMLHttpRequests"확인란을 선택하십시오.

이제 모든 아약스 및 기타 유사한 요청이 콘솔에 기록됩니다.

일반적으로 네트워크 탭으로 이동하지 않고도 콘솔에서 찾고있는 모든 것을 볼 수 있기 때문에이 방법을 선호합니다.

— ShaneDaugherty
소스

4

좋은 무료 도구 인 Fiddler 를 사용할 수 있습니다 .

— 조쉬 버크
소스

1

예, 나는 이것을 위해 사용하는 Fiddler를 가지고 있습니다. 조금 더 편리하기 때문에 브라우저 내에서 할 수있는 방법을 찾고 있습니다.

— Wes P

3

이 게시물에 도움을 주신 모든 분들께 감사드립니다.

우분투 13.10이 있고 크롬 버전은 34.0입니다.

내 상황에서는 이것이 효과가 있습니다.

1.open developer tools in chrome(or use right click on your page and then select inspect element)
2.go to "Network" tab
3.find your ajax request in "Name Path" column 
4.click on the specific ajax link

이제 요청 앞에 새 패널이 표시됩니다

in this panel select "Response" tab

— masoud2011
소스

1

Phil의 5 단계에서 새 버전의 Chrome에서는 더 이상 '리소스'를 사용할 수 없습니다. 이름, 메소드, 상태 등의 열이있는 맨 아래 분할 창에 나열된 Ajax 페이지 옆의 페이지 아이콘을 클릭해야합니다.

그런 다음 오류 메시지를 찾을 수있는 더 많은 패널이 표시됩니다.

— wcb1
소스

0

브라우저에서 페이지를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 선택하여 개발자 도구를 불러올 수도 있습니다.

https://developer.chrome.com/devtools

— BitByteDog
소스