Chrome Developer 도구를 통해 Ajax 통화의 HTML 응답 보기?

Chrome Developer 도구를 통해 Ajax 통화의 HTML 응답 보기?

그래서 제 자바스크립트에서 저는 제 웹사이트의 서비스에 아약스를 호출하고 있습니다.이런, 뭔가 실패합니다.괜찮아요.Firefox에서 제가 할 수 있는 일은 다음과 같습니다.

1. Firebug 콘솔을 엽니다.
2. 실패한 Ajax 호출을 찾아 + 기호를 클릭하여 자세한 정보를 확인합니다.
3. 응답 탭에 원시 HTML이 있습니다. 누가 다 읽고 싶어 합니까?HTML 탭을 클릭합니다.
4. 아, 장고가 반환한 멋지게 포맷된 HTML은 나의 디바이드를 0 오류로 보여줍니다.

제가 현재 Chrome에서 하고 있는 일은 다음과 같습니다.

1. Ctrl+Shift+J를 눌러 개발자 도구 열기
2. 리소스로 이동
3. Ajax 통화로 스크롤하여 다음을 클릭합니다.
4. 다시 한번 원시 HTML을 봅니다. 여전히 모든 것을 읽고 싶지는 않지만 HTML 탭이 없기 때문에 텍스트 편집기에 복사하여 붙여넣습니다.
5. html 파일 저장
6. 장고가 반환한 오류 HTML을 읽을 수 있도록 브라우저에서 html 파일 열기

질문으로 넘어가겠습니다.원시 html을 텍스트 편집기에 복사하여 붙여넣지 않고 브라우저에서 렌더링된 Ajax 호출에서 HTML 응답을 볼 수 있는 방법이 있습니까?

아니요, 현재로서는 방법이 없습니다.Developer Tools > Resources > XHR Tab > 자원을 클릭하면(왼쪽) 두 개의 탭이 나타납니다.첫 번째는 머리글(원시)과 원시 콘텐츠입니다.

참고로 Firebug Lite에는 NET 패널이 없지만 Firebug와 동일한 모양과 느낌의 XHR watcher 기능이 있습니다.물론, Firebug Lite는 Chrome Developer Tools에 비해 매우 제한적이지만 CSS 편집이나 XHR 검사와 같은 특정 작업의 경우 Firebug Lite가 작업을 매우 잘 수행합니다.

현재 안정된 버전은 HTTP 헤더, GET 및 POST 변수, 응답 텍스트를 보여줍니다.그러나 다음 버전 1.3.1(곧 출시 예정)에는 HTML 뷰어, XML 뷰어 및 편리한 JSON 뷰어(요청 및 응답 데이터용)가 포함되어 있습니다.

이 기능은 다음 릴리스 1.3.1b2(1.3.1 버전의 마지막 베타 버전)에 포함될 예정이지만 지금 바로 실행 중인 것을 보려면 개발자 채널을 사용할 수 있습니다.

예, 가장 쉬운 방법은 개발자 도구의 네트워크 탭을 사용하는 것입니다.

1. Ctrl+Shift+I를 눌러 개발자 도구를 엽니다(또는 맨 위에 있는 메뉴 모음: "View -> Developer -> Developer Tools").
2. "네트워크" 탭으로 이동
3. 현재 페이지 새로 고침
4. 왼쪽의 Ajax 통화로 스크롤하여 다음을 클릭합니다.
5. 기본 메뉴에는 여러 탭이 표시됩니다(일반적으로 미리 보기로 기본 설정됨)."헤더"를 클릭하면 요청 및 응답 헤더 정보가 나타납니다.

Firebug의 콘솔 탭에서 요청한 링크를 마우스 오른쪽 버튼으로 클릭합니다.그런 다음 마우스 오른쪽 단추를 클릭하고 새 탭에서 열린 응답을 선택합니다.HTML로 표시됩니다.

오른쪽 클릭 "다른 이름으로 저장" 기능이 네트워크에 더 이상 없다는 것을 알게 되었기 때문에 >XHR > 응답 탭...새 자동 단축키 스크립트를 만들었습니다. (응답 텍스트에서 마우스 가운데 단추 클릭)

MButton::
MouseClick, left
ClipSaved := ClipboardAll
Send, ^a^c
sleep, 500
FileName := "C:\Users\David\Desktop\temp_xhr_response.html"
file := FileOpen(FileName, "w")
if !IsObject(file)
{
MsgBox Can't open "%FileName%" for writing.
return
}
StringGetPos, pos, Clipboard, HeadersPreviewResponseCookiesTiming
if pos = -1
{
pos = 0 
}
TestString := SubStr(Clipboard, pos+38)
file.Write(TestString)
file.Close()
Run, open "C:\Users\David\Desktop\temp_xhr_response.html"
Clipboard = %ClipSaved%
sleep, 1000
FileDelete, C:\Users\David\Desktop\temp_xhr_response.html
return

자동 단축키를 다운로드하고 빠른 매크로를 작성하여 브라우저 창에서 XHR 응답을 보는 데 필요한 단계를 수행할 수 있습니다.

여기 자동 단축키로 작성한 스크립트가 있습니다. Chrome의 Developer Tools > Network 탭에서 응답 창 안에 있는 중간 마우스 버튼(마우스 휠 버튼)을 누르면 다음 단계를 수행합니다.

1. 마우스 오른쪽 단추 클릭...다른 이름으로 저장 클릭
2. 파일 위치를 파일 프롬프트에 붙여넣고 Enter 키를 누릅니다.
3. 파일 열기(기본 브라우저 사용)

4. 파일 삭제

   MButton::
   MouseClick, right
   MouseGetPos, xpos, ypos
   xpos := xpos + 5
   ypos := ypos + 5
   MouseMove, xpos, ypos
   MouseClick, left
   Sleep, 500
   ClipSaved := ClipboardAll
   Clipboard := "C:\Users\David\Desktop\temp_xhr_response.html"
   Send, ^v  {Enter}
   Clipboard = %ClipSaved%
   sleep, 500
   Run, open "C:\Users\David\Desktop\temp_xhr_response.html"
   sleep, 1000
   FileDelete, C:\Users\David\Desktop\temp_xhr_response.html
   return
   

이렇게 하면 Google이 HTML 응답을 더 잘 볼 수 있도록 업데이트를 릴리스할 때까지 연기할 수 있습니다.더 이상 FF의 FireBug를 사용하지 않습니다, 엄청나게 느려졌습니다!

언급URL : https://stackoverflow.com/questions/3181287/viewing-html-response-from-ajax-call-through-chrome-developer-tools