Cookie Editorは、現在のドメインのすべてのcookieを、整理されたソート可能なテーブルに表示します。cookie名・値・有効期限・パス・セキュリティフラグ(HttpOnly、Secure、SameSite)を確認できます。値をインラインで編集したり、カスタムパラメータで新しいcookieを追加したり、個別または一括削除が可能です。認証・session・同意フローのデバッグに欠かせないツールです。
cookieは認証・session管理・ユーザー設定・同意トラッキング・分析・A/Bテストを担いますが、開発中にそれらを管理するのは手間がかかります。Chrome DevToolsではApplicationタブでcookieを確認できますが、インターフェースは基本的で複数のパネルを移動する必要があります。Cookie Editorは、現在のドメインのすべてのcookieとそのプロパティを一目で確認できる、すっきりした1つのテーブルに集約します。値セルをクリックすればインラインで編集でき、変更はブラウザのcookieストアに即時保存されます。カスタムの名前・値・有効期限・パス・フラグを指定して新しいcookieを追加することもできます。cookieを個別に削除したり、まとめてクリアしたりすることも可能です。テーブルにはセキュリティフラグバッジ(SはSecure、HはHttpOnly)が表示されるため、機密cookieに適切な保護が設定されているか確認できます。session cookieと永続cookieは有効期限列で区別されます。ブラウザのDevToolsに標準搭載してほしかった、まさにそのツールです。
現在のドメインのすべてのcookieが、名前・値・有効期限(または「Session」)・パス・フラグの列を持つソート可能なテーブルに表示されます。すっきりとしたデザインで、すべてのcookieを一目で把握できます。
任意のcookie値をクリックしてその場で編集できます。新しい値を入力するとブラウザのcookieストアに即時保存されます。cookieを削除して再作成する必要はなく、値を直接変更するだけです。
「追加」をクリックして、カスタムの名前・値・有効期限・パス・domainを指定した新しいcookieを作成できます。Secure、HttpOnly、SameSiteフラグも設定可能です。cookieはブラウザのcookieストアに即時作成されます。
削除ボタンをクリックして個別のcookieを削除するか、「すべて削除」で現在のドメインのすべてのcookieをクリアできます。ログアウト状態や同意フローのテストに便利です。
視覚的なバッジでセキュリティフラグを示します:S(Secure — HTTPSのみ)、H(HttpOnly — JavaScriptからアクセス不可)、SameSiteの値(Strict、Lax、None)。機密cookieに適切な保護が設定されているか一目で確認できます。
有効期限列により、session cookie(「Session」— ブラウザを閉じると削除)と永続cookie(実際の有効期限と時刻を表示)が明確に区別されます。cookieの有効期間について曖昧さはありません。
ログイン後にsession cookieが正しく設定されているか確認します。sessionトークンを編集して、期限切れや無効なsessionの処理をテストします。session cookieを削除してログアウト状態をテストします。
同意cookieを削除してcookie同意バナーを再表示させます。同意値を編集して、さまざまな同意状態(すべて承認・一部承認・すべて拒否)をテストします。
認証cookieにHttpOnly(XSS盗難防止)、Secure(HTTPSのみ)、SameSite=StrictまたはLax(CSRF防止)が設定されているか確認します。不足しているフラグはテーブルですぐに確認できます。
通常のユーザーフローを経由せずに、ログイン状態・A/Bテストバリアント・機能フラグの割り当て・ロケール設定をシミュレートするcookieを追加します。
cookieの有効期限を過去の日付に変更してリロードし、サイトが期限切れcookieをどう処理するかテストします。または、session cookieを永続cookieに変更して永続化の動作をテストします。
DevSuite Proのポップアップを開き、Cookie Editorのアイコンをクリックします。現在のドメインのすべてのcookieがテーブルに読み込まれます。
cookieテーブルをスクロールして確認します。列のヘッダーをクリックすると名前・値・有効期限でソートできます。セキュリティフラグバッジにより、どのcookieがSecureおよびHttpOnlyかを確認できます。
値セルをクリックしてインラインで編集します。新しい値を入力するとcookieストアに即時保存されます。変更を反映するにはページのリロードが必要な場合があります。
「追加」をクリックしてパラメータを細かく指定した新しいcookieを作成します。任意の行の削除アイコンをクリックしてそのcookieを削除します。「すべて削除」ですべてをクリアできます。
cookieを編集した後、ページをリロードして変更がサイトに与える影響(ログイン状態・設定・同意バナーなど)を確認します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。