Disabilitazione della cache di Chrome per lo sviluppo di siti Web

Sto modificando l'aspetto di un sito (modifiche CSS) ma non riesco a vedere il risultato su Chrome a causa della fastidiosa cache persistente. Ho provato Shift+ aggiorna ma non funziona.

Come posso disabilitare temporaneamente la cache o aggiornare la pagina in modo da poter vedere le modifiche?

Chrome DevTools può disabilitare la cache.

1. Fare clic con il tasto destro del mouse e scegliere Inspect Elementdi aprire DevTools. Oppure usa una delle seguenti scorciatoie da tastiera :
   • F12
   • Command+ Option+ isu Mac
   • Control+ Shift+ isu Windows o Linux
2. Fare clic Network sulla barra degli strumenti per aprire il riquadro di rete.
3. Seleziona la Disable cachecasella di controllo in alto.

Ricorda, come affermato da un tweet di @ChromiumDev , questa impostazione è attiva solo quando gli strumenti sono aperti .

Si noti che ciò comporterà il ricaricamento di tutte le risorse. Se desideri disabilitare la cache solo per alcune risorse, puoi modificare l'intestazione HTTP che il tuo server invia insieme ai tuoi file.

Se non si desidera utilizzare la Disable cachecasella di controllo, una pressione prolungata del pulsante di aggiornamento con DevTools aperto mostrerà un menu con le opzioni Hard Reloado Empty Cache and Hard Reloadche dovrebbero avere un effetto simile. Leggi la differenza tra le opzioni . Sono disponibili le seguenti scorciatoie:

• Command+ Option+ Rsu Mac
• Control+ Shift+ Rsu Windows o Linux

Svuotare la cache è troppo fastidioso quando è necessario svuotare la cache 30 volte all'ora .. quindi ho installato un'estensione Chrome chiamata Classic Cache Killer che cancella la cache ad ogni caricamento della pagina.

Chrome Store Link (gratuito) (Ora senza malware!)

Ora i miei finti json, javascript, css, html e dati si aggiornano ogni volta ad ogni caricamento della pagina .

Non devo mai preoccuparmi se devo svuotare la cache.

Ho trovato circa 20 pulitori di cache per Chrome, ma questo sembrava leggero e senza sforzo. In un aggiornamento, Cache Killer ora può rimanere "sempre attivo".

Nota: non conosco l'autore del plugin in alcun modo. L'ho appena trovato utile.

1. F12Apri la console per sviluppatori di Chrome premendo e poi (con la console aperta):

2. Fai clic con il pulsante destro del mouse (o tieni premuto il pulsante sinistro del mouse) sul pulsante Ricarica nella parte superiore del browser e seleziona "Svuota cache e Ricarica dura".

Questo andrà oltre "Hard Reload" per svuotare completamente la cache, assicurando che qualsiasi cosa scaricata tramite javascript o ecc eviti di usare la cache. Non devi fare confusione con le impostazioni o altro, è una rapida soluzione 1-shot.

Esistono altre due opzioni per disabilitare definitivamente la memorizzazione nella cache delle pagine in Chrome :

1. Disattiva Chrome Cache nel registro

Apri registro (Start -> Comando -> Regedit)

Cercare: HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command

Modificare la parte dopo ... chrom.exe "in questo valore: –disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

Esempio: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

IMPORTANTE:

• c'è uno spazio e un trattino dopo ... chrome.exe "

• lascia il percorso a chrome.exe così com'è

• Se copi la riga, assicurati di controllare se le virgolette sono effettive.

2. Disattiva la cache di Chrome modificando le proprietà del collegamento

Fare clic con il tasto destro sull'icona di Chrome e selezionare "Proprietà" nel menu contestuale. Aggiungi il seguente valore al percorso: –disk-cache-size=1

Esempio: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –disk-cache-size=1

IMPORTANTE:

• c'è uno spazio e un trattino dopo ... chrome.exe "

• lascia il percorso a chrome.exe così com'è

Se non desideri modificare le impostazioni di Chrome, puoi utilizzare la modalità di navigazione in incognito per gli stessi risultati.

Oltre all'opzione Disabilita cache (a cui si accede tramite un pulsante nell'angolo in basso a destra della finestra degli strumenti di sviluppo - Strumenti | Strumenti di sviluppo o Ctrl+ Shift+ I), nel riquadro di rete degli strumenti di sviluppo è ora possibile fare clic con il tasto destro del mouse e seleziona "Svuota cache" dal menu popup.

1. F12 per aprire Chrome DevTools
2. F1 per aprire le Impostazioni DevTools
3. Selezionare Disabilita cache (mentre DevTools è aperto) come mostrato di seguito:

Questo è attualmente nella scheda Preferenze che è l'impostazione predefinita. Potrebbe essere necessario scorrere verso il basso. Questa casella di controllo è stata spostata almeno un paio di volte da quando è stata posta questa domanda. L'ultima volta che ho controllato, era nella colonna centrale in fondo. Se lo hai aperto su uno schermo più sottile e ci sono 2 colonne in Preferenze, potrebbe essere in alto a destra. Sentiti libero di aggiornare questo post se cambia o commenta e aggiornerò il post.

Invece di colpire "F5" Basta premere:

"Ctrl + F5"

Nel Canale delle Canarie (e forse seguiranno il dev e il canale stabile) questa si trova come la seconda opzione complessiva sul lato sinistro nella sezione "Generale".

Oltre a ciò, c'è sempre la possibilità di passare alla modalità di navigazione in incognito tramite Ctrl + Maiusc + N. Anche se sfortunatamente ciò termina anche la sessione.

Usare Ctrl+ Shift+ Rper aggiornare è stato bello ma non ho ottenuto tutto ciò di cui avevo bisogno. tuttavia alcune cose non si aggiornano, come i dati memorizzati in js e css. trovato una soluzione: una barra degli strumenti di Google per gli sviluppatori web di Chrome . Dopo aver installato la barra degli strumenti selezionare le opzioni e "Ripristina pagina".

Per essere chiari, la casella di controllo Disabilita cache in Chrome (v17 qui, ma a partire dalla v15 credo) non si trova nell'interfaccia utente delle impostazioni principali. È nell'interfaccia utente delle impostazioni degli strumenti di sviluppo.

1. Dal menu icona chiave inglese della finestra del browser (menu prefs) selezionare Strumenti → Strumenti per sviluppatori

2. Nell'interfaccia utente degli strumenti di sviluppo visualizzata, fai clic sull'icona a forma di ingranaggio in basso a destra.

3. Seleziona la casella di controllo "Disabilita cache" nella sezione Rete.

Disabilitare la cache in Chrome funziona solo quando hai gli strumenti di sviluppo aperti

Fino a quando il bug non viene risolto, puoi utilizzare il plug-in Clear Cache Chrome e puoi anche impostare una scorciatoia da tastiera.

Dopo averlo installato, fai clic con il tasto destro e vai alle opzioni:

Controllare Automatically reload active tab after clearing data:

Seleziona Everythingper Periodo:

E poi puoi andare su Menu => Strumenti => Estensioni:

Fai clic sulle scorciatoie da tastiera in basso:

E imposta la scorciatoia da tastiera, ad esempio Ctrl+ Shift+ R:

In realtà, se non ti dispiace usare la larghezza di banda, è più sicuro per diversi motivi disabilitare la memorizzazione nella cache e consigliato da molti siti di sicurezza.

Chromium non dovrebbe essere abbastanza arrogante da prendere decisioni e applicare impostazioni agli utenti.

È possibile disabilitare la cache su UNIX con --disk-cache-dir = / dev / null.

Poiché si tratta di incidenti imprevisti, possono verificarsi incidenti, ma se lo fanno, ciò indicherà chiaramente un bug più grave che dovrebbe essere risolto in ogni caso.

Questo potrebbe aiutare qualcuno.

Ho truccato il mio Nginx per la pazza memorizzazione nella cache. Pertanto, la disabilitazione della cache negli strumenti di rete e la cancellazione esplicita della cache non funzionano.

Una soluzione molto semplice ma noiosa è, ho appena aperto una nuova scheda in incognito. Sorprendentemente funziona sempre!

Un duro aggiornamento in modalità di navigazione in incognito fa il trucco ogni volta che desidero ricaricare nella stessa modalità.

Che ne dite di un bookmarklet che cambia il nome della pagina per impedire alla pagina di memorizzare nella cache. In Chrome è necessario creare un nuovo segnalibro e quindi incollare il codice nell'URL. Fai clic sul segnalibro e la pagina verrà ricaricata con il timestamp per contrastare la cache.

javascript:(function(){var idx = location.href.indexOf('?');var d = new Date();var str = location.href.substr(0,idx) + '?version=' + d.getTime();location.href=str; void 0;})();

Sono stato sorpreso ma non necessariamente a causa di Chrome.

Sto usando jQuery per effettuare richieste AJAX. Nella richiesta avevo l'attributo cache impostato su true:

   $.ajax({
        type: 'GET',
        cache: true,
        ....

L'impostazione su false ha risolto il mio problema, ma non è l'ideale.

Non ho idea di dove vengano salvati questi dati, ma so che Chrome non ha mai raggiunto il server per una richiesta.

Ora c'è un modo migliore e più veloce (versione di Chrome 59.xx):

Fare clic con il tasto destro sull'icona di ricarica (a sinistra del campo URL) e si ottiene un menu a discesa, selezionare la terza opzione: 'svuota cache e ricarica dura'.

Questa opzione è disponibile solo quando gli strumenti per sviluppatori sono aperti. (Notare la differenza con l'opzione 2: 'Ricarica dura' -cmd-shift-R). Nessuna svuotamento della cache qui!

Nel Chrome Web Store è disponibile un'estensione Chrome denominata Clear Cache .

Lo uso ogni giorno ed è uno strumento molto utile penso. Puoi usarlo come pulsante di ricarica e cancellare la cache e, se ti piacciono anche i cookie, l'archiviazione delle impostazioni locali, i dati dei moduli, ecc. Puoi anche definire su quale dominio accade. Quindi puoi cancellare tutta questa merda con solo il pulsante di ricarica che devi comunque premere - sui domini scelti.

Molto molto carino!

Puoi anche definire una scorciatoia da tastiera per questo nelle opzioni!

Un altro modo è avviare la tua finestra di Chrome in modalità di navigazione in incognito. Anche qui la cache dovrebbe essere completamente disabilitata.

Un'altra opzione per disabilitare la cache è fornita dal mio 3 ° ispettore dimensioni pagina di Chrome che disabilita la cache esattamente come fa Devtools.

Inoltre, l'estensione riporta rapidamente le dimensioni della pagina, l'utilizzo della cache, le richieste di rete e il tempo di caricamento di una pagina Web in modo conveniente. Inoltre, è open source su Github .

Non sei sicuro di cosa stai usando, ma se stai usando ASP.Net puoi fare quanto segue che funziona come un incantesimo:

<link href="@Url.Content("~/Content/Site.css")?time=@DateTime.Now" rel="stylesheet" />

Fondamentalmente aggiungerà automaticamente la data e l'ora alla fine del file ogni volta che viene eseguito, il che significa che il nome del file è tecnicamente diverso, non dovrai mai preoccuparti che venga nuovamente memorizzato nella cache.

Ho avuto lo stesso problema, ho provato:

• Control Shift R,
• Disabilita la cache in F12
• Controlla F5.

Poi ho scoperto che l'utilizzo di un manifest .appcache per un sito non https è deprecato . Ho rimosso il mio file site.appcache e il suo riferimento nel tag html e ora vedo l'ultima versione di ogni pagina!

Se stai utilizzando ServiceWorkers (ad esempio: per le app Web progressive), probabilmente dovrai selezionare "Aggiorna alla ricarica" ​​in Applicazione> Operatori di servizio anche negli strumenti di sviluppo.

Dalla versione 50 (se ricordo bene), l'opzione "Disabilita cache" è stata rimossa dalle Impostazioni Devtool. Vai alla scheda "Rete" e c'è l'opzione "Disabilita cache".

Ehi, se il tuo sito utilizza PHP, posiziona il seguente frammento di PHP all'inizio della tua pagina HTML:

   //dev versioning - stop caching
   $rand = rand(1, 99999999);

Ora, ovunque carichi risorse come file CSS o JS in uno script o un elemento di collegamento, aggiungi il tuo valore casuale generato all'URL della richiesta dopo aver aggiunto "?" all'URI tramite PHP:

    echo $rand;

Questo è tutto! Non ci sarà più browser che memorizza nella cache il tuo sito, indipendentemente dal tipo.

Ovviamente rimuovi il tuo codice prima di pubblicare o semplicemente imposta $ rand su una stringa vuota per consentire di nuovo la memorizzazione nella cache.

Ho usato le altre opzioni sopra descritte ma trovo che la cosa migliore sia aggiungere il seguente parametro all'avvio di chrome.exe.

"C: \ Programmi (x86) \ Google \ Chrome \ Application \ chrome.exe" --disk-cache-size = 1 -media-cache = 1

Trovo che non disabilitare la cache multimediale sia una buona idea, ma è qui per completezza.

In realtà voglio un'opzione per disabilitare completamente la cache, per usare la memoria per IO invece del mio disco (il che renderebbe anche il tempo di caricamento 10 volte più veloce!) Ma non credo che Chrome o qualsiasi altro browser abbiano quell'opzione ancora .

Come posso disabilitare temporaneamente la cache o aggiornare la pagina in modo da poter vedere le modifiche?

Non è chiaro a quale "cache" ti riferisci. Esistono diversi metodi in cui un browser può memorizzare il contenuto in modo persistente. L'archiviazione Web è una di queste, Cache-Controlun'altra.

Alcuni browser hanno anche Cache, usato insieme a Service Workers , per creare Progressive Web App (PWA) che forniscono supporto offline.

Per cancellare la cache per un PWA

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

per elencare i nomi delle chiavi della cache, quindi eseguire:

self.caches.delete('my-site-cache')

per eliminare una chiave cache per nome (ad es my-site-cache.). Quindi aggiorna la pagina.

Se si verificano errori relativi al lavoratore nella console dopo l'aggiornamento, potrebbe essere necessario annullare la registrazione dei lavoratori registrati:

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

Chrome Cache Killer è di gran lunga l'opzione migliore. Poiché l'URL del negozio per installare cache killer non è attivo, è possibile scaricare il file CRX qui:

https://www.crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap/

una volta scaricato il file dell'estensione, apri Chrome -> altri strumenti -> estensioni, quindi trascina il file CRX da Esplora file o dal desktop (a seconda della posizione in cui hai scaricato il file) nella finestra di Chrome per installare l'estensione.

Uso (in Windows), Ctrl + Maiusc + Canc e quando viene visualizzata la finestra di dialogo di Chrome, premo il tasto Invio. Questo può essere configurato con ciò che deve essere cancellato ogni volta che si esegue questa sequenza. Non c'è bisogno di avere dev. gli strumenti si aprono in questo caso.

Ero in una situazione in cui il browser caricava i dati della cache dal disco anche se lo controllavo disabilitando la cache (stavo usando Chrome). Tutti i miei CSS e JS si stavano caricando dal server ma non dalla pagina web. Questo stava accadendo sia sul mio locale che sulla mia produzione.

Per risolverlo, devo inserire un parametro aggiuntivo nel mio URL per forzare il browser a ottenere la pagina Web dal server, anche se il controller non ne ha avuto bisogno.

Stavo usando ASP.Net, quindi ecco il mio esempio:

//Controller function
public ActionResult Index()
    {
        return View();
    }
//Link
@Html.Action("Index", "Home", new { ts = DateTime.Now.Ticks.ToString()})

Il risultato è che genererà un link come: http://www.myweb.com/Home/Index?ts=636558555408282209

Questa è la mia situazione e soluzione. Spero che possa aiutare qualcuno.