c3

cookie(以下クッキー)を利用した開閉式のニュース欄の話を共同作業者と共有している時に気づいたのですが、制作時にクッキーを気軽にチェックしたり消したりする方法を知らない人がいるようなのでメモ。

利用するのはGoogleChrome(以下クローム)のデベロッパーツール

クロームのデベロッパーツールとは

c-img

デベロッパーツールとは、クローム標準装備の開発ツールです。開発中(もしくは製作中)のサイトをクロームで開き、右クリックでプルダウン表示し「要素の検証」を選択してみてください。するとブラウザの下からウニョっと「開発ツール」が現れます。

英語表記なのでとっつきにくいかも知れませんが、まずはじめに利用するのは左上の虫眼鏡アイコンかな?

そっそくクロームでできることを説明…と行きたいのですが。

今回は、クッキーを手軽にチェックしたり消したりする方法のご紹介ですので割愛させていただきます。各種パーツの名称や網羅的な機能の確認は、Build Insider様のWeb開発でよく使う、特に使えるChromeデベロッパー・ツールの機能をお読みいただければわかるかと思います。とても分かりやすく更新もされているので、物忘れが激しい私自身は大変重宝しています。

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能-Build Insider様

クッキーの確認は、Resourcesパネル(以下リソースパネル)を利用します。

c

すると左側…cookie(クッキー)の項目が!

c2

c3
クッキーをクリックしてみると、amiten.netだけでなくwordpressApiなどもクッキを保存しようとしていることがわかります。
後は該当の欄を参照し、右クリックでチェック中のクッキーだけを削除することができます。

確認の度にブラウザ全体のクッキーを削除したりすると検証後に心が萎えるので、ひとつづつ手軽に消すことができるデベロッパーツールはとても重宝しています。

page
1 / 1