백그라운드 서비스 디버그

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome DevTools의 백그라운드 서비스 섹션은 사용자가 웹사이트를 열지 않은 상태에서도 웹사이트에서 업데이트를 보내고 받을 수 있는 JavaScript API용 도구 모음입니다. 백그라운드 서비스는 백그라운드 프로세스와 기능적으로 유사합니다.

백그라운드 서비스 섹션을 사용하면 다음 백그라운드 서비스를 디버그할 수 있습니다.

Chrome DevTools는 DevTools가 열려 있지 않아도 3일 동안 가져오기, 동기화, 알림 이벤트를 기록할 수 있습니다. 이렇게 하면 이벤트가 정상적으로 전송되고 수신되는지 확인하는 데 도움이 됩니다.

백그라운드 서비스 이벤트 외에도 DevTools는 다음을 수행할 수 있습니다.

백그라운드 가져오기

Background Fetch API를 사용하면 서비스 워커가 영화 또는 팟캐스트와 같은 대용량 리소스를 백그라운드 서비스로 안정적으로 다운로드할 수 있습니다. DevTools가 열려 있지 않아도 백그라운드 가져오기 이벤트를 3일 동안 로깅하려면 다음 안내를 따르세요.

  1. 예를 들어 이 데모 페이지에서 DevTools를 엽니다.

  2. Application > Background services > Background fetch로 이동하여 녹화를 탭합니다. Record를 클릭합니다.

    백그라운드 가져오기 창

  3. 데모 페이지에서 로컬에 애셋 저장을 클릭합니다. 그러면 백그라운드 가져오기 활동이 트리거됩니다. DevTools가 테이블에 이벤트를 기록합니다.

    백그라운드 가져오기 창의 이벤트 로그

  4. 일정을 클릭하여 표 아래의 공간에서 세부정보를 확인합니다.

  5. DevTools를 닫고 최대 3일 동안 기록을 실행할 수 있습니다. 녹화를 중지하려면 중지. Stop을 클릭합니다.

백그라운드 동기화

Background Sync API를 사용하면 오프라인 서비스 워커가 안정적인 인터넷 연결을 다시 설정한 후에 서버에 데이터를 전송할 수 있습니다. DevTools가 열려 있지 않아도 백그라운드 동기화 이벤트를 3일 동안 로깅하려면 다음 단계를 따르세요.

  1. 예를 들어 이 데모 페이지에서 DevTools를 엽니다.

  2. Application > Background services > Background sync로 이동하여 녹화를 탭합니다. Record를 클릭합니다.

    백그라운드 동기화 창

  3. 데모 페이지에서 백그라운드 동기화 등록을 클릭하여 해당 서비스 워커를 등록하고 메시지가 표시되면 허용을 클릭합니다.

    서비스 워커 등록은 백그라운드 동기화 활동입니다. DevTools가 테이블에 이벤트를 기록합니다.

    백그라운드 동기화 창의 이벤트 로그

  4. 일정을 클릭하여 표 아래의 공간에서 세부정보를 확인합니다.

  5. DevTools를 닫고 최대 3일 동안 기록을 실행할 수 있습니다. 녹화를 중지하려면 중지. Stop을 클릭합니다.

(실험용) 이탈 추적 감소

Chrome의 이탈 추적 감소 실험을 통해 이탈 추적 기법을 사용하여 크로스 사이트 추적을 실행하는 것으로 보이는 사이트의 상태를 식별하고 삭제할 수 있습니다. 수동으로 완화 조치를 강제로 추적하고 상태가 삭제된 사이트 목록을 확인할 수 있습니다.

강제로 완화 조치를 추적하려면 다음 안내를 따르세요.

  1. Chrome에서 서드 파티 쿠키 차단 점 3개로 된 메뉴입니다. > 설정 > 보안 개인 정보 보호 및 보안 > 쿠키 및 기타 사이트 데이터 > 라디오 버튼이 선택되었습니다. 서드 파티 쿠키 차단으로 이동하여 사용 설정합니다.
  2. chrome://flags에서 이탈 추적 감소 실험을 삭제와 함께 사용 설정됨으로 설정합니다.
  3. 예를 들어 데모 페이지에서 DevTools를 열고 애플리케이션 > 백그라운드 서비스 > 이탈 추적 완화로 이동합니다.
  4. 데모 페이지에서 반송 링크를 클릭하고 Chrome이 반송을 기록할 때까지 10초 동안 기다립니다. 문제 탭에 예정된 상태 삭제에 대한 경고가 표시됩니다.
  5. 강제 실행을 클릭하여 상태를 즉시 삭제합니다.

이탈 추적 감소는 상태 삭제를 나열합니다.

알림

서비스 워커가 서버에서 푸시 메시지를 수신하면 서비스 워커는 Notifications API를 사용하여 사용자에게 데이터를 표시합니다. DevTools가 열려 있지 않아도 3일 동안 알림을 로깅하려면 다음 단계를 따르세요.

  1. 예를 들어 이 데모 페이지에서 DevTools를 엽니다.

  2. 애플리케이션 > 백그라운드 서비스 > 알림으로 이동하여 녹화를 탭합니다. 기록을 클릭합니다.

    알림 창.

  3. 데모 페이지에서 메시지가 표시되면 알림 예약 및 허용을 클릭합니다.

  4. 알림이 표시될 때까지 기다립니다. DevTools가 알림 이벤트를 테이블에 기록합니다.

    알림 창의 이벤트 로그.

  5. 일정을 클릭하여 표 아래의 공간에서 세부정보를 확인합니다.

  6. DevTools를 닫고 최대 3일 동안 기록을 실행할 수 있습니다. 녹화를 중지하려면 중지. Stop을 클릭합니다.

추측 로드

추측 로드는 사용자가 정의한 추측 규칙에 따라 거의 즉각적인 페이지 로드를 허용합니다. 이렇게 하면 웹사이트에서 이동한 대부분의 페이지를 미리 가져오고 사전 렌더링할 수 있습니다.

미리 가져오기는 리소스를 미리 가져오고 사전 렌더링은 한 걸음 더 나아가 숨겨진 백그라운드 렌더기 프로세스로 전체 페이지를 렌더링합니다.

애플리케이션 > 백그라운드 서비스 > 추측 로드 섹션에서 추측 로드를 디버그할 수 있습니다. 이 섹션에는 세 가지 보기가 포함됩니다.

  • 추측 로드. 현재 페이지, 현재 URL, 현재 페이지에서 추측으로 로드하려고 시도하는 페이지 및 해당 상태가 포함됩니다.
  • 규칙. 요소 패널의 현재 페이지에 있는 규칙 집합과 추측의 전반적인 상태를 포함합니다.
  • 추측. 추측 로드 시도 및 상태에 대한 정보가 포함된 표가 포함되어 있습니다. 시도가 실패하면 표에서 이를 클릭하여 자세한 정보와 실패 이유를 확인할 수 있습니다.

다음 데모 페이지에서 추측 로드를 디버깅해 보세요.

  1. 페이지에서 DevTools를 열고 애플리케이션 > 백그라운드 서비스 > 추측 로드로 이동합니다. 페이지에서 시작된 추측 로드가 표시되지 않으면 새로고침하세요.

    이 페이지에서 추측 로드한 URL, 성공 2회, 실패 1회.

  2. 데모의 시작 페이지가 두 페이지를 사전 렌더링하지만 하나는 사전 렌더링하지 못합니다. 모든 추측 보기를 클릭합니다.

  3. Speculations에서 Failure 상태인 추측을 선택하여 하단에 세부정보가 있는 Failure reason(실패 이유)를 확인합니다.

    실패한 추측을 선택했습니다.

    이 경우 웹사이트에 /next3.html 페이지가 없으므로 사전 렌더링이 실패했습니다.

  4. 규칙 섹션을 열고 상태를 클릭하여 하단에 설정된 규칙을 확인합니다. 규칙 세트 링크를 클릭하면 요소 패널로 이동하며 추측 규칙이 정의된 위치를 보여줍니다.

    규칙 집합 링크가 있는 규칙 섹션

자세한 안내는 추측 규칙 디버깅을 참조하세요.

푸시 메시지

사용자에게 푸시 알림을 표시하려면 먼저 서비스 워커가 Push Message API를 사용하여 서버에서 데이터를 수신해야 합니다. 서비스 워커가 알림을 표시할 준비가 되면 Notifications API를 사용합니다. DevTools를 열지 않은 상태에서도 3일 동안 푸시 메시지를 로깅하려면 다음 단계를 따르세요.

  1. 예를 들어 이 데모 페이지에서 DevTools를 엽니다.

  2. Application > Background services > Push Messaging으로 이동하여 녹화를 탭합니다. Record를 클릭합니다.

    Push Messaging 창

  3. 데모 페이지에서 푸시 알림 사용 설정을 전환하고 메시지가 표시되면 허용을 클릭한 다음 메시지를 입력하고 전송합니다. DevTools가 푸시 알림 이벤트를 테이블에 기록합니다.

    Push Messaging 창의 이벤트 로그입니다.

  4. 일정을 클릭하여 표 아래의 공간에서 세부정보를 확인합니다.

  5. DevTools를 닫고 최대 3일 동안 기록을 실행할 수 있습니다. 녹화를 중지하려면 중지. Stop을 클릭합니다.

Reporting API

일부 오류는 프로덕션에서만 발생합니다. 실제 사용자, 네트워크, 기기가 게임을 변경하기 때문에 로컬 또는 개발 중에는 표시되지 않습니다.

예를 들어 새로운 사이트가 document.write()를 사용하여 중요한 스크립트를 로드하는 서드 파티 소프트웨어를 사용한다고 가정해 보겠습니다. 전 세계의 신규 사용자가 사이트를 방문하지만 이들은 테스트한 것보다 연결 속도가 느릴 수 있습니다. 느린 네트워크에서 Chrome이 document.write()에 개입하기 때문에 사이트가 해킹당하기 시작합니다. 또는 코드베이스에서 사용 중일 수 있는 지원 중단되었거나 곧 지원 중단될 API를 주시하는 것이 좋습니다.

Reporting API는 지원 중단된 API 호출, 페이지의 보안 위반 등을 모니터링할 수 있도록 설계되었습니다. Reporting API로 웹 애플리케이션 모니터링에 설명된 대로 보고를 설정할 수 있습니다.

페이지에서 생성된 보고서를 보려면 다음 단계를 따르세요.

  1. chrome://flags/#enable-experimental-web-platform-features로 이동하여 실험용 웹 플랫폼 기능을 사용 설정으로 설정한 다음 Chrome을 다시 시작합니다.

  2. DevTools를 열고 애플리케이션 > 백그라운드 서비스 > Reporting API로 이동합니다. 예를 들어 이 데모 페이지에서 보고서를 확인할 수 있습니다.

    Reporting API에 나열된 보고서

Reporting API 탭은 다음 세 부분으로 나뉩니다.

  • 각 보고서에 대한 다음 정보가 포함된 Reports 표
    • 보고서 생성을 일으킨 URL
    • 위반 유형
    • 보고서 상태
    • 대상 엔드포인트
    • 생성 시간 타임스탬프
    • 보고서 본문
  • 보고서 본문 미리보기 섹션. 보고서 본문을 미리 보려면 보고서 표에서 보고서를 클릭합니다.
  • Reporting-Endpoints 헤더에 구성된 모든 엔드포인트에 대한 개요를 보여주는 엔드포인트 섹션

보고서 상태

상태 열을 통해 Chrome에서 신고를 성공적으로 전송했는지, 보고서를 전송하려 했는지, 실패했는지 알 수 있습니다.

상태 설명
Success 브라우저에서 보고서를 전송했고 엔드포인트에서 성공 코드 (200 또는 다른 성공 응답 코드 2xx)로 응답했습니다.
Pending 브라우저에서 보고서 전송을 시도하고 있습니다.
Queued 보고서가 생성되었지만 브라우저에서 아직 보고서를 보내지 않고 있습니다. 보고서는 다음 두 가지 경우 중 하나에 Queued로 표시됩니다.
  • 새로운 보고서이며 브라우저에서 더 많은 보고서가 도착했는지 확인한 후 다시 전송합니다.
  • 새로운 보고서가 아닙니다. 브라우저에서 이미 보고서 전송을 시도했지만 실패했으며 다시 시도하기 전에 대기 중입니다.
MarkedForRemoval 일정 시간 동안 (Queued) 다시 시도한 후 브라우저에서 보고서 전송 시도를 중단했으며 전송할 보고서 목록에서 곧 삭제할 예정입니다.

보고서는 전송 성공 여부와 관계없이 잠시 후 삭제됩니다.