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

Question

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 permet pas de charger les modifications apportées à mon fichier .css. Je pense que le fichier .css est toujours en mémoire 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 un programme externe dans la section Action de démarrage Collez ou naviguez jusqu'au chemin d'accès de Google Chrome (le mien est le suivant C:\Users\xxx\AppData\Local\Google\Chrome\Application\chrome.exe ) Dans la boîte d'arguments de la ligne de commande, mettez -incognito.
3. Utilisé les outils de développement de Chrome, cliquez sur l'icône "gear", coché "Disable Cache".

Rien ne semble fonctionner à moins que j'arrête manuellement le débogage (en fermant Chrome) et que je redémarre l'application (en débogage).

Existe-t-il un moyen de forcer Chrome à toujours recharger toutes les modifications apportées aux fichiers CSS et à recharger le fichier .css ?

Mise à jour :
1. Les modifications de style en ligne dans mon fichier .aspx sont prises en compte lorsque je rafraîchis le site. Mais les changements dans un fichier .css ne le sont pas. 2. Comme il s'agit d'une application ASP.NET MVC4, je clique sur un hyperlien, ce qui entraîne une requête 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 (dans l'onglet réseau) est 200.

Answer 1

Pour forcer chrome à recharger les css et les 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 confirmé par beaucoup)

---

Réponse originale :

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

Sur OS X : ⌘ + R

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

Answer 2

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

Par exemple 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() . Ce serait donc 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 compliquées et plus dynamiques, mais pour les tests, cette méthode est la meilleure (IMO).

Answer 3

[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". Dans celle-ci, cochez la case "Désactiver le cache (lorsque DevTools est ouvert)".

---

MISE À JOUR : 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".

Answer 4

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

Désactiver le cache dans la page elle-même. Cela n'enregistrera 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 devez/devriez insérer dans head de la page que vous déboguez, ou dans la balise head étiquette de master page de votre site

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

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

Answer 5

Dans mon cas, dans les paramètres de Chrome DevTools, le simple réglage de "Disable cache (while DevTools is open)" ne fonctionne pas, il faut cocher "Enable CSS source maps" et "Auto-reload generated CSS", qui sont listés dans le groupe source, pour faire disparaître ce problème de cache.