web-dev-qa-db-fra.com

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

Je suis en train de modifier 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 chargera pas de la modification mise à jour dans mon fichier .css. Je pense que le fichier .css est toujours mis en cache.

J'ai essayé:

  1. CTRL/F5
  2. Dans Visual Studio 2012, Allez dans les propriétés du projet, onglet Web Choisissez Démarrer le programme externe dans la section Démarrer une action Collez ou naviguez jusqu'au chemin d'accès à Google Chrome 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 de Chrome, cliquez sur l'icône "engrenage", cochée "Désactiver le cache". 

Rien ne semble fonctionner sauf si j'arrête manuellement le débogage (fermez Chrome), redémarrez l'application (dans le débogage).

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

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

cssvisual-studiogoogle-chromecaching
131
duyn9uyen

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 code CSS. 

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

Si vous utilisez php ou une autre langue côté serveur, vous pouvez le faire automatiquement avec time(). Donc, ce serait styles.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 complexes et dynamiques, mais pour les tests, cette méthode est top (IMO).

131
anson

Pour forcer chrome à reaload css et js:

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

OS X: ⌘ + SHIFT + R

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

Réponse originale:

Chrome a changé de comportement. Ctrl + R le fera.

Sous OS X: ⌘ + R

Si vous avez des problèmes pour recharger des fichiers css/js, ouvrez l'inspecteur (CTRL + SHIFT + C) avant de recharger.

173
Bart Calixto

[LIRE LA MISE À JOUR CI-DESSOUS]

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

UPDATE: Ce paramètre a maintenant été déplacé. On peut le trouver dans l’onglet "Réseau", c’est une case à cocher intitulée "Désactiver le cache" .  enter image description here

118
Deepak Joy

Vous avez affaire au problème du cache du navigateur.

Désactiver le cache dans la page elle-même. Cela ne sauvera pas le fichier de support 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 balise head de la page que vous déboguez, ou dans la balise head de master page de votre site

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

Je suis sûr que ça ira :)

9
MarmiK

Dans mon cas, dans les paramètres de Chrome DevTools, il suffit de définir "Désactiver le cache (tant que DevTools est ouvert)", il faut également cocher "Activer les mappes de source CSS" et "Recharger automatiquement les CSS générées", qui figurent dans le code source groupe, pour faire disparaître ce problème de cache.

8
gustavH

Presse SHIFT+F5.

Cela fonctionne pour moi avec Chrome version 54.

6
user2580062

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

⌘ + SHIFT + R

Trouvé cette réponse enfouie dans les commentaires ici mais elle méritait plus de visibilité.

4
AlexG

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 de développement 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 physiquement".

Ça y est! 

4
Optimaz ID

La version actuelle de Chrome (55.x) ne recharge pas toutes les ressources lorsque vous rechargez la page (Commande + R). Cela n’est pas utile pour le débogage du fichier .css.

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

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

3
Logic Industry

Pour macOS Chrome:

  1. Outils de développement ouverts 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. Activez Disable cache (while DevTools is open) voir la capture d'écran: enter image description here
2
pbaranski

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

  1. Allez dans 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.

2
ivanhoe

Vous pouvez copier et coller ce script dans la console Chrome, ce qui oblige 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);
1
Martin Vseticka

Encore un problème. 

L'utilisation de paramètres tels que "..css? Quelque chose = valeur aléatoire" ne change rien à mon expérience de support client. Seul le changement de nom fonctionne. 

Une autre prise sur le fichier renommer. J'utilise l'URL Rewrite dans IIS. Parfois, Isapi Rewrite de 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. Pourrait être quelque chose d'autre. 

Exemple:

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

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

Code de sortie en tant que:

<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. 

1
Jan Andersen

Pourquoi est-il nécessaire d'actualiser toute la page? Il suffit d'actualiser 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 les données de la base de données et rempli la page, éditez vos fichiers CSS et rechargez-les dans Chrome (ou dans Firefox) Pour ce faire, vous devez installer extension CSS Reloader . La version de Firefox est également disponible.

1
Evgeni Nabokov

J'ai résolu par cette astuce simple. 

<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>
0
Shahid Chaudhary

Si vous utilisez SiteGround en tant qu'hébergeur et qu'aucune autre solution n'a fonctionné, essayez ceci:

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

0
Don

Je viens d'avoir ce problème lorsqu'une personne utilisant Chrome (sur un Mac) a soudainement cessé de charger le fichier CSS. CMD + R ne fonctionnait PAS du tout. Je n’aime pas les suggestions ci-dessus qui imposent un rechargement permanent du système de production.

Ce qui a bien fonctionné a été de changer le nom du fichier CSS dans le fichier HTML (et de renommer le fichier CSS bien sûr). Cela a obligé Chrome à aller chercher le dernier fichier CSS.

0
Richard

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

  1. Allez dans 'Outils'

  2. Passez votre souris sur «Construire le système». Au bas de la liste, cliquez sur "Nouveau système de construction ...".

  3. Dans le nouveau fichier de 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 jeu de guillemets soit le chemin d'accès à 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 jeu de guillemets par chrome sur votre ordinateur. 

0
Shlok Natarajan

Ctrl + F5

Shift + F5

Les deux fonctionnent

0
Ashwin Balani

Le moyen le plus simple d’atteindre votre objectif consiste à ouvrir une nouvelle fenêtre de navigation privée dans votre fenêtre chrome ou privée dans firefox qui, par défaut, ne se cache pas.

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

Si vous utilisez IE, alors que Dieu vous aide!

0
Anarach

Le moyen le plus simple sous Safari 11.0 macOS SIERRA 10.12.6: Recharger une page Depuis Origin, vous pouvez utiliser l'aide pour déterminer où il se trouve dans le menu ou utiliser l'option de raccourci (alt) + commande + R.

0
Rodolfo Pertuz