Désactiver le cache Chrome pour le développement de sites Web

Je modifie l'apparence d'un site (modifications CSS), mais je ne vois pas le résultat sur Chrome en raison d'un cache persistant ennuyeux. J'ai essayé Shift+ rafraîchir mais cela ne fonctionne pas.

Comment puis-je désactiver le cache temporairement ou actualiser la page de manière à pouvoir voir les modifications?

Les Chrome DevTools peuvent désactiver le cache.

1. Cliquez avec le bouton droit et choisissez Inspect Elementd'ouvrir les DevTools. Ou utilisez l'un des raccourcis clavier suivants :
   • F12
   • Command+ Option+ isur Mac
   • Control+ Shift+ isur Windows ou Linux
2. Cliquez Network dans la barre d'outils pour ouvrir le volet réseau.
3. Cochez la Disable cachecase en haut.

Gardez à l'esprit, comme l'a déclaré un tweet de @ChromiumDev , ce paramètre n'est actif que lorsque les devtools sont ouverts .

Notez que cela entraînera le rechargement de toutes les ressources. Si vous souhaitez désactiver le cache uniquement pour certaines ressources, vous pouvez modifier l'en-tête HTTP que votre serveur envoie avec vos fichiers.

Si vous ne souhaitez pas utiliser la Disable cachecase à cocher, un appui long sur le bouton d'actualisation avec les DevTools ouverts affichera un menu avec les options Hard Reloadou Empty Cache and Hard Reloadqui devrait avoir un effet similaire. Lisez la différence entre les options . Les raccourcis suivants sont disponibles:

• Command+ Option+ Rsur Mac
• Control+ Shift+ Rsur Windows ou Linux

Vider le cache est trop ennuyeux lorsque vous devez vider le cache 30 fois par heure. J'ai donc installé une extension Chrome appelée Classic Cache Killer qui vide le cache à chaque chargement de page.

Lien Chrome Store (gratuit) (Maintenant sans malware!)

Maintenant, ma maquette json, javascript, css, html et les données sont actualisées à chaque fois à chaque chargement de page .

Je n'ai jamais à m'inquiéter si je dois vider mon cache.

Il y a environ 20 nettoyeurs de cache pour Chrome que j'ai trouvés, mais celui-ci semblait léger et sans effort. Dans une mise à jour, Cache Killer peut désormais rester "toujours activé".

Remarque: je ne connais pas l'auteur du plugin. Je l'ai juste trouvé utile.

1. Ouvrez la console développeur Chrome en appuyant sur F12puis (avec la console ouverte):

2. Faites un clic droit (ou maintenez un clic gauche) sur le bouton de rechargement en haut du navigateur et sélectionnez "Vider le cache et recharger en dur".

Cela ira au-delà de "Hard Reload" pour vider complètement le cache, garantissant que tout ce qui est téléchargé via javascript ou etc. évitera également d'utiliser le cache. Vous n'avez pas à vous soucier des paramètres ou de quoi que ce soit, c'est une solution rapide en une seule fois.

Il existe deux autres options pour désactiver définitivement la mise en cache des pages dans Chrome :

1. Désactivez le cache Chrome dans le registre

Ouvrir le registre (Démarrer -> Commande -> Regedit)

Rechercher: HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command

Remplacez la partie après ... chrom.exe "par cette valeur: –disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

Exemple: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

IMPORTANT:

• il y a un espace et un trait d'union après ... chrome.exe "

• laissez le chemin vers chrome.exe tel quel

• Si vous copiez la ligne, assurez-vous de vérifier si les citations sont des citations réelles.

2. Désactivez le cache Chrome en modifiant les propriétés du raccourci

Faites un clic droit sur l'icône Chrome et sélectionnez "Propriétés" dans le menu contextuel. Ajoutez la valeur suivante au chemin: –disk-cache-size=1

Exemple: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –disk-cache-size=1

IMPORTANT:

• il y a un espace et un trait d'union après ... chrome.exe "

• laissez le chemin vers chrome.exe tel quel

Si vous ne souhaitez pas modifier les paramètres de Chrome, vous pouvez utiliser le mode navigation privée pour les mêmes résultats.

En plus de l'option de désactivation du cache (à laquelle vous accédez via un bouton dans le coin inférieur droit de la fenêtre des outils de développement - Outils | Outils de développement ou Ctrl+ Shift+ I), dans le volet réseau des outils de développement, vous pouvez maintenant cliquer avec le bouton droit et choisissez "Vider le cache" dans le menu contextuel.

1. F12 ouvrir Chrome DevTools
2. F1 ouvrir les paramètres DevTools
3. Cochez Désactiver le cache (lorsque DevTools est ouvert) comme indiqué ci-dessous:

C'est actuellement sur l' onglet Préférences qui est la valeur par défaut. Vous devrez peut-être faire défiler vers le bas. Cette case à cocher a été déplacée au moins plusieurs fois depuis que cette question a été posée. La dernière fois que j'ai vérifié, c'était dans la colonne du milieu en bas. Si vous l'avez ouvert sur un écran plus mince et qu'il y a 2 colonnes sous Préférences, il se peut que ce soit en haut à droite. N'hésitez pas à mettre à jour cet article s'il change ou commente et je mettrai à jour l'article.

Au lieu de frapper "F5", appuyez simplement sur:

"Ctrl + F5"

Dans le canal des Canaries (et peut-être le canal de développement et stable suivra), cela doit être trouvé comme la deuxième option globale sur le côté gauche sous la section "Général".

En plus de cela, il y a toujours la possibilité de basculer en mode navigation privée via Ctrl + Maj + N. Même si cela met malheureusement également fin à votre session.

Utiliser Ctrl+ Shift+ Rpour rafraîchir était agréable mais n'a pas obtenu tout ce dont j'avais besoin. certaines choses ne sont pas actualisées, comme les données stockées dans js et css. trouvé une solution: une barre d'outils de google pour les développeurs web chrome . Après avoir installé la barre d'outils, sélectionnez les options et "réinitialiser la page".

Pour être clair, la case à cocher désactiver le cache dans Chrome (v17 ici, mais depuis la v15 je crois) n'est pas dans l'interface utilisateur des paramètres principaux. Il se trouve dans l'interface utilisateur des paramètres des outils de développement.

1. Dans le menu de l'icône de clé de la fenêtre du navigateur (menu prefs) choisissez Tools → Developer Tools

2. Dans l'interface utilisateur des outils de développement qui apparaît, cliquez sur l'icône d'engrenage en bas à droite.

3. Cochez la case "Désactiver le cache" dans la section Réseau.

Désactiver le cache dans Chrome ne fonctionne que lorsque les outils de développement sont ouverts

Jusqu'à ce que le bug soit corrigé, vous pouvez utiliser le plugin Chrome Clear Cache et vous pouvez également définir un raccourci clavier pour celui-ci.

Après l'avoir installé, faites un clic droit et accédez aux options:

Vérifier Automatically reload active tab after clearing data:

Sélectionnez Everythingpour la période:

Et puis vous pouvez aller dans Menu => Tools => Extensions:

Cliquez sur les raccourcis clavier en bas:

Et définissez votre raccourci clavier, par exemple Ctrl+ Shift+ R:

En fait, si cela ne vous dérange pas d'utiliser la bande passante, il est plus sûr pour plusieurs raisons de désactiver la mise en cache et conseillé par de nombreux sites de sécurité.

Le chrome ne doit pas être assez arrogant pour prendre des décisions et appliquer des paramètres aux utilisateurs.

Vous pouvez désactiver le cache sous UNIX avec --disk-cache-dir = / dev / null.

Comme c'est inattendu, des plantages peuvent se produire, mais s'ils le font, cela indiquera clairement un bogue plus grave qui devrait être corrigé dans tous les cas.

Cela pourrait aider quelqu'un.

J'ai truqué mon Nginx pour une mise en cache folle. Ainsi, la désactivation du cache dans les outils réseau et l'effacement explicite du cache ne fonctionnent pas.

Une solution de contournement très simple mais ennuyeuse consiste à ouvrir un nouvel onglet de navigation privée. Étonnamment, cela fonctionne, tout le temps!

Un rafraîchissement dur en mode navigation privée fait l'affaire à chaque fois que je souhaite recharger dans le même mode.

Que diriez-vous d'un bookmarklet qui change le nom de la page pour empêcher la mise en cache de la page. Dans Chrome, vous créez un nouveau signet, puis collez le code dans l'URL. Cliquez sur le signet et la page se rechargera avec un horodatage pour contrecarrer le cache.

javascript:(function(){var idx = location.href.indexOf('?');var d = new Date();var str = location.href.substr(0,idx) + '?version=' + d.getTime();location.href=str; void 0;})();

Je viens de me faire prendre, mais pas nécessairement à cause de Chrome.

J'utilise jQuery pour faire des requêtes AJAX. J'ai eu l'attribut de cache défini sur true dans la demande:

   $.ajax({
        type: 'GET',
        cache: true,
        ....

Définir ceci sur faux résolu mon problème, mais ce n'est pas idéal.

Je ne sais pas où ces données sont enregistrées, mais je sais que Chrome n'a jamais atteint le serveur pour une demande.

Il existe maintenant un moyen meilleur et plus rapide (Chrome version 59.xx):

Faites un clic droit sur l'icône de rechargement (à gauche du champ URL) et vous obtenez un menu déroulant, sélectionnez la troisième option: 'Cache vide et rechargement dur'.

Cette option n'est disponible que lorsque les outils de développement sont ouverts. (Remarquez la différence avec l'option 2: 'Hard reload' -cmd-shift-R). Pas de vidange de cache ici!

Il existe une extension Chrome disponible dans la boutique en ligne Chrome nommée Clear Cache .

Je l'utilise tous les jours et c'est un outil très utile je pense. Vous pouvez l'utiliser comme bouton de rechargement et vider le cache et si vous le souhaitez également les cookies, le stockage local, les données de formulaire, etc. Vous pouvez également définir sur quel domaine cela se produit. Vous pouvez donc effacer toute cette merde avec seulement le bouton de rechargement sur lequel vous devez de toute façon appuyer - sur les domaines que vous avez choisis.

Très très gentil!

Vous pouvez également définir un raccourci clavier pour cela dans les options!

Une autre façon est également de démarrer votre fenêtre Chrome en mode navigation privée. Ici, le cache doit également être complètement désactivé.

Une autre option pour désactiver le cache est fournie par mon 3ème extension Chrome Inspecteur de taille de page qui désactive le cache exactement de la même manière que Devtools.

De plus, l'extension signale rapidement la taille de la page, l'utilisation du cache, les requêtes réseau et le temps de chargement d'une page Web de manière pratique. Plus son open source chez Github .

Je ne sais pas ce que vous utilisez, mais si vous utilisez ASP.Net, vous pouvez faire ce qui suit, qui fonctionne comme un charme:

<link href="@Url.Content("~/Content/Site.css")?time=@DateTime.Now" rel="stylesheet" />

Fondamentalement, il ajoutera automatiquement la date et l'heure à la fin du fichier à chaque exécution, ce qui signifie que le nom du fichier étant techniquement différent, vous n'aurez jamais à vous soucier de la mise en cache à nouveau.

J'ai eu le même problème, j'ai essayé:

• Control Shift R,
• Désactiver le cache dans F12
• Contrôle F5.

Ensuite, j'ai découvert que l'utilisation d' un manifeste .appcache pour un site non https est obsolète . J'ai supprimé mon fichier site.appcache et sa référence dans la balise html et maintenant je vois la dernière version de chaque page!

Si vous utilisez ServiceWorkers (par exemple: pour les applications Web progressives), vous devrez probablement vérifier "Mettre à jour au rechargement" sous Application> Service Workers dans les outils de développement.

Depuis la version 50 (si je me souviens bien), l'option "Désactiver le cache" a été supprimée des paramètres Devtool. Allez dans l'onglet "Réseau" et il y a l'option "Désactiver le cache".

Hé, si votre site utilise PHP, placez le petit extrait PHP suivant au début de votre page html:

   //dev versioning - stop caching
   $rand = rand(1, 99999999);

Maintenant, partout où vous chargez des ressources telles que des fichiers CSS ou JS dans un script ou un élément de lien, vous ajoutez votre valeur aléatoire générée à l'URL de la demande après avoir ajouté «?» à l'URI via PHP:

    echo $rand;

C'est ça! Il n'y aura plus de navigateur qui met en cache votre site, quel que soit le type.

Bien sûr, supprimez votre code avant de publier ou définissez simplement $ rand sur une chaîne vide pour permettre à nouveau la mise en cache.

J'ai utilisé les autres options décrites ci-dessus mais je trouve que le mieux est d'ajouter le paramètre suivant au démarrage de chrome.exe.

"C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" --disk-cache-size = 1 -media-cache = 1

Je trouve que la désactivation du cache multimédia n'est pas une bonne idée, mais elle est là par souci d'exhaustivité.

En réalité, je veux une option pour désactiver complètement le cache, pour utiliser la mémoire pour IO au lieu de mon disque (ce qui rendrait le temps de chargement 10 fois plus rapide aussi!) Mais je ne pense pas que Chrome ou un navigateur ait cette option pour le moment .

Comment puis-je désactiver le cache temporairement ou actualiser la page de manière à pouvoir voir les modifications?

On ne sait pas à quel "cache" vous faites référence. Il existe plusieurs méthodes différentes pour qu'un navigateur puisse mettre en cache le contenu de manière persistante. Web Storage étant l'un d'entre eux, Cache-Controlétant un autre.

Certains navigateurs ont également un Cache, utilisé en collaboration avec Service Workers , pour créer des applications Web progressives (PWA) fournissant un support hors ligne.

Pour vider le cache d'un PWA

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

pour répertorier les noms des clés de cache, puis exécutez:

self.caches.delete('my-site-cache')

pour supprimer une clé de cache par son nom (c.-à-d. my-site-cache -d.). Actualisez ensuite la page.

Si vous voyez des erreurs liées aux travailleurs dans la console après l'actualisation, vous devrez peut-être également désinscrire les travailleurs enregistrés:

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

Le tueur de cache de Chrome est de loin la meilleure option. Étant donné que l'URL du magasin pour installer le cache killer est en panne, vous pouvez télécharger le fichier CRX ici:

https://www.crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap/

une fois le fichier d'extension téléchargé, ouvrez Chrome -> plus d'outils -> extensions, puis faites glisser le fichier CRX depuis l'Explorateur de fichiers ou votre bureau (selon l'emplacement où vous avez téléchargé le fichier) dans la fenêtre Chrome pour installer l'extension.

J'utilise (dans Windows), ctrl + Maj + Suppr et lorsque la boîte de dialogue Chrome apparaît, appuyez sur la touche Entrée. Cela peut être configuré avec ce qui doit être effacé chaque fois que vous exécutez cette séquence. Pas besoin de dev. outils ouverts dans ce cas.

J'étais dans une situation où le navigateur charge les données de cache à partir du disque même si je l'ai vérifié, il a désactivé le cache (j'utilisais Chrome). Tous mes CSS et JS se chargeaient depuis le serveur mais pas la page Web. Cela se passait à la fois sur mon local et sur ma production.

Pour le corriger, je dois mettre un paramètre supplémentaire dans mon URL pour forcer le navigateur à obtenir la page Web du serveur, même le contrôleur n'en avait pas besoin.

J'utilisais ASP.Net, voici donc mon exemple:

//Controller function
public ActionResult Index()
    {
        return View();
    }
//Link
@Html.Action("Index", "Home", new { ts = DateTime.Now.Ticks.ToString()})

Le résultat est qu'il va générer un lien comme: http://www.myweb.com/Home/Index?ts=636558555408282209

Ceci est ma situation et ma solution. J'espère que cela pourrait aider quelqu'un.