Bagaimana cara memaksa debugger skrip Chrome untuk memuat ulang javascript?

244

Saya benar-benar menyukai kemampuan untuk mengedit javascript di chrome debugger, namun, saya merasa sangat bermasalah jika mendapatkan debugger untuk mengambil kembali JavaScript dari server.

Kadang-kadang saya harus pergi sejauh hanya menutup debugger dan memuat ulang frame berfungsi OK - tetapi di lain waktu (dI tidak dapat dijabarkan dalam kondisi apa ini terjadi) saya harus menghapus cache internet sementara saya. Terkadang saya bersumpah bahwa saya harus menutup chrome sepenuhnya, kemudian membersihkan cache dan kemudian memuat halaman sebelum debugger akhirnya menunjukkan kepada saya skrip yang paling mutakhir.

(NB. Tidak ada caching skrip oleh server web)

Saya bertanya-tanya apakah ada yang tahu cara cepat dan mudah untuk memberitahu debugger untuk membatalkan semua javascript-nya dan mengambil semuanya lagi di halaman yang memuat ulang?

google-chrome google-chrome-devtools Chris Fewtrell
sumber
1
Kadang-kadang saya bahkan harus me-restart IIS Express untuk mendapatkan hal-hal untuk memuat ulang dengan benar.
Chris O

Jawaban:

330

Saat Anda mengembangkan skrip, coba nonaktifkan cache Chrome.

Saat Anda memuat ulang halaman, JavaScript sekarang harus di-refresh.

Chrome sekitar tahun 2011

Buka pengaturan Nonaktifkan cache

Chrome sekitar tahun 2018

Buka pengaturan Nonaktifkan cache

Anda juga dapat mengaksesnya di tab jaringan:

Tab jaringan

adrianbank
sumber
8
Jadi, apakah ini berlaku sepanjang waktu, atau hanya ketika debugger terbuka?
PilotBob
7
hanya ketika Dev Tools terbuka
Karolis
11
Saya telah menetapkan itu selama ini, dan sekarang tiba-tiba, saya terjebak dengan file tertentu. Adakah yang menemukan solusi?
IronicMuffin
5
Ini baru saja menambahkan beberapa tahun ke dalam hidup saya. Saya mencoba CMD + SHIFT + R tetapi itu tidak berhasil. Terima kasih
Kevin Zych
7
Bagi mereka yang datang ke pertanyaan ini baru-baru ini, perhatikan bahwa menu pengaturan mati dari tiga titik vertikal menu di Alat Pengembang. Di sana Anda akan dapat mencentang kotak untuk menonaktifkan cache.
Scott C Wilson
136

masukkan deskripsi gambar di sini

Menu konteks yang ditunjukkan di atas dapat diakses dengan mengklik kanan / menekan & menahan tombol "muat ulang", sementara Alat Chrome Dev dibuka .

Cache kosong dan hard reload paling cocok untuk saya.

Keuntungan Lain: Opsi ini membuat semua tab dan data situs web yang terbuka tidak tersentuh. Ini hanya memuat ulang dan membersihkan halaman saat ini.

Bishoy Hanna
sumber
5
Yang itu berguna terutama karena mudah dijelaskan. Saya berada di bawah masalah dengan klien yang tidak melihat modifikasi yang dibuat di situs webnya. Tekan F12, lalu klik kanan pada tombol reload, pilih Empty Cache dan Hard Reload. Saya sudah selesai, terima kasih atas komentar itu :-)
Gull_Code
Ini adalah fitur chrome terbaik :), kapan saja sobat.
Bishoy Hanna
1
Terima kasih! Saya mencoba mencari tahu mengapa tombol Reload terkadang memberi saya menu dan terkadang tidak.
iconoclast
1
Saya tidak punya masalah dengan Ctrl + Shift + R ketika memuat ulang file Javascript, tetapi ini tidak akan mengembalikan konten yang diperbarui yang disajikan dalam file HTML. Empty Cache dan Hard Reload melakukan trik untuk itu.
S. Baggy
Cara terbaik untuk melakukannya, gunakan cache kosong ini dan hard reload
hoogw
34

Anda selalu dapat menghapus file tertentu dengan melakukan hal berikut:

  1. Buka Alat Dev
  2. Klik pada tab Sumber
  3. Temukan skrip / gambar / file Anda
  4. Periksa panel kanan untuk melihat apakah file Anda terbaru

Jika tidak:

  1. Klik kanan sumber daya di panel kiri dan pilih 'Buka Tautan di Tab Baru'
  2. Paksa ulang sumber daya dengan metode di atas. (Lihat contoh @Bishoy Hanna)

Ini sangat berguna jika Anda memiliki sumber daya yang ada dalam bingkai dan CTRL+F5tidak memaksa menyegarkannya.

Steve Tauber
sumber
1
benar. menekan CTRL + F5 = Bersihkan cache refresh halaman saat ini
STEEL
Saya tidak memiliki tab Sumber Daya.
Mike W
@ MikeW sudah diganti namanya menjadi Sumber - Saya sudah memperbarui jawabannya
Steve Tauber
12

Shift+ F5dengan cepat menghapus cache.

Peter Kelly
sumber
18
ctrl-f5 tidak memotong mustard saya takut. File javascript lama tetap ada di debugger.
Chris Fewtrell
9

Untuk Google chrome itu bukan Ctrl+ F5. Ini Shift+ F5untuk menghapus cache saat ini! Ini bekerja untuk saya!

RPDeshaies
sumber
Mengapa Saya tidak mengerti apa perbedaan antara itu dan komentar. Pada akhirnya, pertanyaan yang paling berguna akan dilihat di bagian atas posting.
RPDeshaies
2
Penanya tidak menyebutkan Ctrl-F5 pada titik mana pun , jadi menurut definisi, jawaban Anda bukan jawaban atas pertanyaan yang diajukan oleh si penanya, melainkan komentar , koreksi terhadap jawaban orang lain dan harus diperlakukan seperti itu.
Edward A
9

Berikut ini jalan pintas ke DevTools:

  1. F12 untuk membuka Chrome DevTools
  2. F1 untuk membuka Pengaturan DevTools
  3. Periksa Nonaktifkan cache (saat DevTools terbuka) seperti yang ditunjukkan di bawah ini:

masukkan deskripsi gambar di sini

Catatan: Diperbarui per komentar Dimi. Mereka cenderung memindahkannya, jadi beri tahu saya atau perbarui pos jika Anda melihat bahwa itu diubah.

Tony L.
sumber
3

Di Windows, Ctrl+ Shift+ rakan memaksa memuat ulang skrip di chrome.

Vijay Nandwana
sumber
2

Jika Anda membuat perubahan lokal ke javascript di Alat Pengembang, Anda harus memastikan bahwa Anda menonaktifkan OFF perubahan itu sebelum memuat ulang halaman.

Di tab Sumber, dengan skrip Anda terbuka, klik kanan pada skrip Anda dan klik opsi "Modifikasi Lokal" dari menu konteks. Itu memunculkan daftar skrip yang telah Anda simpan modifikasi. Jika Anda melihatnya di jendela itu, Alat Pengembang akan selalu menyimpan salinan lokal Anda daripada menyegarkannya dari server. Klik tombol "kembalikan", lalu segarkan kembali, dan Anda akan mendapatkan salinan baru.

Steve K.
sumber
1

Sepertinya debugger Chrome memuat file sumber ke dalam memori dan tidak akan membiarkannya pergi meskipun ada pembaruan cache browser, yaitu ia memiliki cache sendiri selain dari cache browser yang tidak sinkron. Setidaknya, ini adalah kasus ketika bekerja dengan sumber file yang dipetakan (Saya men-debug sumber naskah). Setelah berhasil menyegarkan cache browser dan memvalidasi itu dengan menelusuri langsung ke file sumber, Anda mengunduh file yang diperbarui, tetapi segera setelah Anda membuka kembali file dalam debugger itu akan tetap mengembalikan file lama tidak peduli versi dari cache browser yang biasa. Sangat anoying.

Saya akan menganggap ini bug di chrome. Saya menggunakan versi Versi 46.0.2490.71 m.

Satu-satunya hal yang membantu, adalah me-restart chrome (tutup semua browser chrome).

David Fahlander
sumber
0

Jika file yang Anda muat di-cache dan jika perubahan yang Anda buat tidak mencerminkan dalam kode maka ada 2 cara Anda dapat menangani ini

  1. Bersihkan Cache seperti yang dikatakan semua orang

  2. Jika Anda ingin Cache dan hanya file yang harus dimuat ulang, Anda dapat pergi ke tab jaringan alat dev dan menghapus apa pun yang dimuat. lain kali itu tidak akan memuatnya dari cache. Anda akan memiliki perubahan terbaru Anda.

iamshravan
sumber
0

Jika Anda menjalankan server lokal di Apache, Anda bisa mendapatkan apa yang tampak seperti masalah caching. Ini terjadi pada saya ketika saya memiliki server Apache berjalan di bawah Vagrant (di virtualbox).

Cukup tambahkan baris berikut ke file konfigurasi Anda ( /etc/httpd/conf/httpd.confatau yang setara):

#Disable image serving for network mounted drive
EnableSendfile off

Perhatikan bahwa ada baiknya mencari melalui file konfigurasi untuk melihat apakah EnableSendfilediatur ke ontempat lain.

MattCochrane
sumber
0

Ada juga 2 solusi (cepat):

  1. Gunakan mode penyamaran saat debugging, tutup jendela dan buka kembali.
  2. Hapus riwayat penjelajahan Anda
Vladimir verleg
sumber
0

Menonaktifkan Breakpoints menyebabkan skrip baru dimuat untuk saya.

Mike W
sumber
0

Menurut pendapat saya itu paling mudah untuk bekerja di 'sesi penelusuran pribadi' chrome, untuk memastikan bahwa file javascript Anda tidak berasal dari cache.

scottbiker
sumber