Désactivation du cache Chrome pour le développement de sites Web
Je modifie l'apparence d'un site (modifications CSS), mais je ne peux pas voir le résultat sur Chrome à cause d'un cache persistant et ennuyant. j'ai essayé Shift+ rafraîchir mais ça ne marche pas.
Comment puis-je désactiver temporairement le cache ou actualiser la page de manière à ce que je puisse voir les modifications?
Les outils de développement Chrome peuvent désactiver le cache.
- Cliquez avec le bouton droit de la souris sur et choisissez
Inspect Elementpour ouvrir l'outil de développement. Ou utilisez les éléments suivants raccourcis clavier :- F12
- Command+Option+i sur Mac
- Control+Shift+i sous Windows ou Linux
- Cliquez sur
Networkdans la barre d’outils pour ouvrir le volet Réseau. - Cochez la case à cocher
Disable cacheen haut.
N'oubliez pas que, comme Tweet de @ ChromiumDev , ce paramètre est actif uniquement lorsque les outils de développement sont ouverts .
Notez que cela entraînera toutes les ressources en cours de rechargement. 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 case à cocher Disable cache, un appui long sur le bouton de rafraîchissement avec l'outil DevTools ouvert affichera un menu avec les options de Hard Reload ou Empty Cache and Hard Reload qui devrait avoir un effet similaire. Lisez à propos de différence entre les options . Les raccourcis suivants sont disponibles:
- Command+Option+R sur Mac
- Control+Shift+R sous Windows ou Linux
Effacer 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 efface le cache à chaque chargement de page.
Chrome Store Link (gratuit)(maintenant sans programme malveillant!)
Maintenant, ma maquette json, javascript, css, html et données est actualisée à chaque fois sur à chaque chargement de page.
Je (jamais} _ dois m'inquiéter si je dois vider mon cache.
J'ai trouvé environ 20 nettoyeurs de cache pour Chrome, mais celui-ci semblait léger et ne demandait aucun effort. Dans une mise à jour, Cache Killer peut désormais rester "toujours actif".
_ {Remarque: je ne connais pas du tout l'auteur du plugin. Je viens de le trouver utile.} _
Ouvrez la console du développeur Chrome en appuyant sur F12 et ensuite (avec la console ouverte):
Faites un clic droit (ou maintenez le bouton gauche de la souris) sur le bouton de rechargement en haut du navigateur et sélectionnez "Vider le cache et recharger physiquement".
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 autre évitera également l'utilisation du cache. Vous n'avez pas à vous soucier des paramètres ni de quoi que ce soit, c'est une solution rapide en un coup.
Il existe deux autres options pour désactiver définitivement la mise en cache des pages dans Chrome :
1. Désactiver 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 "
laisser le chemin d'accès à chrome.exe tel quel
Si vous copiez la ligne, assurez-vous de vérifier si les citations sont des citations réelles.
2. Désactiver le cache Chrome en modifiant les propriétés du raccourci
Cliquez avec le bouton 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 "
laisser le chemin d'accès à chrome.exe tel quel
Si vous ne souhaitez pas modifier les paramètres de Chrome, vous pouvez utiliser le mode incognito pour obtenir les mêmes résultats.
- F12 ouvrir Chrome DevTools
- F1 ouvrir les paramètres de DevTools
- Vérifiez Désactivez le cache (lorsque DevTools est ouvert) comme indiqué ci-dessous:
Ceci est actuellement sur l'onglet Préférences qui est la valeur par défaut. Vous devrez peut-être faire défiler l'écran. Cette case à cocher a été déplacée au moins deux 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’ouvrez sur un écran plus fin et que vous avez 2 colonnes sous Préférences, il se peut qu’il se trouve en haut à droite. N'hésitez pas à mettre à jour ce message s'il change ou à commenter et je le mettrai à jour.
En plus de l'option de désactivation du cache (accessible 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 de la souris et choisir "Effacer le cache" dans le menu contextuel.
Au lieu de frapper "F5"
"Ctrl + F5"
Dans le canal des Canaries (et peut-être suivront le canal des développeurs et des canaux stables), cela se trouve comme la deuxième option globale à gauche sous la section "Général".
En plus de cela, il y a toujours la possibilité de passer en mode Incognito via Ctrl + Maj + N. Même si cela met malheureusement fin à votre session.
Pour être clair, la case à cocher désactiver le cache dans Chrome (v17 ici, mais depuis v15 je crois) ne figure pas dans l'interface utilisateur des paramètres principaux. C'est dans l'interface utilisateur des paramètres des outils de développement.
Dans le menu de l'icône représentant une clé de la fenêtre du navigateur (menu préférences), choisissez Outils → Outils de développement.
Dans l'interface utilisateur des outils de développement qui apparaît, cliquez sur l'icône représentant une roue dentée en bas à droite.
Cochez la case "Désactiver le cache" dans la section Réseau.
En utilisant Ctrl+Shift+R rafraîchir était agréable mais je n’ai pas obtenu tout ce dont j'avais besoin. Cependant, certaines choses ne seraient pas actualisées, telles que les données stockées dans js et css. a trouvé une solution: a 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".
Désactiver le cache dans Chrome ne fonctionne que lorsque les outils de développement sont ouverts.
Jusqu'à ce que le bogue soit corrigé, vous pouvez utiliser Clear Cache Chrome plugin et vous pouvez également définir un raccourci clavier pour cela.
Après l’avoir installé, faites un clic droit et allez dans les options:
Vérifiez Automatically reload active tab after clearing data:
Sélectionnez Everything pour Time Period:
Et ensuite, vous pouvez aller à Menu => Outils => Extensions:
Cliquez sur les raccourcis clavier en bas:
Et définissez votre raccourci clavier, par exemple Ctrl + Shift +R:
En fait, si l'utilisation de la bande passante ne vous dérange pas, il est plus sûr de désactiver la mise en cache, ce qui est recommandé par de nombreux sites de sécurité.
Le chrome ne devrait pas être assez arrogant pour prendre des décisions et imposer des paramètres aux utilisateurs.
Vous pouvez désactiver le cache sous UNIX avec --disk-cache-dir =/dev/null.
Comme cela 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 la mise en cache folle. Ainsi, la désactivation du cache dans les outils réseau et la suppression explicite du cache ne fonctionnent pas.
Une solution de contournement très simple mais ennuyeuse consiste à ouvrir un nouvel onglet Incognito. Étonnamment, cela fonctionne, tout le temps!
Un rafraîchissement en mode incognito 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, créez un nouveau signet, puis collez le code dans l'URL. Cliquez sur le signet et la page se rechargera avec l'horodatage pour déjouer 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 effectuer des requêtes AJAX. J'avais l'attribut de cache défini sur true dans la demande:
$.ajax({
type: 'GET',
cache: true,
....
Fixer ceci à false corrige mon problème mais ce n’est pas idéal.
Je ne sais pas du tout où ces données sont enregistrées, mais je sais que chrome n’est jamais arrivé sur le serveur pour une requête.
Il existe un moyen plus rapide et plus efficace (version Chrome 59.x.x.):
Faites un clic droit sur l'icône de rechargement (à gauche du champ d'URL) et vous obtenez un menu déroulant, sélectionnez la troisième option: 'Cache vide et rechargement dur'.
Cette option est uniquement disponible lorsque les outils de développement sont ouverts . (Notez la différence par rapport à l'option 2: "Rechargement dur" -cmd-shift-R). Pas de cache se vider ici!
Une extension Chrome est disponible dans le magasin Web 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. Si vous aimez également les cookies, le stockage de paramètres régionaux, les données de formulaire, etc., vous pouvez également définir le domaine sur lequel cela se produit. Donc, vous pouvez effacer toute cette merde avec seulement le bouton de rechargement sur lequel vous devez quand même appuyer - sur les domaines de votre choix.
Très très gentil!
Vous pouvez également définir un raccourci clavier pour cela dans les options!
Un autre moyen consiste également à démarrer votre fenêtre chrome en mode incognito . Ici, le cache doit également être complètement désactivé.
Comment puis-je désactiver temporairement le cache ou actualiser la page de manière à ce que je puisse voir les modifications?
On ne sait pas de quel "cache" vous faites référence. Il existe différentes méthodes permettant à un navigateur de mettre en cache le contenu de manière persistante. Stockage Web étant l’un d’eux, Cache-Control étant un autre.
Certains navigateurs ont également une Cache , utilisée conjointement avec Service Workers , pour créer des applications Web progressives (PWA) fournissant un support en mode hors connexion.
Pour vider le cache d'un PWA
self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })
pour lister les noms des clés de cache, puis lancez:
self.caches.delete('my-site-cache')
supprimer une clé de cache par son nom (c'est-à-dire, my-site-cache). Puis actualisez la page.
Si vous voyez des erreurs liées au travailleur dans la console après l'actualisation, vous devrez peut-être également désenregistrer les travailleurs enregistrés:
navigator.serviceWorker.getRegistrations()
.then(registrations => {
registrations.forEach(registration => {
registration.unregister()
})
})
Une troisième option pour désactiver le cache est fournie par ma troisième extension Chrome Inspecteur de la taille de la page qui désactive le cache de la même manière que le fait Devtools.
En outre, l'extension indique rapidement la taille de la page, l'utilisation du cache, les requêtes réseau et le temps de chargement d'une page Web. En plus de son source ouverte sur Github .
Si vous utilisez ServiceWorkers (par exemple, pour les applications Web progressives), vous devrez probablement vérifier la "Mise à jour lors du rechargement" sous Application> Travailleurs de service dans les outils de développement également.
Vous ne savez pas exactement ce que vous utilisez, mais si vous utilisez ASP.Net, vous pouvez procéder comme suit:
<link href="@Url.Content("~/Content/Site.css")[email protected]" 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 est techniquement différent, vous n'aurez donc plus à vous soucier de sa mise en cache.
J'ai eu le même problème, j'ai essayé:
- Contrôle Shift R,
- Désactiver le cache dans F12
- Contrôle F5.
Ensuite, j'ai découvert que l'utilisation de un manifeste .appcache pour un site autre que 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!
Bonjour, si votre site utilise PHP, placez le petit extrait suivant PHP au début de votre page html:
//dev versioning - stop caching
$Rand = Rand(1, 99999999);
Désormais, partout où vous chargez des ressources telles que des fichiers CSS ou JS dans un script ou un élément de lien, vous ajoutez la valeur aléatoire générée à l'URL de la demande après l'ajout de '?' à l'URI via PHP:
echo $Rand;
C'est tout! Aucun navigateur ne mettra plus votre site en cache, quel que soit son type.
Bien sûr, supprimez votre code avant la publication ou définissez simplement $ Rand sur une chaîne vide pour permettre la mise en cache à nouveau.
J'ai utilisé les autres options décrites ci-dessus, mais le mieux est d'ajouter le paramètre suivant au démarrage de chrome.exe.
"C:\Fichiers de programme (x86)\Google\Chrome\Application\chrome.exe" --disk-cache-size = 1 - media-cache = 1
Je trouve que ne pas désactiver le cache média est une bonne idée mais c'est ici pour des raisons de complétude.
En réalité, je veux une option pour désactiver complètement le cache, utiliser la mémoire pour IO au lieu de mon disque (ce qui rendrait le temps de chargement aussi 10 fois plus rapide!) Mais je ne pense pas que Chrome ou n'importe quel navigateur, d'ailleurs a cette option pour le moment.
Le tueur de cache de Chrome est de loin la meilleure option. Comme l'URL du magasin pour installer 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 -> autres 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 chromée pour installer l'extension.
Je me trouvais dans une situation où le navigateur chargeait les données de cache à partir du disque même si je vérifiais que le cache était désactivé (j'utilisais Chrome). Tous mes css et js se chargeaient du serveur mais pas de la page Web. Cela se passait à la fois sur mon local et sur la production.
Pour résoudre ce problème, 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 a 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 que cela générera un lien du type: http://www.myweb.com/Home/Index?ts=636558555408282209
Ceci est ma situation et solution. J'espère que cela pourrait aider quelqu'un.
Depuis la version 50 (si mes souvenirs sont exacts), l'option "Désactiver le cache" a été supprimée des paramètres de Devtool. Allez sur l'onglet "Réseau" et il y a l'option "Désactiver le cache".
Ajoutez cette chaîne de code à votre et cela devrait faire l'affaire.
<meta name="robots" content="noarchive">
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 d'avoir dev. les outils s'ouvrent dans ce cas.