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. HTTP yanıt üstbilgileri ve XHR ve getirme istekleri dahil web içeriği gibi çeşitli dosyalara ve isteklere 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.
• Önceden anlamlı olduklarından emin olmak için performans düzeltmelerini test edin (örneğin, CLS'yi kaldırın).

Yerel geçersiz kılma işlemleri, Geliştirici Araçları'nda yaptığınız değişiklikleri sayfa yüklemelerinde de korumanızı sağlar.

İşleyiş şekli

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

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

Sınırlamalar

Yerel geçersiz kılmalar, birkaç istisna dışında ağ yanıt üstbilgilerinin yanı sıra XHR ve getirme istekleri dahil çoğu dosya türü için çalışır:

• Yerel geçersiz kılmalar etkinleştirildiğinde önbellek devre dışı bırakılır.
• Geliştirici Araçları, Öğeler panelinin DOM ağacında yapılan değişiklikleri kaydetmez.
• Stiller bölmesinde CSS'yi düzenlerseniz ve bu CSS'nin kaynağı bir HTML dosyasıysa Geliştirici Araçları 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 üstbilgilerini Ağ panelinde hemen 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 DevTools, üstteki işlem çubuğunda sizden şunları yapmanızı ister:
   1. Geçersiz kılma dosyalarının depolanacağı bir klasör seçin.
   2. Geliştirici Araçları'na erişim hakları 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ılmalar ayarlanıp etkinleştirildikten sonra Geliştirici Araçları, geçersiz kılma işleminize bağlı olarak sizi şu hedeflere 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 ve sırasıyla check_box_outline_blank Yerel Geçersiz Kılmaları Etkinleştir onay kutusunu temizleyin veya 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ılma ayarlarını yapın.
2. Dosyalarda değişiklik yapıp bunları Geliştirici Araçları'na kaydedebilirsiniz.

Örneğin, Kaynaklar'daki dosyaları veya Öğeler > içindeki CSS'yi düzenleyebilirsiniz. CSS HTML dosyaları içinde bulunmuyorsa stiller.

Geliştirici Araçları, değiştirilen dosyaları kaydeder ve Kaynaklar'da listeler > Geçersiz kılar ve ilgili panellerde ve bölmelerde geçersiz kılınan dosyaların yanında simgesini gösterir: Öğeler > Stiller, Ağ ve Kaynaklar > Geçersiz kılmalar.

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ılma işlemleriyle arka uç erişiminiz olması gerekmez ve değişikliklerinizin desteklenmesini beklemeniz 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 > Geçersiz kılma işlemleri için, kaydedilen dosyayı sağ tıklayıp içerik menüsünden Dahil olan klasörde aç'ı seçebilirsiniz. Bu işlem, geçersiz kılma kurulumu sırasında 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ılma

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

Yanıt başlığını geçersiz kılma özelliği sayesinde, aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere çeşitli başlıklar için yerel prototip düzeltmeleri yapabilirsiniz:

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

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 isteği bulun, sağ tıklayın ve Üstbilgileri 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. Üstbilgiyi değiştirin veya yeni bir üstbilgi ekleyin.

   

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

   Ağ paneli, değiştirilmiş başlıkları yeşil olarak vurgular. Kaldırılmış geçersiz kılmalar ise kırmızı ve üstü çizili olarak işaretlenmiştir. 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şiklikleri uygulamak için sayfayı yenileyin.

Tüm yanıt başlığı geçersiz kılmalarını düzenle

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 seçeneğini tıklayın.

   

   Geliştirici Araçları sizi Kaynaklar'daki ilgili .headers dosyasına yönlendirir > Geçersiz kılmalar.

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 üstbilgi-değer çifti eklemek için fareyle başka bir çiftin üzerine gelin ve add işaretini 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ına basarak kaydedin.

4. refresh Değişiklikleri uygulamak için sayfayı yenileyin.