Visual Studio'da hata ayıklama sırasında Chrome tarayıcısını .css dosyasını yeniden yüklemeye zorlamak nasıl?

Şu anda (hata ayıklama modunda) Visual Studio 2012 içinde bir .css dosyasını düzenliyorum. Chrome'u tarayıcım olarak kullanıyorum. Uygulamamın Visual Studio içindeki .css dosyasında değişiklik yaptığımda ve kaydettiğimde, sayfayı yenilemek .css dosyamdaki güncelleştirilmiş değişiklikle yüklenmeyecek. Bence .css dosyası hala önbelleğe alınmış.

Denedim:

1. CTRL / F5
2. Visual Studio 2012'de Proje özelliklerine git, Web sekmesi Eylem Başlat bölümünde Harici Programı Başlat'ı seçin Google Chrome yolunu yapıştırın veya bu yola göz atın (Mine C: \ Kullanıcılar \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe) Komut satırı bağımsız değişkenleri kutusuna put -incognito
3. Chrome geliştirici araçlarını kullandığınızda, "dişli çark" simgesini tıklayın, "Önbelleği Devre Dışı Bırak" seçeneğini işaretleyin.

Hata ayıklamayı manuel olarak durdurmadıkça (Chrome dışında), uygulamayı yeniden başlatmadıkça (hata ayıklamada) hiçbir şey işe yaramaz.

Chrome'u her zaman tüm css değişikliklerini ve .css dosyasını yeniden yüklemeye zorlamanın bir yolu var mı?

Güncelleme:
1. Yenilendiğimde .aspx dosyamdaki satır içi stil değişiklikleri alınır. Ancak .css dosyasındaki değişiklikler değişmez. 2. Bir ASP.NET MVC4 uygulaması bu yüzden bir GET yapan bir köprü tıklayın. Bunu yaparken, stil sayfası için yeni bir istek görmüyorum. Ancak F5'i tıklattığınızda, .css dosyası yeniden yüklenir ve Durum kodu (ağ sekmesinde) 200'dür.

Çok daha karmaşık çözümler var, ama çok kolay, basit bir sadece CSS dahil rastgele bir sorgu dizesi eklemek içindir.

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

Php veya başka bir sunucu tarafı dili kullanıyorsanız, bunu otomatik olarak ile yapabilirsiniz time(). Yani olurdustyles.css?v=<?=time();?>

Bu şekilde, sorgu dizesi her seferinde yeni olacaktır. Dediğim gibi, daha dinamik olan çok daha karmaşık çözümler var, ancak test amaçlı olarak bu yöntem en üstte (IMO).

Chrome'u css ve js'yi yeniden yüklemeye zorlamak için:

Windows seçenek 1: CTRL+ SHIFT+ R
Windows seçenek 2: SHIFT+F5

OS X: ⌘+ SHIFT+R

Yorumlarda @PaulSlocum tarafından belirtildiği şekilde güncellendi (ve çoğu onaylandı)

Orijinal cevap:

Chrome davranışı değiştirdi. Ctrl+ Ryapacak.

OS X'te: ⌘+R

Css / js dosyalarını yeniden yüklemekte sorun yaşıyorsanız yeniden yüklemeyi yapmadan önce denetleyiciyi ( CTRL+ SHIFT+ C) açın.

[AŞAĞIDAKİ GÜNCELLEMEYİ OKUYUN]

Bulduğum en kolay yol Chrome DevTools ayarlarında. "Ayarlar" iletişim kutusunu açmak için DevTools'un sağ üst kısmındaki dişli çark simgesini (veya daha yeni sürümlerde 3 dikey nokta) tıklayın. Orada kutuyu işaretleyin: "Önbelleği devre dışı bırak (DevTools açıkken)"

GÜNCELLEME: Şimdi bu ayar taşındı. "Ağ" sekmesinde bulunabilir, "Önbelleği Devre Dışı Bırak" etiketli bir onay kutusudur.

Tarayıcı önbelleği sorunuyla ilgileniyorsunuz.

Sayfanın kendisinde önbelleği devre dışı bırakın. Bu, desteklenen sayfa dosyasını tarayıcı / önbellekte kaydetmez.

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

headHata ayıkladığınız sayfanın headetiketine veya master pagesitenizin etiketine eklemeniz gereken / eklemeniz gereken bu kod

Bu, tarayıcının dosyayı önbelleğe almasına izin vermez, sonunda dosyalar tarayıcı geçici dosyalarında saklanmaz, bu nedenle önbellek olmaz, bu nedenle yeniden yükleme gerekmez :)

Eminim bunu yapacak :)

Benim durumumda, Chrome DevTools ayarlarında, sadece "Önbelleği devre dışı bırak (DevTools açıkken)" ayarının çalışmadığı durumlarda, kaynakta listelenen "CSS kaynak haritalarını etkinleştir" ve "Oluşturulan CSS'yi otomatik olarak yeniden yükle" öğelerini işaretlemesi gerekir. Bu önbellek sorununu ortadan kaldırmak için.

SHIFT+ Tuşuna basın F5.

Chrome sürüm 54 ile benim için çalışıyor.

burada da aynı sorunla karşılaşmıştım! ama eminim, kararım yukarıdaki tüm örneklerden daha iyidir, sadece bunu yapın,

1. F12 tuşuna basarak Chrome geliştirici konsolunu yukarı çekin
2. Tarayıcının üst kısmındaki yeniden yükle düğmesini sağ tıklayın ve "Önbelleği ve Sabit Yeniden Yükleme'yi Boşalt" ı seçin.

Hepsi bu kadar!

MacOS ile Chrome'u yaparak CSS dosyasını yeniden yüklemeye zorlayabilirim

⌘+ SHIFT+R

Yorumların gömülmüş bu cevabı bulundu burada ama daha pozlama hak etti.

Chrome'un (55.x) geçerli sürümü, sayfayı yeniden yüklediğinizde (Command + R) tüm kaynakları yeniden yüklemez - ve bu .css dosyasında hata ayıklamak için yararlı değildir.

Yalnızca .html, .php, .etc dosyalarında hata ayıklamak istiyorsanız Command + R iyi çalışır ve yerel / önbelleğe alınmış kaynaklarla (.css, .js) çalıştığı için daha hızlıdır. Her hata ayıklama yinelemesi için tarayıcının önbelleğini manuel olarak silmek uygun değildir.

Mac'te .css dosyasını yeniden yüklemeye zorlama prosedürü (Klavye Kısayolu / Chrome): Command + Shift + R

Ben kullanıyorum Kenar Versiyon 81.0.416.64 (Resmi inşa) (64-bit) ve onun Chromium açık kaynak projesi dayalı.

F12Geliştirme Araçları'na girmek için tuşuna basın .
Ağ sekmesini
kontrol et Önbelleği devre dışı bırak

Eski bir soru olduğunu biliyorum, ama kimse hala nasıl sadece tek bir harici css / js dosyasını yeniden yüklemek için arıyor, şimdi Chrome'da en kolay yolu:

1. Git Ağ sekmesi DevTools'un içinde
2. Kaynağa sağ tıklayın ve isteği tekrarlamak için XHR'yi Yeniden Oynat'ı seçin

Yeniden yüklemeyi zorlamak için Önbelleği devre dışı bırak seçeneğinin işaretli olduğundan emin olun .

MacOS Chrome için:

1. Açık geliştiriciler araçları cmd+ alt+i
2. Geliştiriciler araçlarında sağ üst köşedeki üç noktayı tıklayın
3. Tıklama ayarları
4. İçin aşağı kaydırın Network
5. Etkinleştirme Disable cache (while DevTools is open)bkz ekran görüntüsü:

Neden tüm sayfayı yenilemek gerekiyor? Sadece sayfayı yeniden yüklemeden sadece css dosyalarını yenileyin. Örneğin, DB'den uzun bir yanıt beklemek zorunda olduğunuzda çok yararlıdır. DB'den veri alıp sayfayı doldurduktan sonra, css dosyalarınızı düzenleyin ve Chrome'a ​​(veya Firefox'a) yeniden yükleyin. Bunu yapmak için CSS Reloader uzantısını yüklemeniz gerekir . Firefox sürümü de mevcuttur.

Bu komut dosyasını Chrome konsoluna kopyalayıp yapıştırabilirsiniz ve CSS komut dosyalarınızı her 3 saniyede bir yeniden yüklenmeye zorlar. Bazen CSS stillerini geliştirirken faydalı buluyorum.

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

Bu basit numarayla çözdüm.

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

Hala bir sorun.

"..Css? Something = random-value" gibi parametreler kullanmak müşteri destek deneyimimde hiçbir şeyi değiştirmez. Yalnızca ad değişiklikleri çalışır.

Başka bir dosya yeniden adlandırmak almak. IIS'de URL Yeniden Yazmayı kullanıyorum. Bazen Helicon'un Isapi Rewrite'ı.

Yeni kural ekle.

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

Not: Adı rasgele sayıdan ayırmak için küçük harf kullanımını ayırıyorum. Başka bir şey olabilir.

Misal:

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

(Stil klasörü yok, sadece desenin bir ad parçası)

Çıkış kodu:

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

Şu şekilde yönlendir:

(R: 1 = şablon)

/template.css

Sadece açıklama uzun.

Chrome (Mac'te) çalıştıran bir kişinin aniden CSS dosyasını yüklemeyi bıraktığı bu sorunu yaşadım. CMD + R hiç çalışmadı. Üretim sistemine kalıcı olarak yeniden yükleme yapılmasını zorlayan yukarıdaki önerileri sevmiyorum.

İşe yarayan, HTML dosyasındaki CSS dosyasının adını değiştirmekti (ve elbette CSS dosyasını yeniden adlandırmak). Bu, Chrome'u en son CSS dosyasını almaya zorladı.

Sublime Text 3 kullanıyorsanız, dosyayı açmak için bir derleme sistemi kullanmak en güncel sürümü açar ve [CTRL + B] ile yüklemek için uygun bir yol sağlar. Dosyayı kromda açan bir derleme sistemi kurmak için:

1. "Araçlar" a gidin

2. Farenizi 'sistem oluştur' üzerine getirin. Listenin en altında, 'Yeni Derleme Sistemi ...' ni tıklayın.

3. Yeni derleme sistemi dosyasına şunu yazın:

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

**, ilk tırnak kümesinde belirtilen yolun, yalnızca kromun konumunu bulamaması ve ilk tırnak kümesindeki yolu, Bilgisayarınızda chrome.

Hedefinize ulaşmanın en basit yolu, varsayılan olarak önbelleğe değil , kromuzda veya firefox'ta özel pencerede yeni bir gizli pencere açmaktır.

Projenizde rasgele önbellek önleme kodu enjekte etmenize gerek kalmaması için bunu geliştirme amacıyla kullanabilirsiniz.

IE kullanıyorsanız o zaman tanrı size yardımcı olabilir!

Ctrl + F5

Shift + F5

Her ikisi de iş

Safari 11.0'da en kolay yol macOS SIERRA 10.12.6: Sayfayı Yeniden Yükle Menüsünden, menünün neresinde olduğunu bulmak için yardım kullanabilir veya kısayol seçeneğini (alt) + command + R kullanabilirsiniz.

Chrome/firefox/safari/IE sayfanın tamamını bu kısayollarla yeniden yükleyecek

Ctrl+ R (VEYA) Ctrl+F5

Umarım size yardımcı olabilir !.

Barındırma şirketiniz olarak SiteGround kullanıyorsanız ve diğer çözümlerin hiçbiri işe yaramadıysa, şunu deneyin:

CPanel'den "SİTE GELİŞTİRME ARAÇLARI" na gidin ve "SuperCacher" ı tıklayın. Sonraki sayfada, "Önbelleği Temizle" düğmesini tıklayın.