IF233 ウェブアプリケーションの開発において、Cookie・セッション管理の理解は基本中の基本です。本記事では、Chrome開発者ツールを活用して、これらの重要な要素を効率的に確認・管理する方法をご紹介します。
Cookie基礎知識
ブラウザのCookieは、ウェブアプリケーションにとって不可欠なデータ保存メカニズムです。ユーザー体験を向上させる多くの機能（ログイン状態の維持、サイト設定の記憶など）の基盤となっています。
Cookieの主な活用シーン
- ユーザー認証情報の保持
- カスタマイズ設定の記録
- アクセス解析とユーザー行動の追跡
- ショッピングカートの管理
開発者ツールでのCookie確認方法（chrome）
Google Chromeの開発者ツールを使ってCookieとセッションの情報を確認する方法を説明します。
Chrome開発者ツールを起動
- キーボードショートカット：F12
- または画面を右クリックして「検証」を選択
Applicationタブへの移動
- 上部メニューバーから「Application」を選択
- 左側メニューから「Storage」→「Cookies」へ進む
Cookie詳細情報の見方
開発者ツールで確認できる主要な情報：
- セキュリティ設定（HttpOnly, Secure）
- Cookie名称と保存値
- 有効範囲（Domain）
- 有効期限情報
- サイズ制限
セッション管理の実践
開発者ツールでのセッション確認
Cookiesセクションでの確認
- PHPSESSIDを探す
- セッションIDの値を確認
「Network」タブで確認
- 開発者ツールの「Network」タブを開きます。
- ページをリロードします。
- リクエストの一覧から任意のものをクリックします。「Headers」セクションで、「Request Headers」の中の「Cookie」を確認できます。「Response Headers」の中の「Set-Cookie」でサーバーからのCookie設定を確認できます。
コンソールを使用したCookie操作
- 開発者ツールの「Console」タブを開きます。
- JavaScriptコンソールでは以下のような操作が可能：
// 現在のCookieを表示
console.log(document.cookie);
// Cookie値の取得
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}