HTTP Cookie は、主にユーザー セッションの管理、ユーザーのパーソナライズ設定の保存、ユーザーの行動のトラッキングに使用されます。また、ウェブ上でよく見かける「このページでは Cookie を使用しています」という同意フォームも、Cookie が原因で表示されます。このガイドでは、Chrome DevTools を使用してページの Cookie を表示、追加、編集、削除する方法について説明します。
[Cookie] ペインを開く
- Chrome DevTools を開きます。
- [アプリケーション] > [ストレージ] > [Cookie] を開き、送信元を選択します。
フィールド
[Cookie] テーブルには次のフィールドがあります。
- 名前: Cookie の名前。
- 値。Cookie の値。
- ドメイン。Cookie の受信が許可されているホスト。
- パス。
Cookieヘッダーを送信するために、リクエストされた URL に存在する必要がある URL。 - 有効期限 / Max-Age。Cookie の有効期限または残存期間。セッション Cookie の場合、この値は常に
Sessionです。 - サイズ。Cookie のサイズ（バイト単位）。
- HttpOnly。true の場合、このフィールドは、Cookie を HTTP でのみ使用する必要があり、JavaScript の変更は許可されないことを示します。
- 安全性。true の場合、このフィールドは、Cookie を安全な HTTPS 接続経由でのみサーバーに送信できることを示します。
- SameSite。Cookie が試験運用版の
SameSite属性を使用している場合は、StrictまたはLaxが含まれます。 - パーティション キー。独立したパーティション状態の Cookie の場合、パーティション キーは、Cookie を設定したエンドポイントへのリクエストの開始時にブラウザがアクセスしていたトップレベル URL のサイトになります。
- 優先度。
Low、Medium（デフォルト）、または非推奨の Cookie Priority 属性を使用する場合はHighが含まれます。
Cookie の値を表示するには、表で Cookie を選択します。パーセント エンコードなしの値を表示するには、 [デコードされた URL を表示] をオンにします。
Cookie をフィルタ
[フィルタ] ボックスを使用して、Cookie を [名前] または [値] でフィルタします。
他のフィールドによるフィルタリングはサポートされていません。フィルタでは大文字と小文字が区別されません。
Cookie を追加する
任意の Cookie を追加するには:
- 表内の空の行をダブルクリックします。
- 名前と値を入力し、Enter キーを押します。
その他の必須フィールドは DevTools によって自動的に入力されます。これらは次に説明するように編集できます。
Cookie を編集する
自動更新される [サイズ] を除くすべてのフィールドを編集できます。
フィールドをダブルクリックして編集します。
DevTools では、無効なフィールド値を持つ Cookie が赤色でハイライト表示されます。
有効な Cookie を除外するには、上部のアクションバーで [ 問題のある Cookie のみを表示] をオンにします。
Cookie
クッキーを削除するには、クッキーを選択して、上部のアクションバーにある [選択した項目を削除] をクリックします。
[すべて消去] をクリックして、すべての Cookie を削除します。
サードパーティ Cookie を特定して検査する
サードパーティ Cookie は、現在のトップレベル ページとは異なるサイトによって設定される Cookie です。サードパーティ Cookie には SameSite=None 属性があります。
DevTools の [Application] > [Storage] > [Cookies] にこのような Cookie が表示され、その横に警告アイコンが表示されます。アイコンにカーソルを合わせるとツールチップが表示されます。アイコンをクリックすると [問題] パネルに移動し、詳細を確認できます。
サードパーティ Cookie は、[ネットワーク] > [リクエストをクリック] > [Cookie] で確認することもできます。
[ネットワーク] パネルでは、問題のある Cookie がハイライト表示され、サードパーティ Cookie の段階的な廃止の影響を受ける Cookie の横にアイコンが表示されます。