개발자 도구 - Application Panel

Application Panel

웹 브라우저의 개발자 도구(DevTools) 에서 제공하는 패널 중,

웹 어플리케이션의 리소스와 데이터 관리,

즉 웹 브라우저가 애플리케이션의 데이터를 저장하고 관리하는 방식을 이해하고

이를 디버깅하거나 최적화하는 작업을 의미한다.

 

이 패널은 웹 앱의 저장소, 네트워크 관련 데이터, 백엔드 통신, 캐싱 정책등을

검사하고 관리할 수 있는 강력한 기능을 제공한다.

 

웹 애플리케이션에서 "리소스"와 "데이터"

 

리소스 

- 애플리케이션을 구성하는 정적 및 동적 파일

- HTML, CSS, JavaSciprt파일

- 이미자, 비디오, 오디오 파일

- 폰트, 아이콘 

- API 요청 결과(AJAX 응답 등)

 

데이터

- 애플리케이션이 사용자의 브라우저에 저장하거나 클라이언트-서버 간에 교환하는 정보

- 사용자 설정(예: 테마, 언어)

- 상태 데이터(예: 로그인 정보, 쇼핑 카트)

- 캐시된 API 응답 데이터

 

Application Panel 주요 섹션과 기능

1.Storage(저장소)

웹 어플리케이션에서 사용되는 다양한 저장소를 확인하고 조작할 수 있다.

 

Local Storage

Session Storage

Cookies

IndexedDB

Web SQL

Cache Storage

Application Cache

 

2.Background Service

웹 애플리케이션의 백그라운드 작업을 관리한다.

 

Service Workers

Background Fetch

Background Sync

3.Frames

웹 애플리케이션에 포함된 모든 프레임과 IFrame에 대해 리소스를 검사한다.

4.Manifest

PWA(Progressive Web App) 애플리케이션의 manifest.json파일을 확인한다.