Come forzare il browser Chrome a ricaricare il file .css durante il debug in Visual Studio?

Attualmente sto modificando un file .css all'interno di Visual Studio 2012 (in modalità debug). Sto usando Chrome come browser. Quando apporto modifiche al file .css della mia applicazione all'interno di Visual Studio e lo salvo, l'aggiornamento della pagina non verrà caricato con la modifica aggiornata nel mio file .css. Penso che il file .css sia ancora memorizzato nella cache.

Ho provato:

1. CTRL / F5
2. In Visual Studio 2012, vai alle proprietà del progetto, scheda Web Scegli Avvia programma esterno nella sezione Avvia azione Incolla o cerca il percorso per Google Chrome (il mio è C: \ Users \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe) Nella casella Argomenti della riga di comando inserisci -incognito
3. Utilizzati gli strumenti di sviluppo di Chrome, fai clic sull'icona "ingranaggio", seleziona "Disabilita cache".

Nulla sembra funzionare a meno che non interrompa manualmente il debug (chiusura di Chrome), riavvio dell'applicazione (in debug).

Esiste un modo per forzare Chrome a ricaricare sempre tutte le modifiche ai CSS e ricaricare il file .css?

Aggiornamento:
1. I cambiamenti di stile in linea nel mio file .aspx vengono rilevati quando aggiorno. Ma le modifiche in un file .css no. 2. È un'app ASP.NET MVC4, quindi faccio clic su un collegamento ipertestuale, che fa OTTENERE. In questo modo, non vedo una nuova richiesta per il foglio di stile. Ma facendo clic su F5, il file .css viene ricaricato e il codice di stato (nella scheda di rete) è 200.

Ci sono soluzioni molto più complicate, ma una molto semplice e semplice è solo quella di aggiungere una stringa di query casuale al tuo CSS.

Ad esempio src="/css/styles.css?v={random number/string}"

Se stai usando php o un'altra lingua lato server, puoi farlo automaticamente con time(). Così sarebbestyles.css?v=<?=time();?>

In questo modo, la stringa di query sarà nuova ogni volta. Come ho detto, ci sono soluzioni molto più complicate che sono più dinamiche, ma a scopo di test questo metodo è il migliore (IMO).

Per forzare Chrome a ricaricare css e js:

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

OS X: ⌘+ SHIFT+R

Aggiornato come dichiarato da @PaulSlocum nei commenti (e molti confermati)

Risposta originale:

Chrome ha cambiato comportamento. Ctrl+ Rlo farà.

Su OS X: ⌘+R

In caso di problemi durante il ricaricamento dei file css / js, aprire inspector ( CTRL+ SHIFT+ C) prima di eseguire il ricaricamento.

[LEGGI L'AGGIORNAMENTO QUI SOTTO]

Il modo più semplice che ho trovato è nelle impostazioni di DevTools di Chrome. Fare clic sull'icona a forma di ingranaggio (o 3 punti verticali, nelle versioni più recenti) in alto a destra in DevTools per aprire la finestra di dialogo "Impostazioni". Lì, seleziona la casella: "Disabilita cache (mentre DevTools è aperto)"

AGGIORNAMENTO: ora questa impostazione è stata spostata. Si trova nella scheda "Rete", è una casella denominata "Disabilita cache".

Stai affrontando il problema della cache del browser.

Disabilita la cache nella pagina stessa. Ciò non salverà il file di supporto della pagina nel browser / 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" />

Questo codice è necessario / è necessario inserire nel headtag della pagina di cui si sta eseguendo il debug o nel headtag master pagedel proprio sito

Ciò non consentirà al browser di memorizzare nella cache i file, alla fine i file non verranno archiviati nei file temporanei del browser, quindi nessuna cache, quindi non sarà necessario ricaricare :)

Sono sicuro che questo farà :)

Nel mio caso, nelle impostazioni di DevTools di Chrome, basta impostare "Disabilita cache (mentre DevTools è aperto)" non funziona, deve selezionare "Abilita mappe sorgente CSS" e "Ricarica automatica CSS generato", che sono elencati nella fonte gruppo, per eliminare questo problema con la cache.

Premi SHIFT+ F5.

Funziona per me con la versione 54 di Chrome.

avevo affrontato lo stesso problema qui! ma sono sicuro che la mia risoluzione è migliore di tutti gli esempi sopra, basta fare questo,

1. Apri la console per sviluppatori di Chrome premendo F12
2. Fai clic con il pulsante destro del mouse sul pulsante Ricarica nella parte superiore del browser e seleziona "Svuota cache e Ricarica dura".

Questo è tutto!

Con macOS posso forzare Chrome a ricaricare il file CSS facendo

⌘+ SHIFT+R

Ho trovato questa risposta sepolta nei commenti qui, ma meritava più visibilità.

La versione corrente di Chrome (55.x) non ricarica tutte le risorse quando si ricarica la pagina (Comando + R) - e ciò non è utile per il debug del file .css.

Command + R funziona bene se si desidera eseguire il debug solo dei file .html, .php, .etc ed è più veloce perché funziona con risorse locali / memorizzate nella cache (.css, .js). Eliminare manualmente la cache del browser per ogni iterazione di debug non è conveniente.

Procedura per forzare il ricaricamento del file .css su Mac (scorciatoia da tastiera / Chrome): Comando + Maiusc + R

Sto usando Edge versione 81.0.416.64 (build ufficiale) (64 bit) e si basa sul progetto open source Chromium.

Premi F12per accedere a Dev Tools.
Fare clic sulla scheda Rete
Controlla Disabilita cache

So che è una vecchia domanda, ma se qualcuno sta ancora cercando di ricaricare un solo file css / js esterno, il modo più semplice ora in Chrome è:

1. Vai alla scheda Rete in DevTools
2. Fare clic con il tasto destro sulla risorsa e selezionare Replay XHR per ripetere la richiesta

Assicurarsi che l' opzione Disabilita cache sia selezionata per forzare il ricaricamento.

Per macOS Chrome:

1. Strumenti per sviluppatori aperti cmd+ alt+i
2. Fai clic su tre punti nell'angolo in alto a destra negli strumenti per sviluppatori
3. Fai clic su Impostazioni
4. Scorri verso il basso fino a Network
5. Abilita Disable cache (while DevTools is open)vedi screenshot:

Perché è necessario aggiornare l'intera pagina? Basta aggiornare solo i file CSS senza ricaricare la pagina. È molto utile quando, ad esempio, devi attendere una lunga risposta dal DB. Una volta ottenuti i dati dal DB e popolato la pagina, quindi modificare i file CSS e ricaricarli in Chrome (o in Firefox). Per fare ciò è necessario installare l' estensione CSS Reloader . È disponibile anche la versione di Firefox.

Puoi copiare incollare questo script nella console di Chrome e impone il ricaricamento degli script CSS ogni 3 secondi. A volte lo trovo utile quando sto migliorando gli stili 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);

Ho risolto con questo semplice trucco.

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

Ancora un problema.

L'uso di parametri come "..css? Qualcosa = valore casuale" non cambia nulla nella mia esperienza di assistenza clienti. Funziona solo il cambio di nome.

Un'altra interpretazione della ridenominazione dei file. Uso URL Rewrite in IIS. A volte Isapi Rewrite di Helicon.

Aggiungi nuova regola.

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

Nota: mi riservo l'uso del carattere minuscolo per separare il nome dal numero casuale. Potrebbe essere qualcos'altro.

Esempio:

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

(Nessuna cartella di stili è solo una parte del nome del modello)

Codice di output come:

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

Reindirizzare come:

(R: 1 = modello)

/template.css

Solo la spiegazione è lunga.

Ho appena avuto questo problema in cui una persona che esegue Chrome (su un Mac) ha smesso improvvisamente di caricare il file CSS. CMD + R NON ha funzionato affatto. Non mi piacciono i suggerimenti di cui sopra che impongono un ricaricamento permanente sul sistema di produzione.

Ciò che ha funzionato è stato cambiare il nome del file CSS nel file HTML (e ovviamente rinominare il file CSS). Ciò ha costretto Chrome a ottenere l'ultimo file CSS.

Se stai usando Sublime Text 3, l'utilizzo di un sistema di compilazione per aprire il file apre la versione più recente e fornisce un modo conveniente per caricarlo tramite [CTRL + B] Per impostare un sistema di compilazione che apre il file in Chrome:

1. Vai a "Strumenti"

2. Passa il mouse su "sistema build". Nella parte inferiore dell'elenco visualizzato, fai clic su "Nuovo sistema di build ..."

3. Nel nuovo file di sistema di build digitare questo:

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

** a condizione che il percorso indicato sopra nella prima serie di virgolette sia il percorso in cui si trova chrome sul tuo computer, se non trova semplicemente la posizione di chrome e sostituisci il percorso nella prima serie di virgolette con il percorso a Chrome sul tuo computer.

Il modo più semplice per raggiungere il tuo obiettivo è aprire una nuova finestra di navigazione in incognito nella tua finestra di Chrome o privata in Firefox che, per impostazione predefinita, non memorizzerà nella cache.

Puoi usarlo a scopo di sviluppo in modo da non dover iniettare cache casuale che impedisce il codice nel tuo progetto.

Se stai usando IE, allora dio ti può aiutare!

Ctrl + F5

Shift + F5

Entrambi funzionano

Modo più semplice su Safari 11.0 macOS SIERRA 10.12.6: Ricarica pagina Da Origin, puoi usare la guida per scoprire dove si trova nel menu, oppure puoi usare l'opzione di scelta rapida (alt) + comando + R.

Chrome/firefox/safari/IE ricaricherà l'intera pagina con queste scorciatoie

Ctrl+ R (OR) Ctrl+F5

Spero che ti possa aiutare !.

Se stai utilizzando SiteGround come società di hosting e nessuna delle altre soluzioni ha funzionato, prova questo:

Da cPanel, vai su "STRUMENTI DI MIGLIORAMENTO DEL SITO" e fai clic su "SuperCacher". Nella pagina seguente, fai clic sul pulsante "Svuota cache".