Comment forcer le navigateur Chrome à recharger le fichier .css lors du débogage dans Visual Studio?

J'édite actuellement un fichier .css dans Visual Studio 2012 (en mode débogage). J'utilise Chrome comme navigateur. Lorsque je modifie le fichier .css de mon application dans Visual Studio et que je l'enregistre, l'actualisation de la page ne se charge pas avec la modification mise à jour dans mon fichier .css. Je pense que le fichier .css est toujours en cache.

J'ai essayé:

1. CTRL / F5
2. Dans Visual Studio 2012, accédez aux propriétés du projet, onglet Web Choisissez Démarrer le programme externe dans la section Démarrer l'action Coller ou recherchez le chemin d'accès de Google Chrome (le mien est C: \ Users \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe) Dans la zone Arguments de la ligne de commande, mettez -incognito
3. Utilisé les outils de développement Chrome, cliquez sur l'icône «engrenage», coché «Désactiver le cache».

Rien ne semble fonctionner à moins que j'arrête manuellement le débogage, (fermez Chrome), redémarrez l'application (en débogage).

Existe-t-il un moyen de forcer Chrome à toujours recharger toutes les modifications css et à recharger le fichier .css?

Mise à jour:
1. Les modifications de style en ligne dans mon fichier .aspx sont prises en compte lors de l'actualisation. Mais les changements dans un fichier .css ne le sont pas. 2. Il s'agit d'une application ASP.NET MVC4, je clique donc sur un lien hypertexte, qui effectue un GET. En faisant cela, je ne vois pas de nouvelle demande pour la feuille de style. Mais en cliquant sur F5, le fichier .css est rechargé et le code d'état (sur l'onglet réseau) est 200.

Il existe des solutions beaucoup plus compliquées, mais une solution très simple consiste simplement à ajouter une chaîne de requête aléatoire à votre inclusion CSS.

Tel que src="/css/styles.css?v={random number/string}"

Si vous utilisez php ou un autre langage côté serveur, vous pouvez le faire automatiquement avec time(). Donc ce seraitstyles.css?v=<?=time();?>

De cette façon, la chaîne de requête sera nouvelle à chaque fois. Comme je l'ai dit, il existe des solutions beaucoup plus compliquées qui sont plus dynamiques, mais à des fins de test, cette méthode est la meilleure (IMO).

Pour forcer Chrome à recharger css et js:

Option Windows 1: CTRL+ SHIFT+ R
Option Windows 2: SHIFT+F5

OS X: ⌘+ SHIFT+R

Mis à jour comme indiqué par @PaulSlocum dans les commentaires (et beaucoup confirmés)

Réponse originale:

Chrome a changé de comportement. Ctrl+ le Rfera.

Sur OS X: ⌘+R

Si vous rencontrez des problèmes pour recharger les fichiers css / js, ouvrez l'inspecteur ( CTRL+ SHIFT+ C) avant de procéder au rechargement.

[LIRE LA MISE À JOUR CI-DESSOUS]

Le moyen le plus simple que j'ai trouvé est dans les paramètres de Chrome DevTools. Cliquez sur l'icône d'engrenage (ou 3 points verticaux, dans les versions plus récentes) en haut à droite de DevTools pour ouvrir la boîte de dialogue "Paramètres". Là, cochez la case: "Désactiver le cache (pendant que DevTools est ouvert)"

MISE À JOUR: maintenant ce paramètre a été déplacé. Il se trouve dans l'onglet "Réseau", c'est une case à cocher intitulée "Désactiver le cache".

Vous êtes confronté au problème du cache du navigateur.

Désactivez le cache dans la page elle-même. Cela ne sauvera pas le fichier de prise en charge de la page dans le navigateur / cache.

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />

Ce code que vous avez besoin / devez insérer dans la headbalise de la page que vous déboguez, ou dans la headbalise master pagede votre site

Cela ne permettra pas au navigateur de mettre en cache le fichier, éventuellement les fichiers ne seront pas stockés dans les fichiers temporaires du navigateur, donc pas de cache, donc aucun rechargement ne sera nécessaire :)

Je suis sûr que cela fera l'affaire :)

Dans mon cas, dans les paramètres de Chrome DevTools, il suffit de définir "Désactiver le cache (pendant que DevTools est ouvert)" ne fonctionne pas, il doit cocher "Activer les cartes source CSS" et "Recharger automatiquement le CSS généré", qui sont répertoriés dans la source group, pour faire disparaître ce problème de cache.

Appuyez sur SHIFT+ F5.

Cela fonctionne pour moi avec la version 54 de Chrome.

j'avais rencontré le même problème ici! mais je suis sûr que ma résolution est meilleure que tous les exemples ci-dessus, faites-le,

1. Ouvrez la console développeur Chrome en appuyant sur F12
2. Faites un clic droit sur le bouton de rechargement en haut du navigateur et sélectionnez «Vider le cache et recharger dur».

C'est tout!

Avec macOS, je peux forcer Chrome à recharger le fichier CSS en faisant

⌘+ SHIFT+R

J'ai trouvé cette réponse enfouie dans les commentaires ici, mais elle méritait plus de visibilité.

La version actuelle de Chrome (55.x) ne recharge pas toutes les ressources lorsque vous rechargez la page (Commande + R) - et cela n'est pas utile pour déboguer le fichier .css.

Commande + R fonctionne bien si vous souhaitez déboguer uniquement les fichiers .html, .php, .etc, et est plus rapide car fonctionne avec des ressources locales / mises en cache (.css, .js). Supprimer manuellement le cache du navigateur pour chaque itération de débogage n'est pas pratique.

Procédure pour forcer le rechargement du fichier .css sur Mac (raccourci clavier / Chrome): Commande + Maj + R

J'utilise Edge Version 81.0.416.64 (version officielle) (64 bits) et elle est basée sur le projet open source Chromium.

Appuyez sur F12pour accéder aux outils de développement.
Cliquez sur l'onglet Réseau
Vérifier désactiver le cache

Je sais que c'est une vieille question, mais si quelqu'un cherche toujours comment recharger un seul fichier css / js externe, le moyen le plus simple maintenant dans Chrome est:

1. Accédez à l' onglet Réseau dans DevTools
2. Faites un clic droit sur la ressource et sélectionnez Replay XHR pour répéter la demande

Assurez-vous que l' option Désactiver le cache est sélectionnée pour forcer le rechargement.

Pour macOS Chrome:

1. Ouvrir les outils des développeurs cmd+ alt+i
2. Cliquez sur trois points dans le coin supérieur droit dans les outils de développement
3. Cliquez sur les paramètres
4. Faites défiler jusqu'à Network
5. Activer Disable cache (while DevTools is open)voir capture d'écran:

Pourquoi est-il nécessaire de rafraîchir la page entière? Actualisez simplement uniquement les fichiers css sans recharger la page. C'est très utile lorsque, par exemple, vous devez attendre une longue réponse de DB. Une fois que vous avez obtenu des données de DB et que vous avez rempli la page, modifiez vos fichiers css et rechargez-les dans Chrome (ou dans Firefox). Pour ce faire, vous devez installer l' extension CSS Reloader . La version Firefox est également disponible.

Vous pouvez copier-coller ce script dans la console Chrome et cela force vos scripts CSS à se recharger toutes les 3 secondes. Parfois, je trouve cela utile lorsque j'améliore les styles CSS.

var nodes = document.querySelectorAll('link');
[].forEach.call(nodes, function (node) {
    node.href += '?___ref=0';
});
var i = 0;
setInterval(function () {
    i++;

    [].forEach.call(nodes, function (node) {
        node.href = node.href.replace(/\?\_\_\_ref=[0-9]+/, '?___ref=' + i);
    });
    console.log('refreshed: ' + i);
},3000);

J'ai résolu par cette simple astuce.

<script type="text/javascript">
  var style = 'assets/css/style.css?'+Math.random();;
</script>

<script type="text/javascript">
  document.write('<link href="'+style+'" rel="stylesheet">');
</script>

Encore un problème.

L'utilisation de paramètres tels que "..css? Something = random-value" ne change rien à mon expérience d'assistance client. Seuls les changements de nom fonctionnent.

Une autre prise sur le changement de nom du fichier. J'utilise la réécriture d'URL dans IIS. Parfois, Isapi Rewrite d'Helicon.

Ajouter une nouvelle règle.

+ Name: lame-chrome-fix.
+ Pattern: styles/(\w+)_(\d+)
+ Rewrite URL: /{R:1}.css

Remarque: je réserve l'utilisation de undercase pour séparer le nom du nombre aléatoire. Ça pourrait être autre chose.

Exemple:

<link href="https://stackoverflow.com/styles/template_<% 
Response.Write( System.DateTime.UtcNow.ToString("ddmmyyhhmmss")); %>" 
type="text/css" />

(Aucun dossier de styles, c'est juste un nom faisant partie du motif)

Code de sortie comme:

<link href="/styles/template_285316115328" 
rel="stylesheet" type="text/css">

Rediriger en tant que:

(R: 1 = modèle)

/template.css

Seule l'explication est longue.

J'ai juste eu ce problème où une personne exécutant Chrome (sur un Mac) a soudainement arrêté de charger le fichier CSS. CMD + R n'a PAS fonctionné du tout. Je n'aime pas les suggestions ci-dessus qui forcent un rechargement permanent du système de production.

Ce qui fonctionnait, c'était de changer le nom du fichier CSS dans le fichier HTML (et de renommer le fichier CSS bien sûr). Cela a forcé Chrome à récupérer le dernier fichier CSS.

Si vous utilisez Sublime Text 3, utiliser un système de construction pour ouvrir le fichier ouvre la version la plus récente et fournit un moyen pratique de le charger via [CTRL + B] Pour configurer un système de construction qui ouvre le fichier dans Chrome:

1. Allez dans 'Outils'

2. Passez votre souris sur «système de construction». Au bas de la liste affichée, cliquez sur 'Nouveau système de construction ...'

3. Dans le nouveau fichier système de construction, tapez ceci:

   {"cmd": [ "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]}

** à condition que le chemin indiqué ci-dessus dans le premier ensemble de guillemets soit le chemin vers l'emplacement de chrome sur votre ordinateur, s'il ne s'agit pas simplement de trouver l'emplacement de chrome et de remplacer le chemin dans le premier ensemble de guillemets par le chemin vers chrome sur votre ordinateur.

Le moyen le plus simple d'atteindre votre objectif est d' ouvrir une nouvelle fenêtre de navigation privée dans votre fenêtre chrome ou privée dans Firefox qui, par défaut, ne mettra pas en cache.

Vous pouvez l'utiliser à des fins de développement afin de ne pas avoir à injecter du code aléatoire empêchant le cache dans votre projet.

Si vous utilisez IE, que Dieu vous aide!

Ctrl + F5

Shift + F5

Les deux fonctionnent

Moyen le plus simple sur Safari 11.0 macOS SIERRA 10.12.6: Recharger la page à partir de l'origine, vous pouvez utiliser l'aide pour savoir où dans le menu il se trouve, ou vous pouvez utiliser l'option de raccourci (alt) + commande + R.

Chrome/firefox/safari/IE rechargera la page entière par ces raccourcis

Ctrl+ R (OU) Ctrl+F5

J'espère que cela peut vous aider !.

Si vous utilisez SiteGround en tant que société d'hébergement et qu'aucune des autres solutions n'a fonctionné, essayez ceci:

Depuis le cPanel, allez dans «OUTILS D'AMÉLIORATION DU SITE» et cliquez sur «SuperCacher». Sur la page suivante, cliquez sur le bouton "Vider le cache".