[Chrome]크롬 개발자 도구 네트워크 탭 툴바 활용 방법

크롬 개발자 도구 네트워크 탭 툴바 활용 방법

크롬 개발자 도구의 네트워크 탭은 FrontEnd - BackEnd 혹은 Client - Server 간 주고받는 데이터를 확인하기 위해 사용되는 유용한 기능입니다.

 

네트워크 탭은 요청-응답 데이터뿐만 아니라 네트워크 속도, 요청 및 응답 리소스의 크기, API 호출 순서도 확인할 수 있기에 이 기능을 잘 활용한다면, 자바스크립트에서 console.log() 또는 자바에서 System.out.println()과 같은 코드를 작성하지 않고 디버깅할 수 있습니다.

[티스토리 메인 화면 접속 후 개발자 도구 실행]

 

이번 포스팅은 네트워크 탭 툴바에 존재하는 6가지 기능(기록 중지, 삭제, 필터, 검색, 로그 보존, 캐시 사용 중지)을 소개합니다.

(사용 제한, 네트워크 조건, HAR 파일 업로드, HAR 파일 다운로드 기능은 다음 포스팅에서 설명합니다.)

---

네트워크 로그 기록 중지

API 요청 기록을 중지하고 싶은 경우 좌측 상단의 "네트워크 로그 기록 중지"를 선택합니다.

[아이콘의 색깔이 붉은색인 경우: 계속 기록함]

 

[아이콘의 색깔이 회색인 경우: 네트워크 로그 기록 중지함]

 

다음 예시를 통해 해당 기능이 어떻게 동작하는지 알아봅시다.

 

아이콘의 색깔이 붉은색인 상태에서 다음 메인 화면 접속 후 검색 창에 키워드 입력하면, 다음과 같이 API 요청을 기록합니다. 좌측 하단의 요청 개수가 증가하는 것을 확인할 수 있습니다.

[기록 활성화]

 

다음은 네트워크 로그 기록 중지 후 검색 창에 키워드를 입력한 경우입니다.

[기록 중지]

---

삭제

모든 요청 기록을 제거하고 싶은 경우 삭제 아이콘을 선택합니다.

[삭제 아이콘 클릭 전]

 

[삭제 아이콘 클릭 후]

---

필터

필터 아이콘을 선택하면, 필터 기능을 활성화 또는 비활성화할 수 있습니다.

[필터 기능 활성화]

 

[필터 기능 비활성화]

---

검색

검색 아이콘을 선택하면, 검색 기능이 활성화되고 요청 또는 응답에 특정 키워드가 포함된 항목을 표시합니다.

---

로그 보존

웹 사이트를 이동하면 로그 기록이 초기화되는데, 로그 보존을 선택하면 로그 기록이 초기화되지 않습니다.

 

로그 보존을 선택하지 않고 다른 웹 사이트로 이동했을 경우입니다. 웹 사이트를 이동할 때마다 좌측 하단의 요청이 초기화됩니다. 

[로그 보존 비활성화]

 

다음은 로그 보존 선택 후 다른 웹 사이트로 이동했을 경우입니다. 웹 사이트를 이동해도 좌측 하단의 요청이 초기화되지 않습니다.

[로그 보존 활성화]

---

캐시 사용 중지

한 번 방문한 웹 사이트는 캐시에 저장되기에 다시 방문하면 더 빨리 접속할 수 있습니다. 따라서, 캐시 사용 유무에 따라 네트워크 속도 차이가 다를 수 있습니다.

 

사용자가 특정 웹 사이트를 처음 방문했다는 가정하에 네트워크 속도를 테스트하고 싶다면, 캐시 사용 중지를 선택합니다.