Chrome 개발자 도구 : 새 탭을 여는 링크에 대해 네트워크를 추적하는 방법은 무엇입니까?


235

링크를 클릭 할 때 발생하는 네트워크 활동을 추적하고 싶습니다. 문제는 링크가 새 탭을 열고 Dev Tools가 열린 탭마다 작동한다는 것입니다. "탐색시 로그 유지"는 도움이되지 않습니다.

내 현재 솔루션은이 문제가없는 FireFox 및 HttpFox로 이동하는 것입니다. Chrome의 모든 개발자가 어떻게 관리하는지 궁금합니다. 이것은 매우 기본적으로 들립니다 (물론 대답을 검색했지만 도움이되는 것을 찾지 못했습니다).


이 질문은 많은 관심을 끌기 때문에 더 나은 솔루션을 제공 할 수 있는지 궁금해지기 시작했습니다. 동일한 탭에서 모든 링크를 열도록 설정하면 속임수가 있습니까?
Konrad Dzwinel

@KonradDzwinel 이것은 나에게 일회성 작업이었고 나는 당신에게 말할 수 없어서 움직였습니다. 답을 쓰려고 노력한다면 기꺼이 받아 들일 것입니다.
davka

1
:이 기능으로이 원하는 경우, 별이 크롬 버그 주시기 code.google.com/p/chromium/issues/detail?id=410958
phsource

답변:


220

브라우저에서 발생하는 모든 네트워크 이벤트에 대한 자세한 개요를 확인 chrome://net-internals/#events하거나 chrome://net-export최신 버전의 Chrome에서 확인하십시오.


특정 문제에 따라 다른 가능한 해결책은 '네트워크'탭에서 '로그 유지'를 활성화하는 것입니다.

DevTools> 네트워크> 로그 보존

콘솔에서 다음 코드를 실행하여 동일한 탭에서 모든 링크를 강제로 엽니 다.

[].forEach.call(document.querySelectorAll('a'),
    function(link){
        if(link.attributes.target) {
            link.attributes.target.value = '_self';
        }
    });

window.open = function(url) {
    location.href = url;
};

13
덕분에이 멋진,하지만 난 그냥 다른 탭 들어, 개발 도구 (요청 및 모든 헤더와 응답)에서와 같이 목록을 원하는
davka

이것은 필터를 광고하는 경우 특히 흥미롭지 type:URL_REQUEST만 네트워크 탭과 동일한 정보를 포함하지 않는 것 같습니다. 예를 들어 요청과 응답 모두에 대해 쿠키 데이터를 제거하는 것 같습니다.
Patrick M

3
document.querySelectorAll('a,form')양식에도 영향을 미칩니다.
jgb

1
나는 이것을 두 번 공표 할 수 있으면 좋겠다. 단축키를 사용하여 크롬을위한 콘텐츠 스크립트를 만들었으며 문자 그대로 내 인생의 시간을 절약했습니다.
polkovnikov.ph

1
Chrome에 "넷 내부 이벤트 뷰어 및 관련 기능이 제거되었습니다. chrome : // net-export를 사용하여 넷 로그를 저장하고 외부 투석기 netlog_viewer를 사용하여 확인하십시오." 하지만 chrome : // net-export는 환상적으로 작동합니다.
Jordan

108

기능 요청 phsource에 의해 코멘트에서 언급이 구현되었습니다.

최신 버전 (Chrome 50부터 시작)에서는 개발자 도구 설정 메뉴 (개발자 도구를 연 다음 3 점 메뉴를 사용하거나 F1)로 이동하여 "팝업을 위해 DevTools 자동 열기"상자를 선택하십시오.


13
창이 열리면 즉시 "로그 유지"를 사용하는 것이 약간 까다 롭다는 점을 제외하고는 잘 작동합니다.
Erwin Mayer

크롬 안정 버전은 현재 55
Lulu

5
새창에는 <로그 유지>가 활성화되어 있지 않습니다. Chrome 엔지니어에게 어떤 문제가 있습니까?
Pacerier

이것을 stackoverflow.com/a/29029881/145400 과 함께 사용하십시오 ( "Chrome Dev Tools는 창을 닫은 후에도 계속 열 수 있습니까?")
박사 Jan-Philip Gehrcke

3 점 메뉴를 사용하거나> 환경 설정 페이지> DevTools> "팝업을위한 DevTools 자동 열기"
holly

27

Chrome 61.0.3163.100에서는 이제 다음 옵션을 사용할 수 있습니다. Chrome 개발자 도구 설정으로 이동하면 액세스 할 수 있습니다. 바닥에 있습니다.

웹 검사기 설정


3
불행히도 새로 열린 창에서 "로그 유지"를 활성화하지 않으므로 새 창과 해당 창에서 리디렉션을 받으면 네트워크 로그가 지워지고 리디렉션 후에 시작됩니다.
janh

4
이미지를보기 위해 링크를 클릭하지 않으려는 사용자를위한 설정은 "DevTools"제목 아래 "팝업을위한 DevTools 자동 열기"입니다. 사용 가능한 다른 설정 : "네트워크"아래의 "로그 유지"; "콘솔"아래의 "탐색시 로그 유지"
hlongmore

2
이것은 나를 위해 일하고 (Chrome 76) 팝업 창의 개발자 도구를 시작할 때 "로그 유지"를 활성화 하고 있습니다. 로그 유지 설정을 활성화하면 활성화 될 수 있습니까?
빈스 Bowdren

11
  • 링크 추가 / 업데이트 target="_self"
  • 네트워크 탭에서 "탐색시 로그 유지"를 확인하십시오.
  • 링크를 클릭하면 요청이 기록됩니다.

10

이 방법으로 할 수 있습니다 :

  1. 원하는 링크에서 target = "any_window_name"을 설정하십시오.
  2. 해당 링크를 한 번 클릭하면 새 탭에서 열립니다.
  3. 열린 탭에서 개발자 도구를 엽니 다.
  4. 원래 페이지로 돌아가서 해당 링크를 다시 누르십시오.

    개발자 도구가 열린 상태로 이미 준비된 창에 결과가로드됩니다.

    개발자 도구에서 "로그 유지"옵션 (Konrad Dzwinel 우수 답변 참조)을 활성화하여 해당 링크의 리디렉션 트래픽을 포착 할 수 있습니다.

    참고 : 대부분의 사람들은 링크 대상 ∈ {_self, _blank, _parent, _top}에 익숙합니다. 그러나 실제로 모든 이름을 지정할 수 있습니다. 그러면 해당 이름으로 새 창이 열리고, 링크, 양식 또는 window.open에 대한 동일한 대상 값으로 클릭하면 동일한 창에서 열립니다. 추가 읽기 -mdn : window.open , mdn : <a> 태그


이 팁에 대해 대단히 감사합니다. 정확히 내가 필요한 것. 이 글을 읽는 사람이 동시에 두 페이지가 어떻게 동작하는지 알고 싶다면 여러 창에서 (최소한 Chrome에서) 작동합니다.
Mark Ormesher 2016 년

3

열린 링크가 리디렉션되지 않으면 새 탭에서 네트워크 탭을 연 다음 탭을 새로 고칠 수 있습니다.



0

* 면책 조항 : HttpWatch 개발자에 의해 게시 *

Windows의 HttpWatch 는 도구-> 옵션-> 녹음에서 자동 녹음을 활성화하여 새 Chrome 탭 또는 창이 열릴 때 생성 된 네트워크 트래픽을 기록 할 수 있습니다. 새 창에서 HttpWatch 아이콘을 클릭하여 네트워크 추적을보십시오.

무료 버전은 이러한 각 요청에 대한 URL, 상태 코드 및 경과 시간과 같은 기본적인 정보를 제공합니다.

* 면책 조항 : HttpWatch 개발자에 의해 게시 *

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.