vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

Google Chromeでかんたんに『キャッシュを削除する』方法

   

LINEで送る
Pocket


こんにちは、okutani(@okutani_t)です。かんたんなTipsですが、「Chromeのキャッシュをかんたんに削除する」方法を紹介します。

僕はフリーでWebエンジニアをしているのですが、先方から「CSSが反映されない」といった内容のメールがちょくちょく届きます。

そのとき「キャッシュを削除してください」と伝えるのですが、その手順をなるべく簡潔に伝えられたら良いですよね。

また、先方に伝える場合は「キャッシュ削除のプラグインを入れてください」なんてことは言えないので、一番お手軽な方法で伝えられるとGoodです。

Chromeには「スーパーリロード」なるものが存在するので、その利用方法について解説していきます。

最初に「キャッシュの削除について」と、キャッシュを気にせずページを更新できる「スーパーリロード」について説明していきます。

スポンサーリンク

キャッシュの削除って?

そもそも「キャッシュ」ってなに?という方がいらっしゃるかと思うので、かんたんに解説します。

通常、サイトを閲覧する場合、サーバーにサイトのデータ(HTMLやCSSなど)を取得するようにブラウザが要求します。

このとき、あまり変化のないファイル(特に問題になるのがCSS)を「サイトを開こうとしているPCに保存」することを「キャッシュする」などと言います。

こうすることで、次回同じサイトにアクセスしたときに、キャッシュしたデータを利用することで高速にサイトを表示できるようになる、というわけです。

ただし、CSSやJavaScript、画像ファイルをサイト運営者が変更した場合(かつ名前が変わっていない場合)、キャッシュが残っていると以前のデータのまま表示されることになります。

このとき、「キャッシュの削除」をおこなえば、変更されたデータが適切に読み込まれます。

この問題をかんたんに解決するには、Chromeで「スーパーリロード」なるものを使えば一発です!

スーパーリロード(ハード再読み込み)を使ってみる

スーパーリロード(ハード再読み込み)の使い方について解説します。

このスーパーリロードを使うと、超かんたんな手順で、CSSや画像が再読み込みできなくなったサイトを強制的に更新することができます。

(実際にはキャッシュの削除というより、「強制的にページを更新している」と言った方が正しいかもしれません)

では、WindowsとMacの場合で、それぞれ使い方を見てみましょう。

Windows

Windowsの場合は、更新したい画面を開いて以下のキーを押してください。

Shift + F5

これで、通常のリロードではなく、スーパーリロードでサイトを読み込むことができます。かんたんですね。

Mac

Macの場合は、更新したい画面を開いて以下のキーを入力。

Shift + command + R

これでスーパーリロードができます。めっちゃかんたんです。

確実なキャッシュ削除とスーパーリロード

ちなみに、以下の方法をおこなうと、確実にキャッシュを削除し、同時にスーパーリロードもおこなってくれます。

方法はこれまたかんたんで、「デベロッパーツールの起動」→「リロードボタン長押しor右クリック」でできます。

WindowsとMacの場合でそれぞれ見てみましょう。

Windows

ではデベロッパーツールの起動からおこないましょう。デベロッパーツールはF12キーを押せば立ち上がります(もしくはCtrl + Shift + J)。

この状態で、リロードボタンを長押し(もしくは右クリック)してみましょう。

「キャッシュの消去とハード再読み込み」をクリックすればOKです。

これで確実にキャッシュを削除し、スーパーリロードをおこなうことができます。

Mac

Macでデベロッパーツールを立ち上げます。command + option + Iを同時押しします。

Windowsのときと同じく、リロードボタンを長押し(もしくは右クリック)。

「キャッシュの消去とハード再読み込み」をクリック。かんたんですね。

キャッシュの消去とハード再読み込みはショートカットキーが用意されてないようなので、上記の手順で実行してみてください。

おまけ: シークレットモードを使う方法

Chromeには「シークレットモード」という機能があります。

このシークレットモードを使うと、そもそもCSSや画像をキャッシュしないで利用できるので、開発時に重宝するかと思います。

Windows

Windowsでシークレットモードにするには、以下のキーを入力します。

Ctrl + Shift + N

このようにシークレットモードを別窓で開くことができます。

あとはキャッシュが更新できないページをここから開けばOKですね。

Mac

Macの場合は以下のキーを入力。

command + Shift + N

これでキャッシュに悩まされずにWeb開発を進めることができますね。

まとめ

本記事では、かんたんにページを強制リロードしてくれる「スーパーリロード」、シークレットモードについて解説しました。

あんまりキャッシュについて意識せず作業していると、意外とハマってしまうのでこういう知識があると慌てず対応できるかと思います。

また、先方に伝えるときは、Windowsなら「Shift + F5」、Macなら「Shift + command + R」を教えるだけでお手軽です。

また、開発者の方はCSSの読み込み場所を「style.css?v=1.0」と末尾にクエリをつけて対応することもできます。もし時間があれば別途記事にしようと思います。

ぜひ日々のWeb開発に役立ててみてください。参考になれば幸いです。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
キャッシュの削除って設定からやろうとすると、すごくめんどうですよねー。この方法でかんたんにキャッシュ削除できるのでぜひ一度試してみてください。

 - Web

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

サイトを好きに改ざんできちゃう!?Clone Zoneってサイトが面白い件

こんにちは、Web勉強中okutani(@okutani_t)です。 今回は、サ …

「Vimium」でマウスなしブラウジング!ネットサーフィンが捗るよ

こんにちは、okutani(@okutani_t)です。Chrome拡張機能の『 …

Like Boxがサービス終了。「Page Plugin」に変更しておこう

こんにちは、okutani(@okutani_t)です。先日、当ブログにFace …

WordPressにFeedlyを設置しよう!Feedlyボタンの設置方法3つ

こんにちは、okutani(@okutani_t)です。ブログを運営する上で行っ …

noindexを使ってサイト評価を下げない方法

こんにちは、okutani(@okutani_t)です。僕はブログ記事を書くとき …

Pocketボタンをサイトに設置してみよう!Stinger5編

こんにちは、okutani(@okutani_t)です。今回はサイトのSNSシェ …

New Relicの登録&Ruby on Railsへの導入方法

こんにちは、okutani(@okutani_t)です。本記事では、パフォーマン …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。