크롬에서 새 창으로 열리는 링크는 개발자 도구를 실행한 상태를 유지할 수 없어서, 링크가 어떻게 열리고 어떤 정보를 처리하는지 확인하기가 어려웠습니다. 그래서 찾아보니, 이런 글이 있더군요.
Chrome Dev Tools: How to trace network for a link that opens a new tab?
I want to trace the network activity that happens when I click on a link. The problem is that the link opens a new tab, and apparently the Dev Tools works per tab it was open for. "Preserve Log Upon
stackoverflow.com
꽤 오래 전 글인데, 2가지 방법이 있다고 합니다. 하나는 크롬에서 net-export 라는 기능을 사용하는 겁니다. 네트워크 관련 로그를 파일 형태로 내려받게 해주는 기능입니다.
JSON 파일로 내려주는데, 짧은 시간동안 트래킹을 하더라도 너무 양이 많아 눈으로 뭔가를 찾아내기는 쉽지 않습니다.
그래서 아래 사이트에 들어가면 파일을 올려서 표 형태로 볼 수 있게 해놓았습니다.
https://netlog-viewer.appspot.com/
https://netlog-viewer.appspot.com/
netlog-viewer.appspot.com
간단한 필터링 기능도 제공하구요.
근데 쭈욱 아래로 답변을 찾아들어가보면 크롬 50버전 이후에는 자동으로 개발자도구를 열어주는 기능이 생겼다고 하네요. 개발자도구 열어서 [F1] 키 누르거나 setting 으로 들어가면 볼 수 있습니다. 이렇게 하면 새 탭이 열리면서 개발자 도구가 기본 활성화됩니다.
한가지 더 유의할 점은 'Preserve log' 옵션을 체크해주어야 합니다. 그렇지 않으면 새 창이 열리면서 리다이렉트가 되는 정보 일부가 유실될 수 있다고 하네요.
* 링크를 열기 전에 먼저 개발자 도구를 열어주어야 합니다. 구글 검색한 탭에서 개발자 도구를 열어주고 링크를 클릭해서 새 탭이 열릴때 이 옵션이 적용됩니다.
