tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【 HTTP 】ディベロッパーツールでcache-controlを確認する

先日キャッシュについて学習したので自分なりにざっくり解説してみました。

okinawanpizza.hatenablog.com

ありがとう google

キャッシュを目視したい!!に関しては、
Fastly というツールで url を入力してそこのキャッシュを確認できるらしい。
( もう少し調査が必要ですね、、、悪しからず )

ディベロッパーツールでリクエストヘッダーの中身を確認する

chromeの最強武器ディベロッパーツールには HTTP通信の中身を確認することができます。
ディベロッパーツールを開く > Network > ページをリロード > リクエストの履歴の一つをクリック
これでHTTP通信の全貌が明らかになります。

f:id:okinawanpizza:20200208210749p:plain

ネットワーク!!で通信内容の履歴が確認できます。

f:id:okinawanpizza:20200208210830p:plain

ネットワークを開いた状態で、リロードして内容を確認します。

f:id:okinawanpizza:20200208211003p:plain

リロードすると通信内容や一番上からサーバーとのやりとりの内容が確認できます。
この行ひとつ一つがいわゆるリクエスト!!! おお!
その中にcache control という項目があって、ここでキャッシュを取得したり、
効果に時間を設定したりできます。