Hentikan Chrome Menyimpan File JS Saya

138

Saya akan membuat perubahan pada file JS saya tetapi tidak akan benar-benar berubah di browser, saya harus mengganti nama file setiap kali agar memuatnya kembali. Apakah ada semacam perintah .htaccess yang bisa saya tambahkan atau sesuatu untuk menghentikan caching?

Ia bahkan menyimpan hard core halaman html saya. Saya perlu membuka kembali seluruh browser saya hanya untuk melihat perubahan. Mungkinkah itu masalah server?

Howdy_McGee
sumber
Apakah mengaktifkan tajuk ETag di server web Anda menyebabkan Chrome menyimpan cache tetapi dengan benar mengambil salinan file baru ketika sudah berubah?
Pengembang

Jawaban:

201

Anda dapat mengklik ikon pengaturan di pojok kanan atas ...| Lebih Banyak Alat | Alat Pengembang | Jaringan | Nonaktifkan cache (saat DevTools terbuka)

Untuk windows, ini F12atau CTRL + SHIFT + Isaat di mac CMD + SHIFT + Imembuka DevTools.

Jalur baru untuk Pembaruan Chrome Sept 2018:

Klik ikon pengaturan di pojok kanan atas ...| Pengaturan | Preferensi | Alat Pengembang | Jaringan | Nonaktifkan cache (saat DevTools terbuka)

MartinHN
sumber
4
Kegagalan besar oleh Chrome untuk menyimpan sesuatu ... bahkan ketika halaman ditandai dengan Tidak ada cache .... Oh, setidaknya ini berfungsi, pengguna dapat menderita tetapi setidaknya saya dapat mengembangkannya
Robert Noack
4
Harap dicatat bahwa "Pengaturan" tidak lagi di kanan bawah! Klik menu tiga titik di kanan atas untuk masuk ke pengaturan.
yizzlez
4
Lokasi: pojok kanan atas | "..." | pengaturan | Preferensi | Jaringan | "Nonaktifkan cache" (saat DevTools terbuka).
atom88
2
Ini adalah PRAKTIK YANG SANGAT BURUK !!! Tidak, Anda tidak boleh memiliki peretasan sementara untuk Anda gunakan .... Anda harus memiliki solusi PERMANEN untuk SEMUA pengguna Anda. Cara terbaik adalah dengan string kueri acak di akhir src. src = "someJs.js? someRandomStringCreatedByInlineJsOrServerRenderedCode" yang akan membuatnya memiliki versi baru setiap saat. string acak yang bagus adalah mengambil tanggal / waktu hari ini dan melemparkannya ke sana. Anda mungkin harus mengubahnya menjadi string karena itu mungkin akan menjadi objek tanggal. Sungguh sangat buruk bahwa ini adalah jawaban yang dipilih dan diberi suara positif begitu banyak.
1
Mulai Chrome 61.0.3163.100, tampaknya opsi tersebut sekarang ada di Alat Lainnya / Kondisi Jaringan. Opsi "Alat Pengembang" tidak ada lagi.
justian17
61

Cara yang lebih cepat untuk melakukannya adalah dengan mengklik kanan ikon segarkan di samping bilah alamat dan memilih Empty Cache dan Hard reload

Pastikan saja alat dev Chrome terbuka. (Tekan F12) Ngomong-ngomong ... Trik ini hanya berfungsi di Chrome untuk Windows, Ubuntu, dan Mac OS

Nicole Rivers
sumber
2
FYI, saya mencoba semua ini, dan sama sekali tidak ada yang berhasil. Di mesin saya (dengan pengaturan default untuk Mountain Lion), F12 menampilkan dasbor.
Aubrey Goodman
2
bagaimana jauh lebih baik daripada jawaban yang diterima? Anda dapat memuat ulang secara normal dengan jawaban yang diterima.
SSH Ini
tidak, kamu tidak bisa. setidaknya saya tidak bisa. tidak ada jawaban yang berhasil untuk saya, masih memunculkan peringatan yang dihapus di file js lokal saya tetapi masih dalam file js cache di chrome.
Burak Karakuş
1
Bekerja untuk saya. Pastikan dev-tools terbuka, jika tidak klik kanan tidak akan menampilkan menu.
Venryx
Saya melihat opsi, tetapi dalam kasus saya, skrip tidak di-refresh.
justian17
25

Tahan shift sambil mengklik tombol muat ulang.

StilesCrisis
sumber
12

tambahkan Sesuatu seperti script.js?a=[random Number]dengan nomor acak yang dihasilkan oleh PHP.

Sudahkah Anda mencoba expire = 0, pragma "no-cache" dan "cache-control = NO-CACHE"? (Saya tidak tahu apa yang mereka katakan tentang Script).

EGOrecords
sumber
2
Saya menemukan pertanyaan ini dan membaca sekilas jawaban. Ini ide yang buruk, karena: 1) menghasilkan nomor acak pada setiap permintaan akan menyebabkan browser mengunduh ulang file pada setiap kunjungan. Anda menginginkan nilai waktu pembuatan , sehingga browser hanya membuat kembali nilai tersebut saat Anda membuat perubahan pada situs. Karena PHP diinterpretasikan waktu proses, Anda mungkin perlu melakukannya pada waktu penerapan. dan 2) menghasilkan nomor acak berarti bahwa kadang-kadang (dengan probabilitas meningkat dari waktu ke waktu), browser akan beberapa salinan cache lama acak. Jika Anda harus melakukannya pada waktu permintaan, gunakan stempel waktu!
JakeRobb
Saya melakukan ini dan menggunakan nomor versi build, dengan batas waktu yang layak (1 hari) pada nilai cache header
Layak7
11

Beberapa ide:

  1. Saat Anda menyegarkan halaman Anda di Chrome, lakukan CTRL + F5 untuk melakukan penyegaran penuh.
  2. Bahkan jika Anda menyetel kedaluwarsa ke 0, itu akan tetap cache selama sesi. Anda harus menutup dan membuka kembali browser Anda.
  3. Pastikan ketika Anda menyimpan file di server, cap waktu diperbarui. Chrome pertama-tama akan mengeluarkan HEADperintah alih-alih GET lengkap untuk melihat apakah perlu mengunduh file lengkap lagi, dan server menggunakan stempel waktu untuk melihatnya.

Jika Anda ingin menonaktifkan caching di server Anda, Anda dapat melakukan sesuatu seperti:

Header set Expires "Thu, 19 Nov 1981 08:52:00 GM"
Header set Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
Header set Pragma "no-cache"

Dalam .htaccess

Mike Christensen
sumber
Memiliki ini tetapi pre-check = 0, post-check = 0 adalah penambahan yang membuat perbedaan bagi saya.
TadLewis
7

Langkah cepat:

1) Buka dasbor Alat Pengembang dengan membuka Menu Chrome -> Alat -> Alat Pengembang

2) Klik pada ikon pengaturan di sisi kanan (itu roda gigi!)

3) Centang kotak "Nonaktifkan cache (saat DevTools terbuka)"

4) Sekarang, saat dasbor aktif, cukup tekan segarkan dan JS tidak akan disimpan dalam cache!

StackG
sumber
1
Namun, itu tidak membantu untuk men-debug menggunakan WebStorm. Kemudian DevTools terbuka, WebStrom tidak dapat memasang debugger.
Alexander Volkov
5

Masalahnya adalah Chrome harus memiliki must-revalidateheader Cache-Control` untuk memeriksa ulang file untuk melihat apakah mereka perlu diambil ulang.

Anda selalu dapat SHIFT-F5 dan memaksa Chrome untuk menyegarkan, tetapi jika Anda ingin memperbaiki masalah ini di server, sertakan header tanggapan ini:

Cache-Control: must-revalidate

Ini memberi tahu Chrome untuk memeriksa dengan server, dan melihat apakah ada file yang lebih baru. JIKA ada file yang lebih baru, itu akan menerimanya sebagai tanggapan. Jika tidak, itu akan menerima respons 304, dan jaminan bahwa yang ada di cache adalah yang terbaru.

Jika Anda TIDAK menyetel tajuk ini, jika tidak ada setelan lain yang membuat file tidak valid, Chrome tidak akan pernah memeriksa server untuk melihat apakah ada versi yang lebih baru.

Berikut adalah entri blog yang membahas masalah ini lebih lanjut.

AgilePro
sumber
1
Saya pikir itu harus Cache-Control: must-revalidatebukan Cache-Control: must-validate. Saya rasa yang terakhir tidak valid.
László Monda
3

Saat melakukan pembaruan pada aplikasi web saya, saya akan menggunakan penangan untuk mengembalikan satu file JS untuk menghindari hit besar-besaran di server saya, atau menambahkan string kueri kecil ke dalamnya:

<script type="text/javascript" src="/mine/myscript?20111205"></script>
Ryan Ternier
sumber
2
Meskipun ini terlihat seperti praktik yang cerdik, Anda mungkin mendapatkan masalah dengan beberapa proxy yang akan berhenti menyimpan cache ketika mereka menemukan string kueri: developers.google.com/speed/docs/best-practices/…
Francois Bourgeois
2
Jadi, apa yang harus Anda lakukan?
BlueSky
1
<Files *>
Header set Cache-Control: "no-cache, private, pre-check=0, post-check=0, max-age=0"
Header set Expires: 0
Header set Pragma: no-cache
</Files>
Alfabravo
sumber
1

Saya tahu ini adalah pertanyaan "lama". Tapi sakit kepala dengan caching tidak pernah ada. Setelah banyak percobaan dan kesalahan, saya menemukan bahwa salah satu penyedia web hosting kami melalui CPanel aplikasi ini disebut Cachewall. Saya baru saja mengklik Enable Development mode dan ... voila !!! Ini langsung menghentikan rasa sakit yang telah lama diderita :) Semoga ini bisa membantu orang lain ... R

Ramon Araujo
sumber
0

Saya mendapatkan file css yang sama ketika saya menjelajahi situs web (di server perusahaan hosting dengan domain asli) dan saya tidak bisa mendapatkan versi terbaru di chrome. Saya bisa mendapatkan versi file yang diperbarui saat saya menjelajahinya di Firefox. Tak satu pun dari jawaban ini berhasil untuk saya. Saya juga memiliki file situs web di mesin saya dan menjelajahi situs dengan localhost menggunakan server apache lokal saya. Saya mematikan server apache saya dan saya bisa mendapatkan file yang diperbarui. Entah bagaimana server apache lokal saya mengacaukan cache chrome. Semoga ini bisa membantu seseorang karena sangat sulit bagi saya untuk memperbaikinya.

Alp Hancıoğlu
sumber
0
  1. Buka Alat Pengembang

    • Salah satu dari F12
    • Atau ...-> More Tools->Developer Tools
  2. Klik Empty Cache and Hard Reload

    • Baik klik kanan ikon segarkan (di kiri ke bilah alamat url)
    • Atau klik kiri ikon segarkan dan tahan selama 1 detik
Xin
sumber