HTTP 쿠키는 주로 사용자 세션을 관리하고, 사용자 맞춤설정 환경설정을 저장하고, 사용자 동작을 추적하는 데 사용됩니다. 또한 웹에서 표시되는 모든 성가신 '이 페이지는 쿠키를 사용합니다' 동의 양식의 원인이기도 합니다. 이 가이드에서는 Chrome DevTools를 사용하여 페이지의 쿠키를 보고, 추가하고, 수정하고, 삭제하는 방법을 설명합니다.
쿠키 창 열기
- Chrome DevTools를 엽니다.
- 애플리케이션 > 스토리지 > 쿠키 를 열고 출처를 선택합니다.
필드
쿠키 표에는 다음 필드가 포함되어 있습니다.
- 이름. 쿠키의 이름입니다.
- 값. 쿠키의 값입니다.
- 도메인. 쿠키를 수신할 수 있는 호스트입니다.
- 경로.
Cookie헤더를 전송하려면 요청된 URL에 있어야 하는 URL입니다. - 만료 예정 / 최대 수명. 쿠키의 만료일 또는 최대 수명입니다.
세션 쿠키의 경우 이 값은 항상
Session입니다. - 크기. 쿠키의 크기(바이트)입니다.
- HttpOnly. true인 경우 이 필드는 쿠키가 HTTP를 통해서만 사용되어야 하며 JavaScript 수정이 허용되지 않음을 나타냅니다.
- 보안. true인 경우 이 필드는 쿠키가 보안 HTTPS 연결을 통해서만 서버로 전송될 수 있음을 나타냅니다.
- SameSite. 쿠키가 실험용
SameSite속성을 사용하는 경우Strict또는Lax를 포함합니다. - 파티션 키. 독립 파티션 상태의 쿠키의 경우 파티션 키는 쿠키를 설정한 엔드포인트에 대한 요청이 시작될 때 브라우저가 방문한 최상위 URL의 사이트입니다.
- 우선순위. 지원 중단된 cookie
Priority 속성을 사용하는 경우
Low,Medium(기본값) 또는High를 포함합니다.
쿠키의 값을 보려면 표에서 쿠키를 선택합니다. 퍼센트 인코딩 없이 값을 보려면 디코딩된 URL 표시 를 선택합니다.
쿠키 필터링
필터 상자를 사용하여 이름 또는 값 으로 쿠키를 필터링합니다.
다른 필드를 기준으로 필터링은 지원되지 않습니다. 필터는 대소문자를 구분하지 않습니다.
쿠키 추가
임의 쿠키를 추가하려면 다음 단계를 따르세요.
- 표에서 빈 행을 더블클릭합니다.
- 이름 과 값 을 입력하고 Enter를 누릅니다.
DevTools는 필요한 다른 필드를 자동으로 채웁니다. 다음과 같이 수정할 수 있습니다.
쿠키 수정
모든 필드를 수정할 수 있지만 크기 는 자동으로 업데이트됩니다.
필드를 더블클릭하여 수정합니다.
DevTools는 필드 값이 잘못된 쿠키를 빨간색으로 강조표시합니다.
유효한 쿠키를 필터링하려면 상단 작업 모음에서 문제가 있는 쿠키만 표시 를 선택합니다.
쿠키 삭제
쿠키를 삭제하려면 쿠키를 선택하고 상단 작업 모음에서 선택한 항목 삭제 를 클릭합니다.
**모두 지우기** 를 클릭하여 모든 쿠키를 삭제합니다.
서드 파티 쿠키 식별 및 검사
서드 파티 쿠키는 현재 최상위 페이지와 다른 사이트에서 설정한 쿠키입니다. 서드 파티 쿠키에는 SameSite=None 속성이 있습니다.
DevTools는 애플리케이션 > 스토리지 > 쿠키에 이러한 쿠키를 나열하고 쿠키 옆에 warning 아이콘을 표시합니다. 아이콘 위로 마우스를 가져가면 툴팁이 표시되고 아이콘을 클릭하면 자세한 내용을 볼 수 있는 문제 패널로 이동합니다.
네트워크 > 요청 클릭 > 쿠키 에서 서드 파티 쿠키를 찾을 수도 있습니다.
네트워크 패널은 문제가 있는 쿠키를 강조표시하고 서드 파티 쿠키를 사용할 수 없는 영향을 받는 쿠키 옆에 warning 아이콘을 표시합니다.