리디렉션과 함께 Chrome의 네트워크 디버거를 사용하는 방법

Chrome 네트워크 디버거는 페이지에로드 된 모든 HTTP 리소스를 잘 보여줍니다. 그러나 새로운 최상위 HTML 페이지가로드 될 때마다 목록이 지워집니다. 이로 인해 특정 이유로 자동으로 다시로드되는 페이지 (스크립트 실행 또는 300 개의 응답)를 디버깅하기가 매우 어렵습니다.

새 최상위 페이지가로드 될 때 Chrome에서 네트워크 디버거를 지우지 않도록 할 수 있습니까? 아니면 돌아가서 이전 페이지의 네트워크 리소스를 볼 수 있습니까?

또는 리디렉션하려는 페이지를 제어하지 않으면 새 페이지를로드하기 전에 Chrome을 강제로 일시 중지 할 수 있습니까? OpenID 댄스의 일부이며, SSL과 자격 증명의 조합으로 인해 명령 줄 도구로 디버깅하기가 매우 어렵습니다.

의견에 대한 @Daniel Alexiuc & @Thanatos 덕분에 v32 이후로 변경되었습니다.

전류 (≥ v32)

DevTools의 "네트워크"탭 상단에는 "로그 유지"기능을 켜는 확인란이 있습니다. 이 옵션을 선택하면 페이지로드시 네트워크 로그가 유지됩니다.

왼쪽의 작은 빨간 점은 이제 네트워크 로깅을 완전히 켜고 끄는 것입니다.

이전 버전

이전 버전의 Chrome (여기서 v21)에서는 '네트워크'탭의 바닥 글에 클릭 가능한 작은 빨간 점이 있습니다.

그 위에 마우스를 올려 놓으면 활성화 될 때 "탐색시 로그 유지"라는 메시지가 나타납니다. 약속을 지킨다.

Chrome에서 네트워크 디버거를 지우지 않도록하는 방법을 모르겠지만 원하는 결과를 얻을 수 있습니다.

1. js 콘솔을 엽니 다
2. window.addEventListener("beforeunload", function() { debugger; }, false)

중단 점에 도달하여 새 페이지를로드하기 전에 크롬이 일시 중지됩니다.

@bfncs 답변 만 업데이트

Chrome 43 주변에서 동작이 약간 변경되었다고 생각합니다. 로드 된 문서가 문서 아래에 표시 될 때 여전히 로그 보존을 사용하도록 설정해야하지만 이제 기타 탭 아래에 리디렉션이 표시됩니다.

네트워크 요청이 많고 XHR, Doc, JS 등으로 필터링하기 때문에 항상 혼란 스럽습니다. 그러나 리디렉션의 경우 Doc 탭이 비어 있으므로 추측해야합니다.

다른 페이지로 리디렉션하기 전에 네트워크 호출을 디버깅하는 또 다른 훌륭한 솔루션은 beforeunload이벤트 중단 점 을 선택하는 것입니다.

이렇게하면 흐름을 다른 페이지로 리디렉션하기 직전에 흐름을 차단할 수 있습니다. 이렇게하면 모든 네트워크 호출, 네트워크 데이터 및 콘솔 로그가 여전히 존재합니다.

이 솔루션은 통화 응답을 확인하려는 경우에 가장 좋습니다.

PS : 특정 통화 또는 통화 직전 에 중지하려면 XHR 중단 점을 사용할 수도 있습니다 (이미지 예 참조).