Arrêter Chrome de mettre en cache mes fichiers JS

136

J'apporterai une modification à mes fichiers JS mais cela ne changera pas vraiment dans le navigateur, je dois renommer les fichiers à chaque fois pour qu'il les recharge. Y a-t-il une sorte de commande .htaccess que je peux ajouter ou quelque chose pour arrêter la mise en cache?

Il met même en cache mes pages html noyau dur. J'ai besoin de rouvrir tout mon navigateur juste pour voir les changements. Cela pourrait-il être un problème de serveur?

javascript  caching  google-chrome 
— Howdy_McGee
source
L'activation de l'en-tête ETag sur votre serveur Web entraîne-t-elle la mise en cache de Chrome, mais récupère-t-elle correctement une nouvelle copie du fichier lorsqu'il a changé?
— Developer Webs

Réponses:

200

Vous pouvez cliquer sur l'icône des paramètres dans le coin supérieur droit ...| Plus d'outils | Outils de développement | Réseau | Désactiver le cache (lorsque DevTools est ouvert)

Pour Windows, c'est F12ou CTRL + SHIFT + Ipendant que sur mac CMD + SHIFT + Iouvre DevTools.

Nouveau chemin pour la mise à jour Chrome de septembre 2018:

Cliquez sur l'icône des paramètres dans le coin supérieur droit ...| Paramètres | Préférences | Outils de développement | Réseau | Désactiver le cache (lorsque DevTools est ouvert)

— MartinHN
source
4
Échec majeur de chrome pour mettre des choses en cache ... même lorsque la page est marquée avec Pas de cache .... Eh bien au moins cela fonctionne, les utilisateurs peuvent souffrir mais au moins je peux développer
— Robert Noack
4
Veuillez noter que les "Paramètres" ne sont plus en bas à droite! Cliquez sur le menu à trois points en haut à droite pour accéder aux paramètres.
— yizzlez le
4
L'emplacement est: coin supérieur droit | "..." | paramètres | Préférences | Réseau | "Désactiver le cache" (lorsque DevTools est ouvert).
— atom88
1
C'est TRÈS MAUVAISE PRATIQUE !!! Non, vous ne devriez pas avoir un hack temporaire pour votre usage .... vous devriez avoir une solution PERMANENTE pour TOUS vos utilisateurs. Le meilleur moyen est une chaîne de requête aléatoire à la fin du src. src = "someJs.js? someRandomStringCreatedByInlineJsOrServerRenderedCode" ce qui lui permettrait d'avoir une nouvelle version à chaque fois. une bonne chaîne aléatoire serait de saisir la date / heure d'aujourd'hui et de la lancer là-dedans. vous devrez peut-être le transformer en une chaîne car il s'agira probablement d'un objet de date. C'est vraiment vraiment dommage que ce soit la réponse choisie et si fortement votée.
1
À partir de Chrome 61.0.3163.100, il semble que l'option existe désormais sous Plus d'outils / Conditions réseau. L'option "Developer Tools" n'existe plus.
— Ilia Koulikov
61

Un moyen plus rapide de le faire est de cliquer avec le bouton droit sur l'icône d'actualisation à côté de la barre d'adresse et de choisir Vider le cache et recharger dur.

Assurez-vous simplement que les outils de développement de Chrome sont ouverts. (Appuyez sur F12) Au fait ... Cette astuce ne fonctionne que sur Chrome pour Windows, Ubuntu et Mac OS

— Nicole Rivers
source
2
Pour info, j'ai essayé tout cela, et absolument rien n'a fonctionné. Sur ma machine (avec les paramètres par défaut pour Mountain Lion), F12 affiche le tableau de bord.
— Aubrey Goodman
2
en quoi est-ce bien mieux que la réponse acceptée? Vous pouvez recharger normalement avec la réponse acceptée.
— SSH ce
non tu ne peux pas. au moins je ne peux pas. aucune des réponses n'a fonctionné pour moi, affichant toujours une alerte qui est supprimée dans mon fichier js local, mais elle est toujours dans le fichier js mis en cache dans Chrome.
— Burak Karakuş
1
Travaille pour moi. Assurez-vous que les outils de développement sont ouverts, sinon le clic droit n'affichera pas le menu.
— Venryx
Je vois l'option, mais dans mon cas, le script n'a pas été actualisé.
— Ilia Koulikov
25

Maintenez la touche Maj enfoncée tout en cliquant sur le bouton de rechargement.

— StilesCrisis
source
12

ajouter Quelque chose comme script.js?a=[random Number]avec le nombre aléatoire généré par PHP.

Avez-vous essayé expire = 0, le pragma "no-cache" et "cache-control = NO-CACHE"? (Je ne sais pas ce qu'ils disent sur les scripts).

— EGOrecords
source
2
Je suis tombé sur cette question et parcourais les réponses. C'est une idée terrible, car: 1) générer le nombre aléatoire à chaque demande obligera les navigateurs à télécharger à nouveau le fichier à chaque visite. Vous voulez une valeur de temps de construction , afin que les navigateurs ne régénèrent la valeur que lorsque vous apportez des modifications au site. Puisque PHP est interprété à l'exécution, vous devrez peut-être le faire au moment du déploiement. et 2) générer un nombre aléatoire signifie que parfois (avec l'augmentation de la probabilité avec le temps), le navigateur aura une ancienne copie aléatoire en cache. Si vous devez le faire au moment de la demande, utilisez un horodatage!
— JakeRobb
Je fais cela et j'utilise le numéro de version de construction, avec un délai d'expiration décent (1 jour) sur la valeur du cache d'en-tête
— Worthy7
11

Quelques idées:

  1. Lorsque vous actualisez votre page dans Chrome, effectuez un CTRL + F5 pour effectuer une actualisation complète.
  2. Même si vous définissez l'expiration sur 0, il sera toujours mis en cache pendant la session. Vous devrez fermer et rouvrir votre navigateur.
  3. Assurez-vous que lorsque vous enregistrez les fichiers sur le serveur, les horodatages sont mis à jour. Chrome émettra d'abord une HEADcommande au lieu d'un GET complet pour voir s'il a besoin de télécharger à nouveau le fichier complet, et le serveur utilise l'horodatage pour voir.

Si vous souhaitez désactiver la mise en cache sur votre serveur, vous pouvez faire quelque chose comme:

Header set Expires "Thu, 19 Nov 1981 08:52:00 GM"
Header set Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
Header set Pragma "no-cache"

Dans .htaccess

— Mike Christensen
source
Avait cela mais le pré-contrôle = 0, post-check = 0 est l'ajout qui a fait la différence pour moi.
— TadLewis
7

Étapes rapides:

1) Ouvrez le tableau de bord des outils de développement en allant dans le menu Chrome -> Outils -> Outils de développement

2) Cliquez sur l'icône des paramètres sur le côté droit (c'est un rouage!)

3) Cochez la case "Désactiver le cache (lorsque DevTools est ouvert)"

4) Maintenant, pendant que le tableau de bord est en place, appuyez simplement sur Actualiser et JS ne sera pas mis en cache!

— StackG
source
1
Cependant, le débogage à l'aide de WebStorm n'aide pas. Ensuite, les DevTools sont ouverts. WebStrom ne peut pas attacher un débogueur.
— Alexander Volkov
5

Le problème est que Chrome doit avoir must-revalidatedans l'en-tête Cache-Control` afin de revérifier les fichiers pour voir s'ils doivent être de nouveau récupérés.

Vous pouvez toujours SHIFT-F5 et forcer Chrome à s'actualiser, mais si vous souhaitez résoudre ce problème sur le serveur, incluez cet en-tête de réponse:

Cache-Control: must-revalidate

Cela indique à Chrome de vérifier auprès du serveur et de voir s'il existe un fichier plus récent. S'il existe un fichier plus récent, il le recevra dans la réponse. Sinon, il recevra une réponse 304, et l'assurance que celle du cache est à jour.

Si vous ne définissez PAS cet en-tête, alors en l'absence de tout autre paramètre qui invalide le fichier, Chrome ne vérifiera jamais avec le serveur s'il existe une version plus récente.

Voici une article de blog qui aborde la question plus en détail.

— AgilePro
source
1
Je pense que cela devrait être Cache-Control: must-revalidateau lieu de Cache-Control: must-validate. Je ne pense pas que ce dernier soit valable.
— László Monda
3

Lors de la mise à jour de mes applications Web, j'utiliserai un gestionnaire pour renvoyer un seul fichier JS afin d'éviter les appels massifs sur mon serveur, ou j'y ajouterai une petite chaîne de requête:

<script type="text/javascript" src="/mine/myscript?20111205"></script>
— Ryan Ternier
source
2
Bien que cela semble être une pratique ingénieuse, vous pourriez rencontrer des problèmes avec certains proxys qui cesseront de se mettre en cache lorsqu'ils trouveront une chaîne de requête: développeurs.google.com
— speed/docs/
2
Alors, que devriez-vous faire à la place?
— BlueSky
1 
<Files *>
Header set Cache-Control: "no-cache, private, pre-check=0, post-check=0, max-age=0"
Header set Expires: 0
Header set Pragma: no-cache
</Files>
— Alfabravo
source
1

Je sais que c'est une «vieille» question. Mais les maux de tête avec la mise en cache ne le sont jamais. Après des tas d'essais et d'erreurs, j'ai découvert que l'un de nos fournisseurs d'hébergement Web avait via CPanel cette application appelée Cachewall. J'ai juste cliqué sur Activer le mode Développement et ... voilà !!! Cela a tout de suite arrêté la longue douleur endurée :) J'espère que cela aide quelqu'un d'autre ... R

— Ramon Araujo
source
0

J'obtenais le même fichier css lorsque je parcourais le site Web (sur le serveur de la société d'hébergement avec un domaine réel) et je n'ai pas pu obtenir la version mise à jour sur chrome. J'ai pu obtenir la version mise à jour du fichier lorsque je l'ai parcouru sur Firefox. Aucune de ces réponses n'a fonctionné pour moi. J'ai également les fichiers du site Web sur ma machine et je navigue sur le site avec localhost en utilisant mon serveur apache local. J'ai arrêté mon serveur Apache et j'ai pu obtenir le fichier mis à jour. D'une manière ou d'une autre, mon serveur Apache local jouait avec le cache Chrome. J'espère que cela aide quelqu'un car il était très difficile pour moi de résoudre ce problème.

— Alp Hancıoğlu
source
0

  1. Ouvrir les outils de développement

    • Soit F12
    • Ou ...-> More Tools->Developer Tools

  2. Cliquez sur Empty Cache and Hard Reload

    • Soit un clic droit sur l'icône d'actualisation (juste à gauche de la barre d'adresse URL)
    • Ou cliquez avec le bouton gauche sur l'icône d'actualisation et maintenez-la enfoncée pendant 1 seconde
— Xin
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.