Google ChromeのデベロッパーツールでCookieを確認する方法

CookieはWebブラウザに保存することができるテキストデータです。

この記事ではWebブラウザに保存されているCookieをGoogle Chromeのデベロッパーツールで確認する方法について図を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

Google ChromeのデベロッパーツールでCookieを確認する方法

Google ChromeのデベロッパーツールでCookieを確認する手順を以下に示します。

各手順について順番に説明します。

Google Chromeのデベロッパーツールを起動する

Windowsの場合、Cookieを確認したい対象のWebページを表示した状態で、Google Chromeを開き、「F12」または「Ctrl」+「Shift」+「I」を押すと、Google Chromeのデベロッパーツールが起動します(Macの場合、「option」+「command」＋「I」を押します)。

[Application]タブに移動する

Google Chromeのデベロッパーツールの上部にあるタブの中から「Application」をクリックして、[Application]タブに移動します。

Cookieを確認する

左のサイドバーにある「Storage」セクションを探し、その中の「Cookies」を展開して、Cookieを確認したいサイトのURLをクリックします。

クリックすると、右側の画面上に、保存されているCookieの一覧がNameとValueの組み合わせで表示されます。

• Name
  • Cookieの名前です。
• Value
  • Cookieの値です。

Cookieの属性を確認する

NAMEとVALUEの組み合わせの右側には、Cookieで設定できる属性が表示されています。

各属性の意味を以下に示します。

• Domain
  • Cookieが関連付けられているドメインです。
  • Domain属性により、どのドメインがCookieにアクセスできるかが決まります。
• Path
  • Cookieが有効になるパスです。
  • パスが「/」の場合、そのドメインの全てのページでCookieが有効になります。
• Expires/Max-Age
  • Cookieの有効期限です。
• Size
  • Cookieのサイズ(バイト単位)です。
• HttpOnly
  • HttpOnly属性がセットされている場合、JavaScriptを通じてのCookieへのアクセスが禁止されます。
  • HttpOnly属性は、クロスサイトスクリプティング(XSS)攻撃から保護するために使用されます。
• Secure
  • Secure属性がセットされている場合、CookieはHTTPS接続時のみ送信されます。
• SameSite
  • ブラウザがCookieをクロスサイトリクエストとともに送信するかどうかを制御します。
  • 設定できる属性値はStrict、Lax、Noneのいずれかです。
  • クロスサイト・リクエスト・フォージェリ(CSR)攻撃を防ぐのに役立ちます。