Cookie を表示、追加、編集、削除する

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

HTTP Cookie は、主にユーザー セッションの管理、ユーザーのカスタマイズ設定の保存、ユーザーの行動の追跡に使用されます。また、ウェブ全体で表示される「このページでは Cookie を使用しています」という煩わしい同意フォームの原因にもなっています。このガイドでは、Chrome DevTools を使用してページの Cookie を表示、追加、編集、削除する方法について説明します。

[Cookie] ペインを開く

  1. Chrome DevTools を開きます。
  2. [アプリケーション] > [ストレージ] > [Cookie] を開き、オリジンを選択します。

[Cookie] ペイン。

フィールド

Cookies テーブルには次のフィールドが含まれています。

  • 名前: Cookie の名前。
  • 値。Cookie の値。
  • ドメイン。Cookie の受信を許可されているホスト。
  • パス。Cookie ヘッダーを送信するためにリクエストされた URL に存在する必要がある URL。
  • Expires / Max-Age。Cookie の有効期限または最大有効期間。セッション Cookie の場合、この値は常に Session です。
  • サイズ。Cookie のサイズ（バイト単位）。
  • HttpOnly。true の場合、このフィールドは、Cookie を HTTP 経由でのみ使用し、JavaScript による変更を許可しないことを示します。
  • 安全性。true の場合、このフィールドは、Cookie を安全な HTTPS 接続でのみサーバーに送信できることを示します。
  • SameSite。Cookie が試験運用版の SameSite 属性を使用している場合は、Strict または Lax が含まれます。
  • パーティション キー。独立したパーティション状態を持つ Cookie の場合、パーティション キーは、Cookie を設定したエンドポイントへのリクエストの開始時にブラウザがアクセスしていたトップレベル URL のサイトになります。
  • 優先度。非推奨の cookie Priority 属性を使用している場合は、Low、Medium（デフォルト）、または High が含まれます。

Cookie の値を表示するには、表で Cookie を選択します。パーセント エンコードなしで値を確認するには、 [デコードされた URL を表示] をオンにします。

Cookie をフィルタする

[フィルタ] ボックスを使用して、[名前] または [値] で Cookie をフィルタします。

「id」を含まない Cookie を除外します。

他のフィールドによるフィルタリングは対象外です。フィルタでは大文字と小文字は区別されません。

任意の Cookie を追加するには:

  1. 表の空の行をダブルクリックします。
  2. [名前] と [値] を入力して、Enter キーを押します。

DevTools は、他の必須フィールドを自動的に入力します。これらは、次に説明するように編集できます。

Cookie を編集する

[サイズ] 以外のすべてのフィールドは編集可能です。このフィールドは自動的に更新されます。

フィールドをダブルクリックして編集します。

Cookie の名前を「DEVTOOLS!」に設定する

DevTools では、無効なフィールド値を持つ Cookie が赤でハイライト表示されます。

Partition Key の値が無効な Cookie。

有効な Cookie を除外するには、上部のアクションバーで [問題のある Cookie のみを表示] をオンにします。

Cookie

Cookie を削除するには、Cookie を選択して、上部のアクションバーにある [選択した項目を削除] をクリックします。

選択した Cookie を削除しています。

[すべてクリア] をクリックして、すべての Cookie を削除します。

すべての Cookie を消去します。

サードパーティ Cookie を特定して検査する

サードパーティ Cookie は、現在のトップレベル ページとは異なるサイトによって設定される Cookie です。サードパーティ Cookie には SameSite=None 属性があります。

DevTools では、このような Cookie は [Application] > [Storage] > [Cookies] に表示され、その横にアイコンが表示されます。アイコンにカーソルを合わせるとツールチップが表示されます。アイコンをクリックすると、[問題] パネルに移動して詳細を確認できます。

[ストレージ] セクションで SameSite=None 属性が設定されている Cookie。

サードパーティ Cookie は、[ネットワーク] > リクエストをクリック > [Cookie] でも確認できます。

[ネットワーク] パネルで SameSite=None 属性が設定された Cookie。

[ネットワーク] パネルでは、問題のある Cookie がハイライト表示され、サードパーティ Cookie を利用できない場合に影響を受ける Cookie の横にアイコンが表示されます。