쿠키 보기, 추가, 수정 및 삭제

Sofia Emelianova
Sofia Emelianova

HTTP 쿠키는 주로 사용자 세션을 관리하고, 사용자 맞춤설정 환경설정을 저장하고, 사용자 행동을 추적할 수 있습니다 또한 쿠키 때문에 '이 페이지에서 쿠키를 사용'한다는 성가신 문제가 동의 양식을 사용할 수 있습니다. 이 가이드에서는 페이지의 쿠키를 설정하는 방법을 설명합니다.

쿠키 창 열기

  1. Chrome DevTools를 엽니다.
  2. 응용 프로그램을 엽니다. 스토리지 > Cookies(쿠키)를 클릭하고 출처를 선택합니다.

쿠키 창

필드

Cookies 테이블에는 다음과 같은 필드가 있습니다.

  • 이름. 쿠키의 이름입니다.
  • . 쿠키의 값입니다.
  • 도메인. 쿠키를 수신하도록 허용된 호스트입니다.
  • 경로 - Cookie 헤더를 전송하기 위해 요청된 URL에 있어야 하는 URL입니다.
  • 만료 / 최대 기간. 쿠키의 만료일 또는 최대 기간입니다. 세션 쿠키의 경우 이 값은 항상 Session입니다.
  • Size(크기). 쿠키의 크기(바이트)입니다.
  • HttpOnly. true인 경우 이 필드는 쿠키가 HTTP를 통해서만 사용되어야 함을 나타냅니다. JavaScript 수정은 허용되지 않습니다.
  • 보안. true인 경우 이 필드는 해당 쿠키를 통해서만 쿠키를 서버로 보낼 수 있음을 나타냅니다. 안전하게 HTTPS 연결을 제공합니다.
  • SameSite입니다. 쿠키가 실험용 SameSite를 사용하는 경우 Strict 또는 Lax를 포함합니다. 속성
  • 파티션 키. 독립적인 파티션 상태를 가진 쿠키의 경우 파티션 키는 쿠키를 설정하는 엔드포인트에 대한 요청 시작 시 브라우저가 방문한 최상위 URL의 사이트입니다.
  • 우선순위. 지원 중단된 쿠키를 사용하는 경우 Low, Medium (기본값) 또는 High가 포함됩니다. Priority 속성을 선택합니다.

쿠키의 값을 보려면 표에서 쿠키 값을 선택합니다. 퍼센트 인코딩을 사용하지 않고 값을 보려면 URL 디코딩됨 표시를 선택합니다.

쿠키 필터링

이름 또는 을 기준으로 쿠키를 필터링하려면 필터 상자를 사용합니다.

'id'를 포함하지 않는 쿠키 필터링

다른 필드별 필터링은 지원되지 않습니다. 필터는 대소문자를 구분하지 않습니다.

임의의 쿠키를 추가하는 방법은 다음과 같습니다.

  1. 표에서 빈 행을 더블클릭합니다.
  2. 이름을 입력하고 Enter 키를 누릅니다.

DevTools가 다른 필수 필드를 자동으로 채웁니다. 아래에 설명된 대로 수정할 수 있습니다.

쿠키 수정

자동으로 업데이트되는 크기를 제외하고 모든 필드를 수정할 수 있습니다.

입력란을 더블클릭하여 수정합니다.

쿠키 이름을 'DEVTOOLS!'로 설정

DevTools는 잘못된 필드 값이 있는 쿠키를 빨간색으로 강조 표시합니다.

파티션 키 값이 잘못된 쿠키입니다.

유효한 쿠키를 필터링하려면 상단 작업 모음에서 문제가 있는 쿠키만 표시를 선택합니다.

쿠키 삭제

쿠키를 삭제하려면 쿠키를 선택한 후 상단의 작업 표시줄에서 선택 항목 삭제를 클릭합니다.

선택된 쿠키를 삭제하는 중입니다.

모두 지우기를 클릭하여 쿠키를 모두 삭제합니다.

모든 쿠키를 삭제하는 중입니다.

서드 파티 쿠키 식별 및 검사

서드 파티 쿠키는 현재 최상위 수준 페이지와 다른 사이트에 의해 설정된 쿠키입니다. 서드 파티 쿠키에는 SameSite=None 속성이 있습니다.

DevTools는 이러한 쿠키를 애플리케이션 > 스토리지 > 쿠키를 보고 그 옆에 경고 경고 아이콘이 표시됩니다. 아이콘 위로 마우스를 가져가면 도움말이 표시되고, 클릭하여 문제 패널로 이동하여 자세한 내용을 확인할 수 있습니다.

저장소 섹션에 SameSite=None 속성이 있는 쿠키

네트워크 > 클릭 요청 > 쿠키.

Network 패널에 SameSite=None 속성이 있는 쿠키

네트워크 패널에 문제가 있는 쿠키가 강조 표시되고 서드 파티 쿠키의 단계적 지원 중단의 영향을 받은 쿠키 옆에 경고 경고 아이콘이 표시됩니다.