Bagaimana cara memaksa browser Chrome untuk memuat ulang file .css saat melakukan debugging di Visual Studio?

Saat ini saya sedang mengedit file .css di dalam Visual Studio 2012 (dalam mode debug). Saya menggunakan Chrome sebagai browser saya. Ketika saya membuat perubahan pada file .css aplikasi saya di dalam Visual Studio dan menyimpan, menyegarkan halaman tidak akan memuat dengan perubahan yang diperbarui dalam file .css saya. Saya pikir file .css masih di-cache.

Saya telah mencoba:

1. CTRL / F5
2. Di Visual Studio 2012, Buka properti proyek, tab Web Pilih Mulai Program Eksternal di bagian Mulai Tindakan Tempel atau telusuri ke jalur untuk Google Chrome (Tambang adalah C: \ Users \ xxx \ AppData \ Lokal \ Google \ Chrome \ Aplikasi \ chrome.exe) Pada kotak argumen Command line put -incognito
3. Dengan menggunakan alat pengembang Chrome, klik ikon "roda gigi", centang "Nonaktifkan Cache."

Sepertinya tidak ada yang berfungsi kecuali saya menghentikan debugging secara manual, (tutup Chrome), restart aplikasi (dalam debug).

Apakah ada cara untuk memaksa Chrome untuk selalu memuat ulang semua perubahan css dan memuat kembali file .css?

Pembaruan:
1. Perubahan gaya in-line di file .aspx saya diambil saat saya menyegarkan. Tetapi perubahan dalam file .css tidak. 2. Ini adalah aplikasi ASP.NET MVC4 jadi saya mengklik hyperlink, yang mendapatkan GET. Melakukan itu, saya tidak melihat permintaan baru untuk stylesheet. Tetapi mengklik F5, file .css dimuat ulang dan kode Status (pada tab jaringan) adalah 200.

Ada banyak solusi yang lebih rumit, tetapi yang sangat mudah, sederhana adalah hanya menambahkan string kueri acak ke CSS Anda.

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

Jika Anda menggunakan php atau bahasa sisi server lain, Anda dapat melakukannya secara otomatis time(). Jadi itu akan terjadistyles.css?v=<?=time();?>

Dengan cara ini, string kueri akan menjadi baru setiap kali. Seperti yang saya katakan, ada solusi yang jauh lebih rumit yang lebih dinamis, tetapi untuk tujuan pengujian metode ini adalah yang teratas (IMO).

Untuk memaksa chrome untuk memuat ulang css dan js:

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

OS X: ⌘+ SHIFT+R

Diperbarui seperti yang dinyatakan oleh @PaulSlocum di komentar (dan banyak yang dikonfirmasi)

Jawaban asli:

Chrome mengubah perilaku. Ctrl+ Rakan melakukannya.

Pada OS X: ⌘+R

Jika Anda mengalami masalah reload file css / js, buka inspektur ( CTRL+ SHIFT+ C) sebelum melakukan reload.

[BACA PEMBARUAN DI BAWAH INI]

Cara termudah yang saya temukan adalah dalam pengaturan Chrome DevTools. Klik ikon roda gigi (atau 3 titik vertikal, dalam versi yang lebih baru) di kanan atas DevTools untuk membuka dialog "Pengaturan". Di sana, centang kotak: "Nonaktifkan cache (saat DevTools terbuka)"

UPDATE: Sekarang pengaturan ini telah dipindahkan. Itu dapat ditemukan di tab "Jaringan", ini kotak centang berlabel "Nonaktifkan Cache".

Anda sedang berhadapan dengan masalah cache browser.

Nonaktifkan cache di halaman itu sendiri. Itu tidak akan menyimpan file pendukung halaman di 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" />

Kode ini yang Anda perlukan / perlu masukkan dalam headtag halaman yang sedang Anda debug, atau dalam headtag master pagesitus Anda

Ini tidak akan memungkinkan browser untuk menyimpan file cache, akhirnya file tidak akan disimpan dalam file sementara browser, jadi tidak ada cache, jadi tidak perlu memuat ulang :)

Saya yakin ini akan dilakukan :)

Dalam kasus saya, dalam pengaturan Chrome DevTools, cukup setel "Nonaktifkan cache (saat DevTools terbuka)" tidak berfungsi, perlu memeriksa "Aktifkan peta sumber CSS" dan "Auto-reload CSS yang dihasilkan", yang tercantum dalam sumber grup, untuk menghilangkan masalah cache ini.

Tekan SHIFT+ F5.

Ini berfungsi untuk saya dengan Chrome versi 54.

Saya menghadapi masalah yang sama di sini! tapi saya yakin, resolusi saya lebih baik dari semua contoh di atas, lakukan saja ini,

1. Tarik konsol pengembang Chrome dengan menekan F12
2. Klik kanan pada tombol reload di bagian atas browser dan pilih "Empty Cache and Hard Reload."

Itu dia!

Dengan macOS saya dapat memaksa Chrome untuk memuat ulang file CSS dengan melakukan

⌘+ SHIFT+R

Menemukan jawaban ini terkubur dalam komentar di sini tetapi layak mendapat paparan lebih banyak.

Versi Chrome saat ini (55.x) tidak memuat ulang semua sumber daya saat Anda memuat ulang halaman (Command + R) - dan itu tidak berguna untuk men-debug file .css.

Command + R berfungsi dengan baik jika Anda ingin men-debug hanya file .html, .php, .etc, dan lebih cepat karena berfungsi dengan sumber daya lokal / cache (.css, .js). Menghapus cache browser secara manual untuk setiap iterasi debug tidak nyaman.

Prosedur untuk memaksa memuat ulang file .css pada Mac (Pintasan Keyboard / Chrome): Command + Shift + R

Saya menggunakan Edge Version 81.0.416.64 (Pembuatan resmi) (64-bit) dan didasarkan pada proyek sumber terbuka Chromium.

Tekan F12untuk masuk ke Dev Tools.
Klik Network Tab
Periksa Disable cache

Saya tahu ini pertanyaan lama, tetapi jika ada yang masih mencari cara memuat ulang hanya satu file css / js eksternal, cara termudah sekarang di Chrome adalah:

1. Buka tab Network di DevTools
2. Klik kanan pada sumber daya dan pilih Putar Ulang XHR untuk mengulangi permintaan

Pastikan bahwa opsi Nonaktifkan cache dipilih untuk memaksa memuat ulang.

Untuk macOS Chrome:

1. Buka alat pengembang cmd+ alt+i
2. Klik tiga titik di sudut kanan atas alat pengembang
3. Klik pengaturan
4. Gulir ke bawah ke Network
5. Aktifkan Disable cache (while DevTools is open)lihat tangkapan layar:

Mengapa perlu menyegarkan seluruh halaman? Refresh hanya file css tanpa memuat ulang halaman. Sangat membantu ketika, misalnya, Anda harus menunggu respons panjang dari DB. Setelah Anda mendapatkan data dari DB dan mengisi halaman, kemudian edit file css Anda dan muat ulang di Chrome (atau di Firefox). Untuk melakukan itu, Anda perlu menginstal ekstensi CSS Reloader . Versi Firefox juga tersedia.

Anda dapat menyalin tempel skrip ini ke konsol Chrome dan memaksa skrip CSS Anda memuat ulang setiap 3 detik. Terkadang saya merasa berguna ketika saya meningkatkan gaya 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);

Saya diselesaikan dengan trik sederhana ini.

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

Masih menjadi masalah.

Menggunakan parameter seperti "..css? Something = random-value" tidak mengubah apa pun dalam pengalaman dukungan pelanggan saya. Hanya perubahan nama yang berfungsi.

Lain mengambil nama file. Saya menggunakan penulisan ulang URL di IIS. Terkadang Helicon's Isapi Rewrite.

Tambahkan aturan baru.

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

Catatan: Saya memesan penggunaan huruf kecil untuk memisahkan nama dari nomor acak. Bisa jadi yang lain.

Contoh:

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

(Tidak ada folder gaya, itu hanya nama bagian dari pola)

Kode keluaran sebagai:

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

Redirect sebagai:

(R: 1 = templat)

/template.css

Hanya penjelasannya panjang.

Baru saja mengalami masalah ini di mana satu orang yang menjalankan Chrome (di Mac) tiba-tiba berhenti memuat file CSS. CMD + R TIDAK bekerja sama sekali. Saya tidak suka saran di atas yang memaksa memuat ulang permanen pada sistem produksi.

Apa yang berhasil adalah mengubah nama file CSS di file HTML (dan tentu saja mengganti nama file CSS). Ini memaksa Chrome untuk mendapatkan file CSS terbaru.

Jika Anda menggunakan Sublime Text 3, menggunakan sistem build untuk membuka file membuka versi terbaru dan menyediakan cara mudah untuk memuatnya melalui [CTRL + B] Untuk mengatur sistem build yang membuka file dalam chrome:

1. Pergi ke 'Alat'

2. Arahkan mouse Anda ke 'sistem bangun'. Di bagian bawah daftar yang muncul, klik 'Sistem Bangun Baru ...'

3. Dalam tipe file sistem bangun yang baru ini:

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

** asalkan jalur yang disebutkan di atas dalam set kutipan pertama adalah path ke tempat chrome berada di komputer Anda, jika tidak hanya menemukan lokasi chrome dan ganti path di set kutipan pertama dengan path ke chrome di komputer Anda.

Cara paling sederhana untuk mencapai tujuan Anda adalah membuka jendela penyamaran baru di krom atau jendela pribadi di firefox yang secara default akan, bukan cache.

Anda dapat menggunakan ini untuk tujuan pengembangan sehingga Anda tidak harus menyuntikkan beberapa kode pencegah cache acak dalam proyek Anda.

Jika Anda menggunakan IE maka semoga tuhan membantu Anda!

Ctrl + F5

Shift + F5

Keduanya bekerja

Cara termudah di Safari 11.0 macOS SIERRA 10.12.6: Muat Ulang Halaman Dari Asal, Anda dapat menggunakan bantuan untuk mencari tahu di mana dalam menu itu berada, atau Anda dapat menggunakan opsi pintasan (alt) + perintah + R.

Chrome/firefox/safari/IE akan memuat ulang seluruh halaman dengan cara pintas ini

Ctrl+ R (OR) Ctrl+F5

Semoga ini bisa membantu Anda !.

Jika Anda menggunakan SiteGround sebagai perusahaan hosting Anda dan tidak ada solusi lain yang berhasil, coba ini:

Dari cPanel, buka "SITE IMPROVEMENT TOOLS" dan klik "SuperCacher." Pada halaman berikut, klik tombol "Flush Cache".