Cache du navigateur

Les navigateurs mettent en cache certains fichiers afin d'accélérer le chargement des pages Web. Ceci peut vous causer des soucis pendant le développement du site, notamment lorsque vous modifiez un fichier .css, un fichier .js, le favicon ou une image.

Le rafraîchissement du cache peut se faire de différentes façons :

• Actualiser l'écran à l'aide de F5 ou Ctrl+R sous Windows ou ⌘ Cmd+R sous Mac. Ceci a le même effet qu'un clic sur l'icône de rafraîchissement (situé à gauche de la barre d'URL). Le navigateur rechargera la page Web. Cependant, les fichiers mis en cache ne seront rafraîchis que si leur date est plus récente que celle en cache.

  ou

• Effectuer une actualisation forcée (hard refresh) : le cache sera rafraîchi même si la date de modification du fichier n'est pas plus récente que la version en cache. Ceci se fait à l'aide Maj+F5 ou Ctrl+Maj+R sous Windows ou ⌘ Command+⇧ Maj+R sous Mac.

  Notez que sous Windows, Ctrl+F5 est le raccourci officiel de FireFox. Ce raccourci fonctionne également sous Chrome même s'il ne fait pas partie de la documentation officielle.

  ou

• Lorsque les outils de développement de Chrome sont affichés (F12 sous Windows ou ⌘ Cmd+⌥ Option+I sous Mac), il est possible de faire un clic droit sur l'icône de rafraîchissement. Une option supplémentaire y est présentée : Vider le cache et effectuer une actualisation forcée.

  Ceci sera utile, notamment, si vous utilisez des outils pour générer un seul fichier .js composé de la concaténation de tous vos petits fichiers .js. Cette option permet également d'assurer un rechargement des fichiers chargés via JavaScript après le chargement inital de la page.

  Mais notez bien : le clic droit sur l'icône de rafraîchissement n'est disponible que lorsque les outils de développement sont affichés.

  

Pour plus d'information

« What's the difference between “Normal Reload”, “Hard Reload”, and “Empty Cache and Hard Reload” in Chrome?  ». StackOverflow. https://stackoverflow.com/a/14969509