Chrome DevToolsでCookieを検査・編集する方法
認証が機能しない、セッションが予期せず期限切れになる、またはクライアント側の状態が奇妙な動作をする場合、Cookieは通常、最初に確認すべき場所です。Chrome DevToolsを使用すると、ページが設定するすべてのCookieを直接表示でき、コードを一行も書かずに変更できます。
ここでは、開発中にChrome DevToolsのCookieパネルを使用してCookieを検査、追加、編集、削除する正確な方法を説明します。
重要なポイント
- Chrome DevToolsのApplication → Storage → CookiesからCookieパネルにアクセスし、特定のオリジンのすべてのCookieを表示できます。
- 各Cookieの行には、Domain、Path、SameSite、HttpOnly、Secureなどの重要なフィールドが表示されます。これらを理解することは、認証とセッションの問題をデバッグする上で不可欠です。
- Applicationパネルで直接、コードを書かずにCookieの追加、編集、削除ができます。
- NetworkパネルのCookiesタブを使用して、HTTPレベルで実際にリクエストで送信され、レスポンスで受信されるCookieを確認できます。
- サードパーティCookieはApplicationパネルで警告アイコン付きで表示され、ブラウザのプライバシー制限が厳しくなる中、クロスサイトCookieの問題を特定するのに役立ちます。
Chrome DevTools Cookieパネルを開く
F12(Windows/Linux)またはCmd + Option + I(Mac)でChrome DevToolsを開きます。- Applicationタブをクリックします。
- 左サイドバーでStorage → Cookiesを展開します。
- オリジンを選択してそのCookieを表示します。
そのオリジンに関連付けられたすべてのCookieを一覧表示するテーブルが表示されます。
Cookieフィールドの理解
Cookieテーブルの各行は1つのCookieを表します。各列の意味と、Chrome DevToolsでCookieをデバッグする際に重要な理由は次のとおりです。
| フィールド | 意味 |
|---|---|
| Name | Cookieのキー |
| Value | 保存されたデータ(Show URL-decodedをチェックしてパーセントエンコードされた値をデコード) |
| Domain | このCookieを受信するホスト — .example.comはサブドメインを含み、sub.example.comは含まない |
| Path | ブラウザがCookieを送信するために必要なURLパスのスコープ |
| Expires / Max-Age | 有効期限、またはブラウザセッション終了時にクリアされるCookieの場合はSession |
| Size | Cookieのサイズ(バイト単位)(自動計算、編集不可) |
| HttpOnly | チェックされている場合、JavaScriptはこのCookieを読み取れません — DevToolsまたはNetworkパネル経由でのみ表示可能 |
| Secure | チェックされている場合、CookieはHTTPS経由でのみ送信されます |
| SameSite | Strict、Lax、またはNone — クロスサイト送信動作を制御 |
| Partition Key | パーティション化されたCookie(CHIPS)に存在 — このCookieのストレージパーティションを所有するトップレベルサイトを表示 |
ページが多くのCookieを設定する場合は、Filterボックスを使用して名前または値で検索します。パーティション化されたCookie(CHIPS)は新しいブラウザプライバシーモデルの一部であり、そのサポート状況はhttps://webstatus.dev/features/partitioned-cookiesで追跡できます。
Cookieの追加、編集、削除方法
Cookieの追加:
- テーブルの下部にある空の行をダブルクリックします。
- 名前と値を入力し、
Enterを押します。 - DevToolsは他のフィールドのデフォルト値を自動的に入力します。
Cookieの編集:
- 任意のフィールドをダブルクリックしてインラインで編集します。
- Sizeフィールドは自動的に更新されます — それ以外はすべて編集可能です。
- DevToolsは無効な値を赤色で強調表示します。
- Only show cookies with an issueを使用して有効なエントリを除外し、問題に焦点を当てます。
Cookieの削除:
- Cookie行を選択し、アクションバーのDelete selectedをクリックします。
- Clear allをクリックして、選択したオリジンのすべてのCookieを削除します。
これは、ログインフローをテストする際に特に便利です。セッションCookieを手動で期限切れにしたり、トークン値を変更したりして、アプリケーションがエッジケースをどのように処理するかを確認できます。
Discover how at OpenReplay.com.
NetworkパネルでCookieヘッダーをデバッグする
ApplicationパネルはCookieを編集するためのワークスペースです。Networkパネルは、実際に送受信されているものを確認する場所です。
Networkパネルを開き、任意のリクエストをクリックして、Cookiesタブを選択します。2つのセクションが表示されます。
- Request Cookies — ブラウザがサーバーに送信したもの。
- Response Cookies — サーバーが
Set-Cookieヘッダー経由でブラウザに設定するよう指示したもの。
この区別は重要です。なぜなら、JavaScriptはSet-Cookieレスポンスヘッダーを直接読み取ることができないからです。ログイン後にCookieが表示されない場合は、まずNetworkパネルを確認して、サーバーが実際に設定していることを確認してください。Set-Cookieヘッダーの動作はMDN Set-Cookieリファレンスに記載されています。
サードパーティCookieの識別
Applicationパネルでは、サードパーティCookie(現在のトップレベルページとは異なるドメインによって設定されたCookie)は警告アイコン付きで表示されます。これらのCookieは通常、SameSite=Noneを持ち、Secure属性が必要です。アイコンにカーソルを合わせると詳細が表示されます。最新のChrome DevToolsでは、Cookieプライバシー警告と関連する診断がConsoleに直接表示される場合もあります。
ブラウザのプライバシーポリシーが進化し続ける中、Chromeやその他のブラウザはサードパーティCookieの動作をますます制限しています。これらの制限下でサイトのCookie動作をテストすることは、定期的なデバッグワークフローに組み込む価値があります。
まとめ
Chrome DevToolsのCookieパネルは、ブラウザを離れることなくCookieを検査・編集するために必要なすべてを提供します。ストレージの検査と手動編集にはApplicationパネルを使用します。HTTPレベルで実際に送受信されているCookieを確認するにはNetworkパネルを使用します。これら2つのパネルを組み合わせることで、認証、セッション、クライアント側の状態管理のための完全なCookieデバッグワークフローをカバーできます。
Chrome DevToolsでCookieと関連属性がどのように公開されるかについてのより詳細なリファレンス資料が必要な場合は、公式のChrome DevTools Cookieデバッグガイドを参照してください。
よくある質問
サーバーがSet-Cookieヘッダーを正しく送信していないか、CookieのDomainまたはPath属性が現在のページと一致していない可能性があります。Networkパネルを開き、ログインリクエストを見つけて、Response Cookiesタブでヘッダーが存在し、正しく形成されているか確認してください。
SessionのCookieにはExpiresまたはMax-Age値がなく、有効期限列にSessionと表示されます。ブラウザセッション終了時に削除されます。永続的なCookieには特定の有効期限があり、その日付が過ぎるか、Cookieが手動で削除されるまで保存されます。
警告アイコンは通常、サードパーティCookie、またはSameSite属性が欠落しているか誤って設定されているCookieを示します。アイコンにカーソルを合わせると概要が表示され、追加の診断がDevTools Consoleに表示される場合があります。
いいえ。HttpOnly Cookieは設計上、JavaScriptからアクセスできません。これにより、クロスサイトスクリプティング攻撃から保護されます。ただし、Chrome DevTools Applicationパネルで関連フィールドをダブルクリックすることで、直接表示および編集できます。
Gain control over your UX
See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
