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