【Google Chrome】CookieのSameSite属性などをデベロッパーツールで確認する：Google Chrome完全ガイド
Webサイト／アプリでよく使われている「Cookie」。トラブルが生じたらWeb担当者にとっては一大事です。ユーザーとしても不審なCookieがないか気になるところです。そこでGoogle Chromeのデベロッパーツールで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が消えます）。
フィルタの検索対象は名前（Name）と値（Value）、ドメイン（Domain）、パス（Path）です。
ChromeのデベロッパーツールでCookieを編集するには
デベロッパーツールの［Application］タブに表示されたCookie一覧では、Cookieを改変することもできます。それには対象のCookieの各カラムをダブルクリックして編集状態にします。あとは書き換えて［Enter］キーを押すだけです。
Copyright© Digital Advantage Corp. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。