【Edge】保存済みCookieの中身を開発者ツールで確認・編集する手順

ウェブサイト開発やデバッグの業務で、Edgeに保存されたCookieの詳細を確認したり、一時的に内容を変更したりする必要はありませんか。

Cookieはユーザーのセッション維持やパーソナライズされた体験に不可欠な要素ですが、その中身を直接操作する方法を知らない方もいるかもしれません。

この記事では、Edgeの開発者ツールを使って保存済みCookieの内容を詳細に確認し、必要に応じて編集・削除する具体的な手順を解説します。

EdgeのCookieと開発者ツールの役割

Cookieとは、ウェブサイトがユーザーのブラウザに保存する小さなデータファイルのことです。このデータは、ユーザーのログイン状態の維持、ショッピングカートの内容、閲覧履歴、サイトの設定など、様々な情報を記憶するために利用されます。Cookieがあることで、ウェブサイトはユーザーごとにパーソナライズされた体験を提供できます。

Edgeの開発者ツール Developer Tools は、ウェブサイトのデバッグや分析を行うための強力な機能群です。要素の検証、ネットワーク通信の監視、JavaScriptのデバッグなど多岐にわたる機能を提供します。その中でも「アプリケーション」タブは、Cookieやローカルストレージなど、ブラウザに保存されたデータを管理するために特化しています。開発者ツールを利用することで、ウェブサイトの動作に影響を与えるCookieの挙動を詳細に把握し、問題解決に役立てることができます。

Edgeの開発者ツールでCookieを確認・編集する手順

ここでは、Windows 11上のEdge最新版を基準に、開発者ツールを使ってCookieを確認・編集する具体的な手順を説明します。Windows 10の場合も同様の操作で実行できます。

開発者ツールを起動する

1. Edgeを起動し対象サイトへアクセスする
   確認または編集したいCookieが存在するウェブサイトをEdgeで開きます。
2. 開発者ツールを開く
   以下のいずれかの方法で開発者ツールを起動します。
   • キーボードのF12キーを押す。
   • ウェブページ上の任意の場所を右クリックし、表示されるメニューから「検証」を選択する。
   • Edgeの右上にある「設定など」のメニューアイコン(3つの点)をクリックし、「その他のツール」から「開発者ツール」を選択する。

保存済みCookieの内容を確認する

1. 「アプリケーション」タブを選択する
   開発者ツールが起動したら、上部のタブメニューから「アプリケーション」をクリックして選択します。
2. Cookieセクションを展開する
   左側のメニューツリーで、「ストレージ」の下にある「Cookie」を展開し、確認したいドメインを選択します。通常は現在開いているウェブサイトのドメインが表示されます。
3. Cookieの詳細を確認する
   右側のペインに、選択したドメインに保存されているCookieの一覧が表示されます。各Cookieの名前 Name 、値 Value 、ドメイン Domain 、パス Path 、有効期限 Expires/Max-Age 、サイズ Size 、HTTP Only、Secure、SameSiteなどの属性を確認できます。

Cookieの値を編集・削除する

1. Cookieの値を編集する
   編集したいCookieの「値 Value 」のセルをダブルクリックします。新しい値を入力し、Enterキーを押して変更を適用します。
2. 新しいCookieを追加する
   Cookie一覧の最下部にある空白行をクリックすると、新しいCookieの行が追加されます。各属性(名前、値、ドメイン、パスなど)を入力し、Enterキーを押して追加します。
3. Cookieを削除する
   削除したいCookieを右クリックし、表示されるコンテキストメニューから「削除」を選択します。または、削除したいCookieを選択した状態で、ツールバーの「選択したCookieを削除」アイコン(ゴミ箱のマーク)をクリックします。
4. すべてのCookieを削除する
   特定のドメインのすべてのCookieを削除したい場合は、ツールバーの「すべてのCookieを削除」アイコン(禁止マーク)をクリックします。

Cookie操作時の注意点とよくある誤操作

開発者ツールでのCookie操作は強力ですが、誤った操作はウェブサイトの機能に影響を与える可能性があります。以下の点に注意してください。

Cookieが変更できない、またはすぐに元に戻ってしまう場合

開発者ツールでCookieの値を変更しても、すぐに元の値に戻ってしまうことがあります。これは、ウェブサイトのサーバー側がページ読み込み時やJavaScriptの実行によって、Cookieを再度設定しているためです。この場合、変更は一時的なものとして扱われ、サーバーからのレスポンスで上書きされてしまいます。

1. 原因の特定
   開発者ツールの「ネットワーク」タブで、ページの読み込みやXHRリクエストを監視し、どのリクエストのレスポンスヘッダーにSet-Cookieが含まれているかを確認します。
2. JavaScriptのデバッグ
   「ソース」タブでJavaScriptのブレークポイントを設定し、Cookieを設定しているスクリプトの実行を一時停止して検証します。

プライベートモードや特定のサイトでCookieが表示されない場合

Edgeのプライベートモード InPrivateウィンドウ では、セッション終了時にすべてのCookieが自動的に削除されます。そのため、プライベートモードで開いたサイトのCookieは、開発者ツールで確認しても永続的に残りません。また、一部のサイトではサードパーティCookieがブロックされている場合があります。

1. 通常モードでの確認
   プライベートモードを使用している場合は、通常のウィンドウで同じサイトを開き、Cookieを確認してください。
2. サードパーティCookieの設定確認
   Edgeの設定でサードパーティCookieのブロックが有効になっていないか確認します。
   • アドレスバーに edge://settings/privacy と入力し、Enterキーを押します。
   • 「追跡防止」や「Cookieとサイトのアクセス許可」の項目を確認し、必要に応じて設定を調整します。

重要なCookieを誤って削除してしまった場合

ウェブサイトのセッション維持に必要なCookieや、ログイン状態を保持するCookieを誤って削除してしまうと、サイトからログアウトされたり、機能が正常に動作しなくなったりする可能性があります。

1. ページの再読み込み
   ほとんどの場合、ページを再読み込みするか、再度ログイン操作を行うことで、必要なCookieが再生成されます。
2. サイトの再訪
   一度サイトを閉じてから再度アクセスすることで、初期状態のCookieが設定されることがあります。

Cookie管理方法の比較: 開発者ツールとEdgeの設定

EdgeのCookie管理には、開発者ツールを利用する方法と、Edgeのブラウザ設定を利用する方法があります。それぞれの特徴を理解して使い分けましょう。

Edgeの開発者ツールを使ってCookieの確認と編集を行う手順を解説しました。

この操作を習得することで、ウェブサイトのデバッグ作業や機能検証の効率を大幅に向上できます。

Cookieだけでなく、開発者ツールではローカルストレージやセッションストレージといった他のクライアントサイドストレージも同様に確認・編集できますので、ぜひ活用してみてください。