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

Sofia Emelianova

Yerel geçersiz kılmalar sayesinde, arka ucun, üçüncü tarafların veya API'lerin desteklemesini beklemeden değişiklikleri ve düzeltmeleri prototip oluşturup test ederek iş akışınızdaki engelleri kaldırabilirsiniz.

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

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

• API'leri taklit edin ve API düzeltmelerini üretime geçmeden önce test edin.
• Arka ucun kullanacağı veri yapılarını zaten biliyorsanız yeni kullanıcı arayüzü tasarımlarının prototipini oluşturun.
• Önceden önemli olduklarından emin olmak için performans düzeltmelerini (ör. CLS'yi ortadan kaldırma) test edin.

Yerel geçersiz kılmalar, Geliştirici Araçları'nda yaptığınız değişiklikleri sayfa yüklemeleri arasında korumanıza da 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 Geliştirici Araçları, ağ kaynağı yerine yerel olarak değiştirilmiş dosyayı sunar.

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

Sınırlamalar

Yerel geçersiz kılmalar, ağ yanıtı başlıkları ve XHR ile getirme istekleri dahil olmak üzere çoğu dosya türünde çalışır. Ancak birkaç istisna vardır:

• Yerel geçersiz kılmalar etkinleştirildiğinde önbellek devre dışı bırakılır.
• DevTools, Öğ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 DevTools 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ı Ağ panelinde hemen geçersiz kılabilirsiniz:

1. Geliştirici Araçları'nı açın, Ağ paneline gidin, geçersiz kılmak istediğiniz bir isteği sağ tıklayın, açılır menüden Üstbilgileri geçersiz kıl veya İçeriği geçersiz kıl'ı seçin.
2. Henüz yerel geçersiz kılmaları ayarlamadıysanız DevTools, en üstteki işlem çubuğunda sizden şunları yapmanızı ister:
   1. Geçersiz kılma dosyalarının saklanacağı bir klasör seçin.
   2. DevTools'a erişim hakları vermek için İzin ver'i tıklayın.
3. Yerel geçersiz kılmalarınız ayarlanmış ancak devre dışı bırakılmışsa DevTools bunları otomatik olarak etkinleştirir.

4. Yerel geçersiz kılmalar ayarlanıp etkinleştirildikten sonra, geçersiz kılacağınız öğeye bağlı olarak Geliştirici Araçları sizi şuraya yönlendirir:

   • Web içeriğinde değişiklik yapmanıza olanak tanıyan Kaynaklar paneli.
   • Ağ > Üstbilgiler > Yanıt Üstbilgileri'ndeki düzenleyici, yanıt üstbilgilerinde değişiklik yapmanıza olanak tanır.

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 kutusunun işaretini kaldırın ya da block Temizle'yi tıklayın.

Tek bir geçersiz kılma dosyasını veya bir klasördeki tüm geçersiz kılmaları silmek için Kaynaklar > Geçersiz Kılmalar'da 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ılmaları manuel olarak yeniden oluşturmanız gerekir.

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

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

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

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

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

Geliştirici Araçları, değiştirilen dosyaları kaydeder, Kaynaklar > Geçersiz Kılmalar'da listeler ve ilgili paneller ile bölmelerdeki 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ınan web içeriğine sahip bir isteğin Yanıt sekmesinin yanında, ipucu içeren mor nokta simgesi gösterilir.

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

Yerel geçersiz kılmalar sayesinde arka uca erişmeniz gerekmez ve değişikliklerinizi desteklemesi için beklemeniz gerekmez. Anında prototip oluşturma ve deneme:

1. Yerel geçersiz kılmaları ayarlayın.
2. Ağ'da XHR/getirme 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şiklik yapın ve dosyayı kaydedin.
4. refresh Sayfayı yenileyin ve değişikliklerinizin uygulandığını görün.

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

Yerel değişikliklerinizi izleme

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

Ayrıca, Kaynaklar > Geçersiz Kılmalar'da kayıtlı dosyayı sağ tıklayıp bağlam menüsünden Dosyayı içeren klasörde aç'ı seçebilirsiniz. Bu işlem, geçersiz kılma ayarları sırasında seçtiğiniz klasörü açar. Burada, dosyaları favori kod düzenleyicinizle değiştirebilirsiniz.

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

Ağ panelinden, web sunucusuna erişmeden 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 düzeltmeleri yerel olarak prototipleyebilirsiniz:

• Merkezler Arası Kaynak Paylaşımı (CORS) Başlıkları
• Permissions-Policy 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ılmaları ayarlayın ve hata ayıklamak istediğiniz sayfayı açın.
2. Ağ'a gidin, bir istek bulun, sağ tıklayın ve Başlıkları geçersiz kıl'ı seçin. Geliştirici Araçları sizi Başlıklar > Yanıt Başlıkları düzenleyicisine yönlendirir.

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

   

   Alternatif olarak, Response Headers düzenleyiciyi etkinleştirmek için fareyle bir yanıt başlığı değerinin üzerine gelin ve edit 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 değeri tıklayın.
   • Yeni bir üstbilgi eklemek için add Üstbilgi ekle'yi tıklayın.
   • Bir başlık geçersiz kılmasını kaldırmak için yanındaki delete simgesini tıklayın. Bu işlem, eklediğiniz başlıkları kaldırır veya değiştirilen değerleri orijinal değerlere geri döndürür.

   Ağ paneli, değiştirilen başlıkları yeşil renkte, kaldırılan geçersiz kılmaları ise kırmızı renkte ve üstü çizili olarak vurgular. Ayrıca, Başlıklar sekmesinde, başlıkların geçersiz kılındığını belirten bir ipucu içeren mor nokta simgesi gösterilir.

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

Tüm yanıt üstbilgisi geçersiz kılmalarını düzenleme

Tüm başlık geçersiz kılmalarını tek bir yerden düzenlemek için:

1. Response Headers (Yanıt Başlıkları) bölümünün yanındaki .headers'ı tıklayın.

   

   DevTools, sizi Kaynaklar > Geçersiz Kılmalar'daki 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 bir kural, bir dizi başlık ve değer ile bunların uygulanacağı tek veya birden fazla istekten oluşur.

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

   • Bir başlık değerini geri döndürmek, eklenen bir başlığı veya kuralı kaldırmak için fareyle başlığın veya kuralın üzerine gelin ve 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.