네트워크 활동 검사

Kayce Basques
Kayce Basques
X GitHub

이 튜토리얼에서는 페이지의 네트워크 활동 검사와 관련된 가장 일반적으로 사용되는 DevTools 기능을 실습합니다.

대신 기능을 찾아보려면 네트워크 참조를 확인하세요.

계속 읽거나 이 튜토리얼의 동영상 버전을 시청하세요.

네트워크 패널을 사용해야 하는 경우

일반적으로 리소스가 예상대로 다운로드 또는 업로드되고 있는지 확인해야 하는 경우 네트워크 패널을 사용합니다. 네트워크 패널의 가장 일반적인 사용 사례는 다음과 같습니다.

  • 리소스가 실제로 업로드 또는 다운로드되고 있는지 확인합니다.
  • HTTP 헤더, 콘텐츠, 크기 등 개별 리소스의 속성을 검사합니다.

페이지 로드 성능을 개선할 방법을 찾고 있다면 네트워크 패널로 시작하지 마세요. 네트워크 활동과 관련이 없는 여러 유형의 로드 성능 문제가 있습니다. 페이지 개선 방법에 관한 맞춤형 제안을 제공하는 Lighthouse 패널로 시작하세요. 웹사이트 속도 최적화를 참고하세요.

네트워크 패널 열기

이 튜토리얼을 최대한 활용하려면 데모를 열고 데모 페이지에서 기능을 사용해 보세요.

  1. 시작하기 데모를 엽니다.

    데모 웹사이트

    데모를 별도의 창으로 이동하는 것이 좋습니다.

    한 창에는 데모를, 다른 창에는 이 튜토리얼을 표시합니다.

  2. DevTools를 Control+Shift+J 또는 Command+Option+J (Mac)를 눌러 엽니다. 콘솔 패널이 열립니다.

    Devtools의 콘솔 패널

    DevTools를 창 하단에 도킹하는 것이 좋습니다.

    창 하단에 도킹된 DevTools

  3. 네트워크 탭을 클릭합니다. 네트워크 패널이 열립니다.

    창 하단에 도킹된 개발자 도구 Network 패널

지금은 네트워크 패널이 비어 있습니다. DevTools는 열려 있는 동안에만 네트워크 활동을 로깅하고 DevTools를 연 후에는 네트워크 활동이 발생하지 않았기 때문입니다.

네트워크 활동 로깅

페이지에서 발생하는 네트워크 활동을 보려면 다음 단계를 따르세요.

  1. 페이지를 새로고침합니다. 네트워크 패널은 네트워크 로그 에 모든 네트워크 활동을 로깅합니다.

    5개의 요청이 있는 네트워크 로그

    네트워크 로그 의 각 행은 리소스를 나타냅니다. 기본적으로 리소스는 시간순으로 나열됩니다. 상단 리소스는 일반적으로 기본 HTML 문서입니다. 하단 리소스는 마지막으로 요청된 리소스입니다.

    각 열은 리소스에 관한 정보를 나타냅니다. 기본 열은 다음과 같습니다.

    • 상태: HTTP 응답 코드입니다.
    • 유형: 리소스 유형입니다.
    • 시작자: 리소스가 요청된 원인입니다. 시작자 열에서 링크를 클릭하면 요청을 발생시킨 소스 코드로 이동합니다.
    • 크기: 네트워크를 통해 전송된 리소스 양입니다.
    • 시간: 요청에 걸린 시간입니다.

  2. DevTools가 열려 있는 한 네트워크 로그 에 네트워크 활동을 기록합니다. 이를 보여주려면 먼저 네트워크 로그 하단을 보고 마지막 활동을 기록해 두세요.

  3. 이제 데모에서 데이터 가져오기 버튼을 클릭합니다.

  4. 네트워크 로그 하단을 다시 봅니다. getstarted.json이라는 새 리소스가 있습니다. 데이터 가져오기 버튼을 클릭하면 페이지에서 이 파일을 요청합니다.

    네트워크 로그의 새 리소스입니다.

자세히 보기

네트워크 로그 의 열은 구성 가능합니다. 사용하지 않는 열은 숨길 수 있습니다. 기본적으로 숨겨져 있지만 유용할 수 있는 열도 많이 있습니다.

  1. 네트워크 로그 테이블의 헤더를 마우스 오른쪽 버튼으로 클릭하고 도메인 을 선택합니다. 이제 각 리소스의 도메인이 표시됩니다.

    도메인 열을 사용 설정합니다.

느린 네트워크 연결 시뮬레이션

사이트를 빌드하는 데 사용하는 컴퓨터의 네트워크 연결은 사용자의 모바일 기기의 네트워크 연결보다 빠를 수 있습니다. 페이지를 제한하면 모바일 기기에서 페이지를 로드하는 데 걸리는 시간을 더 잘 파악할 수 있습니다.

  1. 기본적으로 제한 없음 으로 설정된 제한 드롭다운을 클릭합니다.

    네트워크 패널의 제한 드롭다운

  2. 3G 를 선택합니다.

    네트워크 패널에서 3G를 선택합니다.

  3. 새로고침 을 길게 누른 다음 캐시 비우기 및 강제 새로고침 을 선택합니다.

    캐시를 비우고 강제 새로고침합니다.

    반복 방문 시 브라우저는 일반적으로 캐시에서 일부 파일을 제공하여 페이지 로드 속도를 높입니다. 캐시 비우기 및 강제 새로고침 은 브라우저가 모든 리소스에 대해 네트워크로 이동하도록 강제합니다. 처음 방문하는 사용자가 페이지 로드를 경험하는 방식을 확인하려는 경우에 유용합니다.

스크린샷 캡처

스크린샷은 페이지가 로드되는 동안 여러 시점에서 페이지가 어떻게 표시되는지 캡처하고 각 간격으로 로드되는 리소스를 보고합니다.

스크린샷을 캡처하려면 다음 단계를 따르세요.

  1. 네트워크 설정 을 클릭합니다.

  2. 스크린샷 체크박스를 사용 설정합니다.

  3. 캐시 비우기 및 강제 새로고침 워크플로를 사용하여 페이지를 다시 로드합니다. 이 작업을 실행하는 방법을 상기해야 하는 경우 느린 연결 시뮬레이션을 참고하세요. 스크린샷 탭은 로드 프로세스 중에 페이지가 표시된 다양한 지점의 썸네일을 제공합니다.

    네트워크 패널에서 페이지 로드의 스크린샷

  4. 첫 번째 썸네일을 클릭합니다. DevTools는 해당 시점에 발생한 네트워크 활동을 보여줍니다.

    첫 번째 스크린샷이 촬영되는 동안 발생한 네트워크 활동입니다.

  5. 스크린샷 체크박스를 전환하여 스크린샷 탭을 닫습니다.

  6. 페이지를 새로고침합니다.

리소스 세부정보 검사

리소스를 클릭하여 자세한 정보를 확인합니다. 직접 해보기:

  1. getstarted.html을 클릭합니다. 헤더 탭이 표시됩니다. 이 탭을 사용하여 HTTP 헤더를 검사합니다.

    네트워크 패널의 헤더 탭

  2. 미리보기 탭을 클릭하여 기본 HTML 렌더링을 봅니다.

    네트워크 패널의 미리보기 탭

    이 탭은 API가 HTML에서 오류 코드를 반환하고 HTML 소스 코드보다 렌더링된 HTML을 읽는 것이 더 쉽거나 이미지를 검사할 때 유용합니다.

  3. 응답 탭을 클릭하여 HTML 소스 코드를 봅니다.

    네트워크 패널의 응답 탭

  4. 시작자 탭을 클릭하여 요청 시작자 체인을 매핑하는 트리를 봅니다.

    네트워크 패널의 Initiator 탭

  5. 타이밍 탭을 클릭하여 이 리소스의 네트워크 활동 분석을 봅니다.

    네트워크 패널의 타이밍 탭

  6. 닫기 를 클릭하여 네트워크 로그를 다시 봅니다.

    세부정보 탭의 닫기 버튼입니다.

특정 문자열 또는 정규 표현식에 대해 모든 리소스의 HTTP 헤더와 응답을 검색해야 하는 경우 검색 탭을 사용합니다.

예를 들어 리소스가 적절한 캐시 정책을 사용하고 있는지 확인한다고 가정해 보겠습니다.

  1. 패널의 작업 모음에서 검색 를 클릭하거나 Command + F (macOS) 또는 Control + F (Windows / Linux)를 누릅니다.

    검색 탭이 네트워크 로그 왼쪽에 열립니다.

    네트워크 로그 왼쪽에 있는 검색 탭

  2. Cache-Control을 입력하고 Enter 키를 누릅니다. 검색 탭에는 리소스 헤더 또는 콘텐츠에서 찾은 모든 Cache-Control 인스턴스가 나열됩니다.

    Cache-Control 검색 결과

  3. 결과를 클릭하여 봅니다. 헤더에서 쿼리가 발견되면 헤더 탭이 열립니다. 콘텐츠에서 쿼리가 발견되면 응답 탭이 열립니다.

    Headers 탭에서 강조 표시된 검색 결과

  4. 검색 탭과 헤더 탭을 닫습니다.

    닫기 버튼

리소스 필터링

DevTools는 현재 작업과 관련이 없는 리소스를 필터링하는 다양한 워크플로를 제공합니다.

필터 툴바

필터 툴바는 기본적으로 사용 설정되어 있어야 합니다. 그렇지 않은 경우:

  1. 필터 를 클릭하여 표시합니다.

문자열, 정규 표현식 또는 속성으로 필터링

필터 입력 상자는 다양한 유형의 필터링을 지원합니다.

  1. 필터 입력 상자에 png를 입력합니다. png 텍스트가 포함된 파일만 표시됩니다. 이 경우 필터와 일치하는 파일은 PNG 이미지뿐입니다.

    문자열 필터링 결과가 네트워크 로그에 표시됩니다.

  2. /.*\.[cj]s+$/를 입력합니다. DevTools는 파일 이름이 j 또는 c로 끝나지 않고 그 뒤에 하나 이상의 s 문자가 오는 리소스를 필터링합니다.

    정규 표현식 필터가 네트워크 로그에 표시됩니다.

  3. -main.css를 입력합니다. DevTools는 main.css를 필터링합니다. 다른 파일이 패턴과 일치하는 경우에도 필터링됩니다.

    부정적인 필터링 결과가 네트워크 로그에 표시됩니다.

  4. 필터 텍스트 상자에 domain:raw.githubusercontent.com을 입력합니다. DevTools는 이 도메인과 일치하지 않는 URL이 있는 리소스를 필터링합니다.

    속성 필터링으로 인해 네트워크 로그가 생성됩니다.

    필터링 가능한 속성의 전체 목록은 속성별 요청 필터링을 참고하세요.

  5. 필터 입력 상자에서 텍스트를 지웁니다.

리소스 유형별로 필터링

스타일시트와 같은 특정 유형의 파일에 집중하려면 다음 단계를 따르세요.

  1. CSS 를 클릭합니다. 다른 모든 파일 유형은 필터링됩니다.

    Network 패널에서 CSS 파일만 표시

  2. 스크립트도 보려면 Control 또는 Command (Mac)를 누른 상태에서 JS 를 클릭합니다.

    CSS 및 JS 파일만 표시된 네트워크 패널

  3. 모두 를 클릭하여 필터를 삭제하고 모든 리소스를 다시 봅니다.

다른 필터링 워크플로는 요청 필터링을 참고하세요.

요청 차단

일부 리소스를 사용할 수 없는 경우 페이지는 어떻게 표시되고 동작하나요? 완전히 실패하나요, 아니면 어느 정도는 계속 작동하나요? 요청을 차단하여 알아보세요.

  1. Control+Shift+P 또는 Command+Shift+P (Mac)를 눌러 명령어 메뉴 를 엽니다.

    네트워크 패널의 명령 메뉴

  2. block을 입력하고 요청 차단 표시를 선택한 후 Enter 키를 누릅니다.

    '요청 차단 표시' 옵션

  3. 패턴 추가 버튼을 클릭합니다.

  4. main.css를 입력합니다.

    네트워크 패널에서 main.css 차단

  5. 추가 를 클릭합니다.

  6. 페이지를 새로고침합니다. 예상대로 기본 스타일시트가 차단되었으므로 페이지의 스타일이 약간 엉망입니다. 네트워크 로그에서 main.css 행을 확인합니다. 빨간색 텍스트는 리소스가 차단되었음을 의미합니다.

    main.css가 차단되었습니다.

  7. 요청 차단 사용 설정 체크박스를 선택 취소합니다.

네트워크 활동 검사와 관련된 DevTools 기능을 자세히 알아보려면 네트워크 참조를 확인하세요.