キャッシュを残さないで快適にコーディングを進める方法

今回は「CSSが反映されないと思ったらキャッシュが原因だった。てかいちいちキャッシュ削除すんの面倒くさいわ。なんかキャッシュを残さない便利な方法はないんですか?」

こんな疑問に答えていきたいと思います。

では早速解説していきます。

スポンサードサーチ

キャッシュを残さない方法

まずはキャッシュを残さない方法について紹介します。

今回紹介するキャッシュを残さない方法はChromeの検証ツールを使った方法です。

流れとしてはこんな感じ

  1. Chromeで確認したいサイトを開く
  2. 検証ツールを開く
  3. 検証ツールの上部でElementsからNetWorkを選択
  4. NetWorkからDisable cacheにチェックを入れる

では順番に見ていきましょう。

Chromeで確認したいサイトを開く

Chrome表示画面

まずはChromeで確認したいサイトを開きましょう。

Chrome上で検証ツールを開く

検証ツール表示前の画面

次にChrome上で検証というボタンを押して、検証ツールを表示させましょう。

検証ツールの上部でElements→NetWorkを選択

検証ツール表示後の画面

検証ツールを開くと検証ツールの上部に「Elements」「Network」などがあり、開いてすぐには「Elements」が選択されているかと思います。

そこで「Elements」から「Network」を選択しましょう。

NetWorkからDisable cacheにチェックを入れる

NetWorkへの選択画面

次に「NetWork」の真下にある「Disable cache」の左にあるチェックボックスにチェックを入れましょう。

これで完了です。

*ちなみに下記の画像のように検証ツールの画面幅が短いと「Disable cache」が表示されないので、一時的に検証ツールの画面幅を広げてチェックを入れましょう。

 

この状態にしておくと、今後検証ツールを開いてる最中ではキャッシュを残さずにコーディングを行うことができるので、「キャッシュのせいでCSSが反映されない!」ということはなくなります。

結構便利なのでまだ使ってないという方はぜひ使ってみてください!

今回は以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

慶應の通信課程に通う大学生。現在はフリーランスとしてコーディングなどの仕事を受けながら、受託開発してる会社でインターンしてます。