Comment forcer le navigateur Chrome à recharger le 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 à l’intérieur de 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 Sélectionnez Démarrer un programme externe dans la section Démarrer l’action. chrome.exe) Dans la zone Arguments de la ligne de commande, placez -incognito
  3. Utilisez les outils de développement Chrome, cliquez sur l’icône “engrenage”, cochez “Désactiver le cache”.

Rien ne semble fonctionner à moins que 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 à toujours recharger toutes les modifications css et à recharger le fichier .css?

Mettre à jour:
1. Les changements de style en ligne dans mon fichier .aspx sont pris en compte lors de l’actualisation. Mais les changements dans un fichier .css ne le font pas. 2. Il s’agit d’une application ASP.NET MVC4. Je clique donc sur un hyperlien qui fait 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 et simple consiste simplement à append une chaîne de requête aléatoire à votre fichier CSS.

Comme src="/css/styles.css?v={random number/ssortingng}"

Si vous utilisez php ou un autre langage 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, plus dynamics, mais à des fins de test, cette méthode est top (IMO).

Pour forcer chrome à recharger css et js:

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

OS X: + SHIFT + R

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


Réponse originale:

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

Sous OS X: + R

Si vous ne parvenez pas à recharger les fichiers css / js, ouvrez l’inspecteur ( CTRL + SHIFT + C ) avant d’effectuer le rechargement.

[LISEZ LA MISE À JOUR CI-DESSOUS]

La manière la plus simple que j’ai trouvée est dans les parameters Chrome DevTools. Cliquez sur l’icône d’engrenage (ou 3 points verticaux, dans des versions plus récentes) en haut à droite de DevTools pour ouvrir la boîte de dialog “Paramètres”. Cochez la case: “Désactiver le cache (pendant que DevTools est ouvert)”


MISE À JOUR: Maintenant, ce paramètre a été déplacé. On peut le trouver dans l’onglet “Réseau”, c’est une case à cocher intitulée “Désactiver le cache”. entrer la description de l'image ici

Vous faites face 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.

     

Ce code que vous avez besoin / besoin d’insérer dans la balise head de la page que vous déboguez ou dans la balise head de la master page de votre site

Cela ne permettra pas au navigateur de mettre en cache les fichiers, éventuellement les fichiers ne seront pas stockés dans les fichiers temporaires du navigateur, donc pas de cache, donc aucun rechargement ne sera requirejs 🙂

Je suis sûr que ça va faire 🙂

Dans mon cas, dans les parameters de Chrome DevTools, il suffit de définir “Désactiver le cache (alors que DevTools est ouvert)” ne fonctionne pas, il faut cocher “Activer les cartes source CSS” et “Recharger automatiquement les CSS générés” groupe, pour faire disparaître ce problème de cache.

Appuyez sur SHIFT + F5 .

Il fonctionne pour moi avec Chrome version 54.

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

+ SHIFT + R

Trouvé cette réponse enterré dans les commentaires ici, mais il méritait plus d’exposition.

La version actuelle de Chrome (55.x) ne recharge pas toutes les ressources lorsque vous rechargez la page (Commande + R) – ce qui 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 / 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’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 simplement,

  1. Tirez la console du 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 le rechargement dur”.

C’est ça!

Je sais que c’est une vieille question, mais si quelqu’un cherche encore à recharger un seul fichier css / js externe, le moyen le plus simple maintenant est de:

  1. Allez dans l’ onglet Réseau dans DevTools
  2. Cliquez avec le bouton 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. Outils pour développeurs ouverts cmd + alt + i
  2. Cliquez sur trois points dans le coin supérieur droit des outils de développement.
  3. Paramètres de clic
  4. Faites défiler jusqu’à Network
  5. Activer Disable cache (while DevTools is open) voir la capture d’écran: entrer la description de l'image ici

Pourquoi faut-il rafraîchir toute la page? Il suffit de rafraîchir uniquement les fichiers CSS sans recharger la page. C’est très utile lorsque, par exemple, vous devez attendre une longue réponse de la part de DB. Une fois que vous obtenez les données de la firebase database et que vous remplissez la page, éditez vos fichiers css et rechargez-les dans Chrome (ou dans Firefox). Pour ce faire, vous devez installer l’ extension CSS Reloader . La version de Firefox est également disponible.

Vous pouvez copier coller ce script dans la console Chrome et forcer vos scripts CSS à 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); 

Toujours un problème.

L’utilisation de parameters tels que “..css? Something = random-value” ne change rien à mon expérience d’assistance client. Seul le changement de nom fonctionne.

Une autre prise sur le renommage du fichier. J’utilise la réécriture d’URL dans IIS. Quelquefois Isapi Rewrite d’Helicon.

Ajouter une nouvelle règle

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

Note: Je réserve l’utilisation de sous-casse pour séparer le nom du nombre aléatoire. Pourrait être autre chose.

Exemple:

 " type="text/css" /> 

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

Code de sortie comme:

  

Rediriger comme:

(R: 1 = modèle)

/template.css

Seule l’explication est longue.

Juste eu ce problème où une personne exécutant Chrome (sur un Mac) a soudainement cessé de charger le fichier CSS. CMD + R n’a pas fonctionné du tout. Je n’aime pas les suggestions ci-dessus qui imposent un rechargement permanent du système de production.

Ce qui a fonctionné é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 à obtenir le dernier fichier CSS.

Si vous utilisez Sublime Text 3, l’utilisation d’un système de génération pour ouvrir le fichier ouvre la version la plus récente et permet de le charger facilement via [CTRL + B] Pour configurer un système de génération qui ouvre le fichier en chrome:

  1. Allez dans “Outils”

  2. Passez votre souris sur «build system». En bas de la liste, cliquez sur ‘New Build System …’

  3. Dans le nouveau fichier de système de génération, 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 d’access à l’emplacement de chrome sur votre ordinateur, s’il ne se trouve pas simplement à l’emplacement de chrome et remplace le chemin dans le premier ensemble chrome sur votre ordinateur.

J’ai résolu par ce simple tour.

   

Le moyen le plus simple d’atteindre votre objective 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 sera pas en cache.

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

Si vous utilisez IE, alors que Dieu vous aide!

Ctrl + F5

Maj + F5

Les deux travaillent

Si vous utilisez SiteGround comme hébergeur 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 “Flush Cache”.

La manière la plus simple sur Safari 11.0 macOS SIERRA 10.12.6: Recharger la page D’origine, vous pouvez utiliser l’aide pour trouver où se trouve le menu ou utiliser l’option de raccourci (alt) + commande + R.

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

Ctrl + R (OR) Ctrl + F5

J’espère que ça peut vous aider!