Geliştirici Araçları'ndaki Yenilikler (Chrome 117)

Ağ paneli iyileştirmeleri

Web içeriğini yerel olarak daha da hızlı geçersiz kılma

Yerel geçersiz kılmalar özelliği artık daha kolay kullanılabiliyor. Bu sayede, Ağ panelinden uzak kaynakların yanıt başlıklarını ve web içeriklerini, bunlara erişmeden kolayca taklit edebilirsiniz.

Web içeriğini geçersiz kılmak için Ağ panelini açın, bir isteği sağ tıklayın ve İçeriği geçersiz kıl'ı seçin.

Yerel geçersiz kılmalar ayarlanmış ancak devre dışı bırakılmışsa DevTools bunları etkinleştirir. Henüz ayarlamadıysanız DevTools, en üstteki işlem çubuğunda sizi yönlendirir. Geçersiz kılmaların saklanacağı bir klasör seçin ve DevTools'un bu klasöre erişmesine izin verin.

Geçersiz kılmalar ayarlandıktan sonra DevTools, web içeriğini geçersiz kılmanıza olanak tanımak için sizi Kaynaklar > Geçersiz Kılmalar > Düzenleyici'ye yönlendirir.

Geçersiz kılınan kaynakların Ağ panelinde ile gösterildiğini unutmayın. Nelerin geçersiz kılındığını görmek için simgenin üzerine gelin.

Chromium sorunları: 1465785, 1470532, 1469359.

XHR ve getirme isteklerinin içeriğini geçersiz kılma

Artık yanıt başlıklarının yanı sıra XHR ve getirme isteklerinin içeriğini de geçersiz kılabilirsiniz. Bu tür geçersiz kılmalarla, arka uç ve API henüz hazır olmasa bile web sayfanızda hata ayıklamak için API yanıtlarını taklit edebilirsiniz.

Geliştirici Araçları şu anda aşağıdaki istek türleri için içerik geçersiz kılmalarını desteklemektedir: resimler (ör. avif, png), yazı tipleri, getirme ve XHR, komut dosyaları (css ve js) ve dokümanlar (html). DevTools artık desteklenmeyen türler için İçeriği geçersiz kıl seçeneğini gri renkte gösteriyor.

Chromium sorunları: 792101, 1469776.

Chrome uzantısı isteklerini gizleme

Yazdığınız koda odaklanmanıza ve Chrome'a yüklemiş olabileceğiniz uzantılar tarafından gönderilen alakasız istekleri filtrelemenize yardımcı olmak için Ağ paneline yeni bir filtre ekleniyor.

chrome-extension:// URL'lerine gönderilen tüm istekleri filtrelemek için Uzantı URL'lerini gizle'yi işaretleyin.

Chromium sorunları: 1257885, 1458803.

İnsan tarafından okunabilen HTTP durum kodları

İsteğin başlığındaki Durum Kodu artık HTTP durum kodlarının yanında okunabilir metin gösteriyor. Böylece isteğe ne olduğunu daha hızlı anlayabilirsiniz.

Aynı metni görmek için istek tablosundaki durum kodunun üzerine de gelebilirsiniz.

Chromium sorunu: 1153956.

JSON alt türleri için yanıtları güzel biçimlendirme

application/[subtype]+json MIME alt türü (örneğin, ld+json, hal+json ve diğerleri) içeren bir isteğin Yanıt sekmesi artık yanıtı doğru şekilde ayrıştırıyor ve biçimlendirmenize olanak tanıyor.

Chromium sorunu: 406900.

Performans: Ağ etkinliklerinin getirme önceliğindeki değişiklikleri görün

Performans paneli artık Ağ izindeki bir etkinliğin Özet bölümünde yalnızca tek bir Öncelik yerine iki öncelik alanı gösteriyor: İlk Öncelik ve (son) Öncelik. Bu ek alan sayesinde artık etkinliğin getirme önceliğinin değişip değişmediğini görebilir ve indirme sırasını ayarlayabilirsiniz. Daha fazla bilgi için Fetch Priority API ile kaynak yüklemeyi optimize etme başlıklı makaleyi inceleyin.

Ayrıca, Büyük istek satırları ayarı etkin durumdayken aynı bilgileri Ağ panelinin Öncelik sütununda da bulabilirsiniz.

Chromium sorunları: 1463901, 1380964.

Varsayılan olarak etkinleştirilen kaynak ayarları: Kod katlama ve otomatik dosya gösterme

Ayarlar > Tercihler > Kod katlama seçeneği artık varsayılan olarak etkin. Bu seçenek, kod bloklarını katlamanıza olanak tanır.

Kod bloğunu daraltmak için bloğun başlangıcının yanındaki satır numarasının üzerine gelin ve daraltma simgesini tıklayın. Bloğu tekrar genişletmek için {...} simgesini tıklayın.

Ayrıca, Ayarlar > Tercihler > Dosyaları kenar çubuğunda otomatik olarak göster ayarı da varsayılan olarak etkinleştirildi.

Bu ayar, Kaynaklar > Sayfa'daki dosya ağacının, sekmeler arasında geçiş yaptığınızda Düzenleyici'de açık olan geçerli dosyayı seçmesini sağlar.

Chromium sorunları: 1459193, 1336599.

Üçüncü taraf çerezleriyle ilgili sorunlarda hata ayıklama iyileştirildi

Daha gizli bir web oluşturmaya yardımcı olmak ve diğer tarayıcıların güncellemeleriyle paralel olarak Chrome, Özel Korumalı Alan girişimini başlattı. Bu girişim, web'de gizliliği temelden iyileştirir ve üçüncü taraf çerezlerini gereksiz kılacak şekilde sağlıklı ve reklam destekli bir web'i sürdürebilir. Özel Korumalı Alan, değişikliklere rahatça uyum sağlayabilmeniz için kademeli olarak kullanımdan kaldırma zaman çizelgesine sahiptir.

Chrome'un, üçüncü taraf çerezlerinin desteği sonlandırıldıktan sonra nasıl davranacağını şimdiden test edebilirsiniz. Bunu yapmak için --test-third-party-cookies-phaseout işaretiyle Chrome'u komut satırından çalıştırın. Bu işaretin ne işe yaradığını öğrenmek için Çerezlerde hata ayıklama başlıklı makaleyi inceleyin.

Chrome'u çalıştırma şeklinizden (işaretle birlikte veya işaretsiz) bağımsız olarak, Sorunlar sekmesinde artık tüm yeni Chrome kullanıcıları için varsayılan olarak Üçüncü taraf çerezleriyle ilgili sorunları dahil et onay kutusu etkin durumda. Bu nedenle, aşağıdaki raporlar gösterilir:

• Yakında kullanımdan kaldırılacak olan özelliklerle ilgili önemli değişiklik uyarısı.
• Üçüncü taraf çerezleriyle ilgili sorunlar.

Mevcut bir Chrome kullanıcısı olarak, yakında kullanımdan kaldırılma süreciyle ilgili çerez uyarılarını görmek istiyorsanız bu onay kutusunu işaretleyin.

Bunu test etmek için bu demo sayfasındaki çerezleri inceleyin.

Ayrıca, Ağ panelindeki Engellenen yanıt çerezleri filtresi, yalnızca engellenen yanıt çerezlerini gösterdiğini netleştirmek için yeniden ifade edildi.

Chromium sorunları: 1458839, 1462693, 1466310.

Uygulama panelinde önceden yüklemede hata ayıklama

Chrome ekibi, kullanıcının büyük olasılıkla gideceği gelecekteki sayfaların tam önceden oluşturulmasını yeniden etkinleştiriyor. Geliştirici Araçları, bu sorunu ayıklamanıza yardımcı olmak için Uygulama paneline Önceden Yükleme bölümünü ekler. Yeni önceden getirme ve önceden oluşturma (topluca "navigasyonel önceden yükleme" olarak bilinir) bağlantıya dayalı kaynak ipuçları yerine Speculation Rules API'yi kullanır.

Bu önceden oluşturma demo sayfasındaki Application (Uygulama) > Preloading (Önceden Yükleme) bölümünde şunları inceleyebilirsiniz:

• Geçerli sayfada bulunan tüm kural kümelerini listeleyen Tahmin Kuralları.
• Kural kümelerindeki önceden getirilmiş ve önceden oluşturulmuş tüm URL'lerin listelendiği önceden yüklemeler.
• Geçerli sayfanın önceden oluşturulmuş durumunu listeleyen Bu Sayfa.

Daha fazla bilgi için tahmin kurallarında hata ayıklama ile ilgili özel gönderiye bakın.

Chromium sorunu: 1410709.

Yeni renkler

Geliştirici Araçları'nın artık Chrome ile daha uyumlu, yenilenmiş bir görünüme sahip olduğunu fark etmiş olabilirsiniz. Buna katkıda bulunan faktörlerden biri yeni renk şemasıdır.

Bu sürümde (117), DevTools'a daha önce bahsedilen ve aşağıda listelenen kullanıcı deneyimi iyileştirmelerinin yanı sıra kullanıcı arayüzü metinlerinde de iyileştirmeler yapıldı.

Chromium sorunu: 1456677.

Lighthouse 10.4.0

Lighthouse paneli artık Lighthouse 10.4.0'ı çalıştırıyor. En önemlisi, bu sürümde aşağıdakiler için yeni erişilebilirlik denetimleri eklenmiştir:

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

Örneğin:

Değişikliklerin tam listesini de inceleyin. Geliştirici Araçları'nda Lighthouse panelini kullanmanın temel bilgileri için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 772558.

Geliştirici Araçları için C/C++ WebAssembly hata ayıklama uzantısı artık açık kaynaklı

Geliştirici Araçları için C/C++ WebAssembly hata ayıklama uzantısı artık açık kaynaklı ve Geliştirici Araçları ön uç deposunda bulunuyor. Bu uzantı, WebAssembly'ye derlenen C++ programları için Geliştirici Araçları'nda hata ayıklama özelliklerini etkinleştirir. Daha fazla bilgi için C/C++ WebAssembly'de hata ayıklama başlıklı makaleyi inceleyin.

Uzantıyı oluşturma, çalıştırma ve test etme hakkında bilgi edinin. Ayrıca, katkıda bulunmaktan çekinmeyin.

Chromium sorunu: 1410709.

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmeler ve iyileştirmelerden bazıları şunlardır:

• CSS İç İçe Yerleştirme: Öğeler paneli artık iç içe yerleştirilmiş alt öğeler için seçici zincirinin tamamını gösteriyor (1172985).
• Uygulama > Manifest bölümünde artık Manifest'te display_override değerinin bulunup bulunmadığını kontrol eden ve ilgili dokümanlara bağlantılar sağlayan bir Pencere Kontrolleri Yerleşimi bölümü var.
• Kaynaklar > Sayfa ağacı artık aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere (1442863) şunları yapıyor:
  • Tüm içerikleri yoksayılanlar listesinde olan klasörleri gri renkte gösterir.
  • Tüm içerikleri kaynak haritasından geliyorsa klasörleri turuncu renkte gösterir.
• Performans: Kaydetme Ayarları, kayıt başlatıldığında artık otomatik olarak gizleniyor (1455498).
• Kaynaklar > Düzenleyici, Ctrl + Ok (Win) ve Opt + Ok (MacOS) davranışını geri yükledi (1468208).
• Animasyonlar > Tümünü duraklat açma/kapatma düğmesi artık sayfa yüklemeleri arasında durumunu koruyor (1446046).
• Uygulama > Depolama alanı > Önbellek depolama alanı, Uygulama > Depolama alanı > Önbellek bölümüne taşındı (1462622).
• Bazı kullanıcı arayüzü metinleri ve ipuçları iyileştirildi: Donanım eşzamanlılığı ipucu, Ağ filtresi metinleri ve ana menü seçeneği, Uygulama ağacı görünümündeki büyük harf kullanımı, Ağ > Başlıklar metinleri, Kaynaklar > Geçersiz kılmalar ve Dosya sistemi metinleri.

Yeni deneysel özellikler

Yeni oluşturma emülasyonu: prefers-reduced-transparency

Web sitenizin kullanıcıları, şeffaf efektleri azaltma tercihlerini belirtmek için cihazlarında yeni deneysel prefers-reduced-transparency CSS medya özelliğini etkinleştirmeye başlayabilir. Web sitenizin erişilebilirliğini artırmak için bu tercihi dikkate alabilirsiniz. Bu konuda size yardımcı olmak için Oluşturma çekmece sekmesi artık prefers-reduced-transparency: reduce ayarını taklit edebilir. Böylece bir çözümün prototipini oluşturabilir ve web sitenizin bu durumda nasıl davrandığını test edebilirsiniz.

Chrome'da bu özelliği test etmek için chrome://flags bölümünde Deneysel Web Platformu özellikleri'ni etkinleştirin.

Chromium sorunu: 1424879.

Gelişmiş protokol izleyici

Chrome Geliştirici Araçları, Chrome tarayıcılarda enstrüman oluşturmak, incelemek, hata ayıklamak ve profil oluşturmak için Chrome Geliştirici Araçları Protokolü'nü (CDP) kullanır. Chromium veya Geliştirici Araçları geliştiricisiyseniz Protokol monitörü, Geliştirici Araçları tarafından yapılan tüm CDP isteklerini ve yanıtlarını görüntülemenin yanı sıra CDP komutları göndermenin bir yolunu sunar.

Protokol monitörü, CDP komutlarını daha kolay oluşturup göndermenizi sağlayacak yeni bir arayüze kavuşuyor. Artık komutları ve parametrelerini dokümanlarda aramanız gerekmiyor. Geliştirici Araçları bunları size önerecek.

Protocol monitor çekmece sekmesinin sağ alt köşesinde Show CDP command editor'ı (CDP komut düzenleyiciyi göster) tıklayın, bir hedef seçin, komut yazmaya başlayın, önerilen komutlardan birini seçin, gerekirse parametre değerlerini belirtin ve Send command'ı (Komut gönder) (Ctrl/Cmd + Enter) tıklayın.

Chromium sorunu: 1469345.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools'a tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.