Forza il browser per aggiornare css, javascript, ecc

Sto sviluppando un sito web basato sul codice sorgente di WordPress tramite XAMPP. A volte cambio codice CSS, script o qualcos’altro e noto che il mio browser impiega tempo per applicare le modifiche. Questo mi porta ad usare più browser per aggiornarne uno e se non si applicano i nuovi stili provo il secondo ed è sempre questo.

C’è un modo per evitare questo problema? A volte sto cambiando codice senza notare le modifiche precedenti.

Soluzione generale

Premere Ctrl + F5 (o Ctrl + Shift + R ) per forzare il caricamento della cache. Credo che i Mac usino Cmd + Shift + R.

PHP

In PHP, puoi disabilitare la cache impostando la data di scadenza in un momento nel passato con le intestazioni:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT"); header("Last-Modified: " . gmdate("D, d MYH:i:s") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); 

Cromo

La cache di Chrome può essere distriggersta aprendo gli strumenti di sviluppo con F12 , facendo clic sull’icona a forma di ingranaggio nell’angolo in basso a destra e selezionando Disabilita cache nella finestra di dialogo delle impostazioni, in questo modo:

inserisci la descrizione dell'immagine qui
Immagine presa da questa risposta .

Firefox

Digitare about:config nella barra degli URL, quindi trovare la voce denominata network.http.use-cache . Imposta questo su false .

Se vuoi evitare che sul lato client puoi aggiungere qualcosa come ?v=1.x al link del file css, quando il contenuto del file viene cambiato. per esempio se ci fosse puoi cambiarlo in caching.

Se riesci a scrivere php, puoi scrivere:

    

Si aggiornerà sempre!

EDIT: Certo, non è molto pratico per un intero sito web, dal momento che non lo aggiungerebbe manualmente per tutto.

Prova a svuotare la cache del browser.

È ansible distriggersre la memorizzazione nella cache con la barra degli strumenti di sviluppo Web di Firefox.

Assicurati che questo non stia accadendo dal tuo DNS. Ad esempio, Cloudflare è in grado di triggersre la modalità di sviluppo in cui impone un’eliminazione dei fogli di stile e delle immagini mentre Cloudflare offre una cache accelerata. Questo lo disabiliterà e lo costringerà ad aggiornare ogni volta che qualcuno visita il tuo sito.

Questa estensione di Firefox era l’unica soluzione che potevo ottenere per funzionare: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/

La risposta accettata sopra è corretta. Se, tuttavia, si desidera ricaricare periodicamente la cache e si sta utilizzando Firefox, gli strumenti di sviluppo Web (sotto la voce di menu Strumenti a novembre 2015) forniscono un’opzione di rete. Questo include un pulsante Ricarica. Seleziona il Ricarica per un reset della cache una tantum.

  

Si aggiorna se modifica.

Se si vuole essere sicuri che questi file vengano aggiornati correttamente da Chrome per tutti gli utenti, è necessario eseguire l’aggiornamento must-revalidate nell’intestazione Cache-Control . Ciò farà sì che Chrome ricontrolla i file per vedere se devono essere riprogrammati.

Raccomanda la seguente intestazione di risposta:

 Cache-Control: must-validate 

Questo dice a Chrome di controllare con il server, e vedere se c’è un file più recente. Se c’è un file più recente, lo riceverà nella risposta. In caso contrario, riceverà una risposta 304 e la certezza che quello nella cache sia aggiornato.

Se NON imposti questa intestazione, in assenza di altre impostazioni che invalidano il file, Chrome non verificherà mai con il server se è disponibile una versione più recente.

Ecco un post sul blog che discute ulteriormente il problema.

Punto di vista dello sviluppatore
Se si è in modalità sviluppo (come nella domanda originale), l’approccio migliore è disabilitare la memorizzazione nella cache nel browser tramite meta tag HTML. Per rendere questo approccio universale, devi inserire almeno tre meta tag come mostrato di seguito.

    

In questo modo, tu come sviluppatore, devi solo aggiornare la pagina per vedere le modifiche. Ma non dimenticare di commentare quel codice quando è in produzione, dopo tutto il caching è una buona cosa per i tuoi clienti.

Modalità di produzione
Poiché in produzione si consente il caching e i tuoi clienti non hanno bisogno di sapere come forzare un ricaricamento completo o qualsiasi altro trucco, devi garantire che il browser caricherà il nuovo file. E sì, in questo caso, l’approccio migliore che conosco è quello di cambiare il nome del file.

controlla il plugin CSS Cache Buster – questo aggiunge automaticamente un numero casuale all’URL del foglio di stile, proprio come la risposta di loler. la v = deve essere diversa ogni volta che hai bisogno di un nuovo look al css.

http://www.alistercameron.com/2008/09/12/wordpress-plugin-css-cache-buster/

Ciò assicurerà inoltre che i tuoi utenti ricevano l’ultimo file CSS se cambi qualcosa durante la live.

Prova questo:

 link href="styles/style.css?=time()" rel="stylesheet" type="text/css" 

Se hai bisogno di qualcosa dopo il ‘?’ questo è diverso ogni volta che si accede alla pagina, quindi il time() lo farà. Lasciare permanentemente questo nel tuo codice non è una buona idea dato che rallenterà il caricamento della pagina e probabilmente non è necessario.

Ho scoperto che forzare l’aggiornamento di un foglio di stile è utile se hai apportato ampie modifiche al layout di una pagina e l’accesso al nuovo foglio di stile è fondamentale per far apparire qualcosa di sensato sullo schermo.