Web içeriğini ve HTTP yanıt başlıklarını yerel olarak geçersiz kıl

Yerel geçersiz kılmalarla, arka uç, üçüncü taraflar veya API'lerin bunları desteklemesini beklemeden değişiklikleri ve düzeltmeleri prototip haline getirip test ederek iş akışınızın engellemesini kaldırabilirsiniz.

Uzak kaynaklara erişiminiz olmasa bile bunları taklit etmek için yerel geçersiz kılma işlemlerini kullanın. İsteklere ve çeşitli dosyalara (ör. XHR ve getirme istekleri dahil olmak üzere HTTP yanıt başlıkları ve web içeriği) verilen yanıtları taklit edebilirsiniz.

Örneğin, yerel geçersiz kılma işlemleri aşağıdaki kullanım alanlarında yardımcı olabilir:

• API'yi taklit edin ve API düzeltmelerini üretime geçmeden önce test edin.
• Arka uçta kullanılacak veri yapılarını zaten biliyorsanız yeni kullanıcı arayüzü tasarımlarının prototipini oluşturun.
• Performans düzeltmelerinin önemli olduğundan emin olmak için CLS'yi ortadan kaldırma gibi düzeltmeleri test edin.

Yerel geçersiz kılmalar, Geliştirici Araçları'nda yaptığınız değişiklikleri sayfa yüklemelerinde de korumanıza olanak tanır.

İşleyiş şekli

• Geliştirici Araçları'nda değişiklik yaptığınızda, değiştirilen dosyanın bir kopyası belirttiğiniz klasöre kaydedilir.
• Sayfayı yeniden yüklediğinizde DevTools, ağ kaynağı yerine yerel, değiştirilmiş dosyayı sunar.

Değişikliklerinizi doğrudan kaynak dosyalara da kaydedebilirsiniz. Workspaces ile dosya düzenleme ve kaydetme başlıklı makaleyi inceleyin.

Sınırlamalar

Yerel geçersiz kılmalar, ağ yanıtı üstbilgileri ve XHR ile getirme istekleri dahil olmak üzere çoğu dosya türü için çalışır. Bununla birlikte, birkaç istisna vardır:

• Yerel geçersiz kılmalar etkinleştirildiğinde önbelleğe alma devre dışı bırakılır.
• DevTools, Öğeler panelinin DOM ağacında yapılan değişiklikleri kaydetmez.
• Stiller bölmesinde düzenlediğiniz CSS'nin kaynağı bir HTML dosyasıysa DevTools bu değişikliği kaydetmez.

Bunun yerine, HTML dosyalarını Kaynaklar panelinde düzenleyebilirsiniz.

Yerel geçersiz kılmaları ayarlama

Web içeriğini veya yanıt başlıklarını hemen Ağ panelinde geçersiz kılabilirsiniz:

1. Geliştirici Araçları'nı açın, Ağ paneline gidin, geçersiz kılmak istediğiniz isteği sağ tıklayın, açılır menüden Başlıkları geçersiz kıl veya İçeriği geçersiz kıl'ı seçin.
2. Henüz yerel geçersiz kılma işlemleri oluşturmadıysanız en üstteki işlem çubuğunda DevTools'tan şunları yapmanız istenir:
   1. Geçersiz kılma dosyalarının saklanacağı bir klasör seçin.
   2. DevTools'a erişim izni vermek için İzin ver'i tıklayın.
3. Yerel geçersiz kılmalar ayarlayıp devre dışı bıraktıysanız Geliştirici Araçları bunları otomatik olarak etkinleştirir.

4. Yerel geçersiz kılma işlemleri ayarlanıp etkinleştirildikten sonra, geçersiz kılacağınız öğeye bağlı olarak DevTools sizi şuraya yönlendirir:

   • Web içeriğinde değişiklik yapmanıza olanak tanıyan Kaynaklar paneli.
   • Yanıt üstbilgilerinde değişiklik yapmanıza olanak tanıyan Ağ > Başlıklar > Yanıt Üstbilgileri bölümündeki düzenleyici.

Yerel geçersiz kılmaları geçici olarak devre dışı bırakmak veya tüm geçersiz kılma dosyalarını silmek için Kaynaklar > Geçersiz Kılmalar'a gidin ve check_box_outline_blank Yerel Geçersiz Kılmaları Etkinleştir onay kutusunu temizleyin veya sırasıyla block Temizle'yi tıklayın.

Tek bir geçersiz kılma dosyasını veya bir klasördeki tüm geçersiz kılma dosyalarını silmek için Kaynaklar > Geçersiz kılma bölümünde dosyayı veya klasörü sağ tıklayın, Sil'i seçin ve iletişim kutusunda Tamam'ı tıklayın. Bu işlem geri alınamaz ve silinen geçersiz kılma işlemlerini manuel olarak yeniden oluşturmanız gerekir.

Tüm geçersiz kılma işlemlerini hızlıca görmek için Ağ panelinde bir isteği sağ tıklayın ve Tüm geçersiz kılma işlemlerini göster'i seçin. Geliştirici Araçları sizi Kaynaklar > Üst Geçerlilik'e yönlendirir.

Web içeriğini geçersiz kıl

Web içeriğini geçersiz kılmak için:

1. Yerel geçersiz kılmaları ayarlayın.
2. Dosyalarda değişiklik yapıp bunları Geliştirici Araçları'na kaydedebilirsiniz.

Örneğin, CSS HTML dosyalarında bulunmadığı sürece Kaynaklar'daki dosyaları veya Öğeler > Stiller'deki CSS'yi düzenleyebilirsiniz.

DevTools, değiştirilen dosyaları kaydeder, Kaynaklar > Üst Geçerlilik bölümünde listeler ve ilgili panellerde ve bölmelerde (Öğeler > Stiller, Ağ ve Kaynaklar > Üst Geçerlilik) geçersiz kılınan dosyaların yanında simgesini gösterir.

Ayrıca, Ağ panelinde, geçersiz kılınmış web içeriğine sahip bir isteğin Yanıt sekmesinin yanında ipucu içeren mor bir nokta simgesi gösterilir.

Uzak kaynakları test etmek için XHR veya fetch isteklerini geçersiz kılın

Yerel geçersiz kılmalar sayesinde arka uca erişmeniz ve değişikliklerinizi desteklemesi için arka uca erişmeniz gerekmez. Hazır şablonlar kullanarak anında deneme yapın:

1. Yerel geçersiz kılmaları ayarlayın.
2. Ağ'da XHR/fetch isteklerini filtreleyin, ihtiyacınız olanı bulun, sağ tıklayın ve İçeriği geçersiz kıl'ı seçin.
3. Getirilen verilerde değişikliklerinizi yapın ve dosyayı kaydedin.
4. refresh Sayfayı yenileyin ve değişikliklerinizin uygulandığını gözlemleyin.

Bu iş akışını öğrenmek için aşağıdaki videoyu izleyin:

Yerel değişikliklerinizi takip etme

Web içeriğinde yaptığınız tüm değişiklikleri tek bir yerden (Değişiklikler çekmece sekmesi) takip edebilirsiniz.

Ayrıca, Kaynaklar > Üst Geçerli Kayıtlar bölümünde, kayıtlı dosyayı sağ tıklayıp bağlam menüsünden İçerdiği klasörde aç'ı seçebilirsiniz. Bu işlem, kurulumu geçersiz kılarken seçtiğiniz klasörü açar. Burada, favori kod düzenleyicinizle dosyaları değiştirebilirsiniz.

HTTP yanıt başlıklarını geçersiz kıl

Ağ panelinden web sunucusuna erişim izni olmadan HTTP yanıt başlıklarını geçersiz kılabilirsiniz.

Yanıt üstbilgisi geçersiz kılmalarıyla, aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere çeşitli üstbilgiler için yerel olarak düzeltme prototipleri oluşturabilirsiniz:

• Kaynaklar Arası Kaynak Paylaşımı (CORS) Başlıkları
• İzin Politikası Başlıkları
• Kaynaklar Arası İzolasyon Başlıkları

Bir yanıt başlığını geçersiz kılmak için:

1. Yerel geçersiz kılma işlemleri oluşturun ve örneğin bu demo sayfasını inceleyin.
2. Ağ'a gidin, bir istek bulun, isteği sağ tıklayın ve Başlıkları geçersiz kıl'ı seçin. DevTools sizi Başlıklar > Yanıt Başlıkları düzenleyicisine yönlendirir.

3. Fareyle bir yanıt başlığı değerinin üzerine gelip imleci oraya yerleştirin.

   

   Alternatif olarak, Yanıt Başlıkları düzenleyicisini etkinleştirmek için fareyle bir yanıt başlığı değerinin üzerine gelin ve düzenle Düzenle'yi tıklayın.

4. Mevcut bir başlığı değiştirin veya yeni bir başlık ekleyin.

   

   • Bir başlık değerini düzenlemek için ilgili değeri tıklayın.
   • Yeni bir başlık eklemek için add Başlık ekle'yi tıklayın.
   • Üstbilgi geçersiz kılma işlemini kaldırmak için yanındaki delete simgesini tıklayın. Bu işlem, eklediğiniz üstbilgileri kaldırır veya değiştirilen değerleri orijinal değerlerine döndürür.

   Ağ panelinde, değiştirilen üstbilgiler yeşil renkle, kaldırılan geçersiz kılmalar ise kırmızı renkle ve üzeri çizilerek vurgulanır. Ayrıca Başlıklar sekmesinde, üstbilgilerin geçersiz kılındığını bildiren bir ipucunun bulunduğu mor bir nokta simgesi gösterilir.

5. refresh Değişikliklerin uygulanması için sayfayı yenileyin.

Tüm yanıt başlığı geçersiz kılma seçeneklerini düzenleme

Tüm üstbilgi geçersiz kılma işlemlerini tek bir yerden düzenlemek için:

1. Yanıt Başlıkları bölümünün yanındaki .headers öğesini tıklayın.

   

   DevTools sizi Kaynaklar > Üst Geçerli Kılmalar bölümündeki ilgili .headers dosyasına yönlendirir.

2. .headers dosyasını düzenleyin:

   

   • Yeni bir geçersiz kılma kuralı eklemek için Geçersiz kılma kuralı ekle'yi tıklayın. Buradaki kural, bir dizi başlık ve değer ile bunların uygulanacağı bir veya birden fazla istektir.

   • Bir kurala başlık/değer çifti eklemek için fareyle başka bir çiftin üzerine gelip add simgesini tıklayın.

   • Bir üstbilgi değerini geri almak için, eklenen bir üstbilgi veya kuralı kaldırın, fareyle üzerine gelip delete simgesini tıklayın.

3. .headers dosyasını Command / Control + S tuşlarıyla kaydedin.

4. refresh Değişikliklerin uygulanması için sayfayı yenileyin.