Dale St. Marthe
Application 패널을 사용하여 매니페스트, 서비스 워커, 저장소, 캐시 데이터를 비롯한 웹 앱의 여러 측면을 검사, 수정, 디버그합니다.
개요
애플리케이션 패널은 하위 메뉴가 포함된 4개의 섹션으로 구성되어 있습니다. 이러한 섹션과 하위 메뉴는 다음과 같습니다.
애플리케이션: 매니페스트, 서비스 워커, 저장소 등 앱에 관한 전반적인 정보를 포함합니다.
- 매니페스트 탭은
manifest.json의 정보를 사용자 친화적인 방식으로 표시합니다. 오류 및 경고(있는 경우)도 해당 섹션에 표시합니다. - 서비스 워커 탭에서는 푸시 이벤트 에뮬레이션, 서비스 업데이트 등을 통해 서비스 워커를 검사하고 디버그할 수 있습니다.
- 스토리지 탭에는 캐시 스토리지, IndexedDB, 서비스 워커에서 사용하는 메모리의 분산을 보여주는 원형 차트가 있습니다. 사이트 데이터를 지우고 맞춤 스토리지 할당량을 시뮬레이션할 수도 있습니다.
저장소: 웹 앱에서 사용하는 다양한 저장 방법을 보고 수정합니다.
- 로컬 및 세션 스토리지 목록을 사용하면 출처를 선택하고 연결된 스토리지 메서드의 키-값 쌍을 수정할 수 있습니다.
- IndexedDB 목록은 데이터베이스를 포함하며 이 목록을 사용하여 브라우저에서 객체 저장소를 검사할 수 있습니다.
- Cookies 목록을 사용하면 출처를 선택하고 키-값 쌍을 수정할 수 있습니다.
- 비공개 상태 토큰 및 관심분야 그룹을 사용하면 해당 토큰과 그룹(있는 경우)을 검사할 수 있습니다.
- 공유 저장소 목록을 사용하면 출처를 선택하고 연결된 키-값 쌍을 검사 및 수정할 수 있습니다.
- 캐시 저장소 목록에는 사용 가능한 캐시가 포함되며, 캐시의 리소스를 검사, 필터링, 삭제할 수 있습니다.
백그라운드 서비스: 백그라운드 서비스를 검사, 테스트, 디버그합니다.
- 뒤로-앞으로 캐시 탭을 사용하면 브라우저의 뒤로-앞으로 캐시 테스트를 실행할 수 있습니다. 뒤로-앞으로 캐싱을 방해하는 문제도 보고됩니다.
- 백그라운드 가져오기 탭을 사용하면 최대 3일 동안 Background Fetch API의 활동을 기록할 수 있습니다.
- 백그라운드 동기화 탭을 사용하면 최대 3일 동안 Background Sync API에서 활동을 기록할 수 있습니다.
- 이탈 추적 감소 탭을 사용하면 이탈 추적 기법을 사용하여 크로스 사이트 추적을 실행하는 것으로 보이는 사이트의 상태를 식별하고 삭제할 수 있습니다.
- 알림 탭에서는 최대 3일 동안 푸시 메시지를 기록할 수 있습니다.
- 결제 핸들러 탭을 사용하면 최대 3일 동안 결제 핸들러 이벤트를 기록할 수 있습니다.
- 주기적 백그라운드 동기화 탭을 사용하면 정기적인 백그라운드 동기화 수명 주기 동안 최대 3일 동안 동기화 등록, 백그라운드 동기화 수행, 등록 취소와 같은 주요 이벤트를 기록할 수 있습니다.
- 추측 로드 탭을 사용하면 추측 로드를 디버그할 수 있습니다. 추측 상태, 규칙 집합, 추측 로드 시도를 표시합니다.
- 푸시 메시지 탭을 사용하면 최대 3일 동안 푸시 메시지를 기록하고 기록할 수 있습니다.
- Reporting API 탭에서는 사이트를 모니터링하고 지원 중단된 API 호출과 보안 위반을 보고합니다.
프레임: 페이지와 리소스를 여러 뷰로 나누고 보안 및 격리, 콘텐츠 보안 정책, API 사용 가능 여부와 같은 관련 정보를 표시합니다.
애플리케이션 패널 열기
Application 패널을 열려면 다음 단계를 따르세요.
- DevTools를 엽니다.
- 다음을 눌러 명령어 메뉴를 엽니다.
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
application를 입력하기 시작하고 Show Application을 선택한 다음 Enter를 누릅니다. DevTools에서 DevTools 창 상단에 Application 패널을 표시합니다.
또는 다음과 같은 방법으로 Application 패널을 열 수 있습니다.
- 상단의 작업 표시줄에서 double_arrow 패널 더보기를 클릭하고 드롭다운 목록에서 애플리케이션을 선택합니다.
- 오른쪽 상단에서 more_vert 옵션 더보기 > 도구 더보기 > 애플리케이션을 선택합니다.