検索
連載

【Google Chrome】CookieのSameSite属性などをデベロッパーツールで確認するGoogle Chrome完全ガイド

Webサイト/アプリでよく使われている「Cookie」。トラブルが生じたらWeb担当者にとっては一大事です。ユーザーとしても不審なCookieがないか気になるところです。そこでGoogle ChromeのデベロッパーツールでCookieの状態を簡単に確認する方法を紹介します。

PC用表示 関連情報
Share
Tweet
LINE
Hatena
「Google Chrome完全ガイド」のインデックス

連載目次

Webサイト/アプリで使われているCookieを調べたい!
Webサイト/アプリで使われているCookieを調べたい!

Webサイト/アプリで使われているCookieを手軽に調べたい!

 WebサイトやWebアプリでは、ユーザー認証(ログイン)や買い物かご(カート)といった機能を実現するために、「Cookie(クッキー)」がよく利用されています。そのため、当然ながらCookieがWebブラウザやWebサーバなどで正しく取り扱われないと、それらの機能は誤動作してしまいます。

 もしCookieのせいと思われる問題が生じた場合、Cookieについて詳しく調べる必要があります。そのようなとき、「Google Chrome」(以下、Chromeと略)のデスクトップ版に標準装備されている「デベロッパーツール」を活用すると、手軽にCookieについて確認できます。本稿では主にWebサーバ/サイトの担当者を対象として、その手順を紹介します。仕様が変更されたSameSite属性の問題を見つける方法についても触れます。

ChromeのデベロッパーツールでCookieを確認するには

 まずChromeのデベロッパーツールを開きます。それには、右上隅のメニューアイコンをクリックし、[その他のツール]−[デベロッパーツール]をクリックします。あるいは以下のショートカットキーでも起動できます。

  • Windows OS: [F12]キーまたは[Ctrl]+[Shift]+[I]キー
  • macOS: [option]+[command]+[I]キー
デベロッパーツールを開く
デベロッパーツールを開く

 デベロッパーツールのペインまたはウィンドウが現れたら、[Application]タブを選びます。次に左ペインのメニューで[Storage]−[Cookies]を展開し、その下に表示されたアクセス先(オリジン)の一覧から一つ選択します。すると右ペインにCookieの一覧が表示されます。

デベロッパーツールでCookieを確認する
デベロッパーツールでCookieを確認する

 Cookieをクリックして選択すると、下側のペインにそのCookieの値が表示されます。

 また見出しの各カラムをクリックすると、そのカラムで昇順/降順の並び替えができます。

 多数のCookieから文字列で検索して絞り込むには、フィルタ欄に文字列を入力していきます。ヒットしたCookieがリアルタイムで一覧に表示されます(ヒットしなかったCookieが消えます)。

Cookieを絞り込んで表示する
Cookieを絞り込んで表示する

 フィルタの検索対象は名前(Name)と値(Value)、ドメイン(Domain)、パス(Path)です。

ChromeのデベロッパーツールでCookieを編集するには

 デベロッパーツールの[Application]タブに表示されたCookie一覧では、Cookieを改変することもできます。それには対象のCookieの各カラムをダブルクリックして編集状態にします。あとは書き換えて[Enter]キーを押すだけです。

Copyright© Digital Advantage Corp. All Rights Reserved.

ページトップに戻る