Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Sofia Emelianova

Ağ paneli iyileştirmeleri

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

Yerel geçersiz kılmalar özelliği artık kolaylaştırılmıştır. Böylece, Ağ panelinden uzak kaynakların yanıt başlıklarını ve web içeriğini 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.

Bir isteğin açılır menüsündeki geçersiz kılma seçenekleri.

Geliştirici Araçları, ayarlanmış ancak devre dışı bırakılmış yerel geçersiz kılmaları etkinleştirir. Geliştirici Araçları'nı henüz ayarlamadıysanız üst kısımdaki işlem çubuğunda sizden istenir. Geçersiz kılmaları depolayacağınız bir klasör seçin ve Geliştirici Araçları'nın bu klasöre erişmesine izin verin.

Bir klasör seçin ve en üstteki işlem çubuğunda söz konusu klasöre erişim izni verin.

Geçersiz kılmalar ayarlandıktan sonra Geliştirici Araçları sizi Kaynaklar > Geçersiz Kılmalar > Düzenleyici'ye yönlendirir. Böylece web içeriğini geçersiz kılabilirsiniz.

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

Chromium sorunları: 1465785, 1470532, 1469359.

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

Artık XHR'nin içeriğini geçersiz kılabilir ve isteklerin yanıt üstbilgilerinin yanı sıra getirme isteklerini de değiştirebilirsiniz. Bu tür geçersiz kılmalar sayesinde, arka ucunuz ve API'niz henüz hazır olmasa bile web sayfanızdaki hataları ayıklamak için API yanıtlarını taklit edebilirsiniz.

Geliştirici Araçları, şu anda şu istek türleri için içerik geçersiz kılma işlemlerini desteklemektedir: resimler (örneğin, avif, png), yazı tipleri, getirme ve XHR, komut dosyaları (css ve js) ve dokümanlar (html). Geliştirici Araçları artık desteklenmeyen türler için İçeriği geçersiz kıl seçeneğini devre dışı bırakmaktadır.

Chromium sorunları: 792101, 1469776.

Chrome uzantı isteklerini gizle

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

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

Uzantı URL'leri istek tablosunda gizlendi.

Chromium sorunları: 1257885, 1458803.

İnsanlar tarafından okunabilir HTTP durum kodları

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

İnsanlar tarafından okunabilir HTTP durum kodlarının görüntülenmesinin öncesi ve sonrası.

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

Chromium sorunu: 1153956.

JSON alt türleri için yanıtları okunaklı hale getir

application/[subtype]+json MIME alt türüne (örneğin, ld+json, hal+json ve diğerleri) sahip bir isteğin Yanıt sekmesi artık yanıtı doğru şekilde ayrıştırır ve düzeltmenizi sağlar.

Ağ yanıtı önizlemesinde bir application/json alt türünün ayrıştırılmasından önceki ve sonraki süreç.

Chromium sorunu: 406900.

Performans: Ağ etkinliklerinin getirme önceliğindeki değişiklikleri görme

Performans paneli artık Ağ kanalındaki bir etkinliğin Özet bölümünde iki öncelik alanını göstermektedir: yalnızca Öncelik alanı yerine İ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 indirmelerin sırasını değiştirebilirsiniz. Daha fazla bilgi için Fetch Priority API ile kaynak yüklemeyi optimize etme başlıklı makaleye bakın.

Getirme önceliğindeki değişiklikleri görüntülemeden önce ve sonra.

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

Ağ panelindeki Öncelik sütunu.

Chromium sorunları: 1463901, 1380964.

Kaynak ayarları varsayılan olarak etkindir: Kod daraltma ve otomatik dosya gösterme

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

Bir kod bloğunu katlamak için, imlecinizi blokun başlangıcının yanındaki satır numarasının üzerine getirin ve daralt simgesini tıklayın. Bloğu tekrar genişletmek için {...} öğesini tıklayın.

Üstelik Ayarlar > Tercihler > Dosyaları kenar çubuğunda otomatik olarak göster seçeneği de artık varsayılan olarak etkin.

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

Chromium sorunları: 1459193, 1336599.

Üçüncü taraf çerez sorunlarında gelişmiş hata ayıklama

Daha gizli bir web oluşturmak ve buna paralel olarak diğer tarayıcılar tarafından yapılan güncellemelere paralel olarak Chrome, Özel Korumalı Alan girişimini kullanıma sunmuştur. Bu girişim, web'de gizliliği temelde geliştirir ve üçüncü taraf çerezlerinin geçerliliğini yitirecek şekilde sağlıklı, reklam destekli bir web'in sürdürülebilirliğini sağlayabilir. Özel Korumalı Alan'ın değişikliklere rahatça uyum sağlamanız için kademeli bir kullanımdan kaldırma zaman çizelgesi vardır.

Üçüncü taraf çerezlerinin kullanımdan kaldırılmasından sonra Chrome'un nasıl davrandığını zaten 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 konusuna bakın.

Chrome'u çalıştırma şeklinizden (bayrakla veya işareti olmadan) bağımsız olarak, artık tüm yeni Chrome kullanıcıları için Sorunlar sekmesinde Üçüncü taraf çerez sorunlarını dahil et onay kutusu varsayılan olarak etkin durumdadır ve bunun sonucunda şu raporlar:

Yaklaşan kullanımdan kaldırma işlemiyle ilgili önemli bir 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ı görmek istiyorsanız bu onay kutusunu işaretlediğinizden emin olun.

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

Sorunlar sekmesinde üçüncü taraf çereziyle ilgili sorunlar bildirildi.

Ayrıca, Ağ panelindeki Engellenen yanıt çerezleri filtresi, yalnızca engellenen yanıt çerezlerini gösterdiğini açıkça belirtecek şekilde yeniden adlandırıldı.

Onay kutusu etkinleştirilir ve yalnızca engellenen yanıt çerezlerine sahip istekleri gösterir.

Chromium sorunları: 1458839, 1462693, 1466310.

Uygulama panelinde önceden yükleme hatalarını ayıklayın

Chrome ekibi, kullanıcının gitme olasılığı yüksek olan sayfaların tam önceden oluşturulmasını yine sunuyor. Geliştirici Araçları, bu hata ayıklamanızı sağlamak için Uygulama paneline Önceden yükleme bölümünü ekler. Yeni önceden getirme ve önceden oluşturma (topluca "gezinme amaçlı önceden yükleme" olarak bilinir), bağlantı tabanlı kaynak ipuçları yerine Speculation Rules API'yi kullanır.

Bu demo sayfasındaki Uygulama > Önceden yükleme bölümünde şunları inceleyebilirsiniz:

Geçerli sayfada bulunan tüm kural kümelerini listeleyen Spekülasyon Kuralları.
Kural kümelerinden önceden getirilen ve önceden oluşturulmuş tüm URL'leri listeleyen önceden yükler.
Bu Sayfa, geçerli sayfanın önceden işlenmiş durumunu listeler.

Daha fazla bilgi için hata ayıklama kurallarıyla ilgili özel yayına bakın.

Chromium sorunu: 1410709.

Yeni renkler

Geliştirici Araçları'nın artık Chrome'a daha uygun olan yenilenmiş bir görünüme sahip olduğunu fark etmiş olabilirsiniz. Bu duruma katkıda bulunan faktörlerden biri de yeni renk şemasıdır.

Yeni renkleri uygulamadan önce ve sonra.

Bu sürüm (117), Geliştirici Araçları'na, daha önce bahsedilen ve listelenen çeşitli kullanıcı arayüzü metinleri de dahil olmak üzere daha fazla kullanıcı deneyimi iyileştirmesi sunuyor.

Chromium sorunu: 1456677.

Lighthouse 10.4.0

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

Örneğin:

Bağlantıların ayırt edilemeyen renk olup olmadığı kontrol edilemedi.

Ayrıca değişikliklerin tam listesine de bakabilirsiniz. Geliştirici Araçları'ndaki Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek 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 kaynak

DevTools için C/C++ WebAssembly hata ayıklama uzantısı artık açık kaynak ve DevTools ön uç deposunda bulunuyor. Bu uzantı, WebAssembly'de derlenen C++ programları için Geliştirici Araçları'nda hata ayıklama özelliklerini etkinleştirir. Daha fazla bilgi için C/C++ WebAssembly hatalarını ayıklama bölümüne bakın.

Uzantıyı nasıl oluşturacağınızı, çalıştıracağınızı ve test edeceğinizi öğrenin ve katkıda bulunmaktan çekinmeyin.

Chromium sorunu: 1410709.

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler ve iyileştirmeler şunlardır:

CSS İç İçe Yerleştirme: Öğeler paneli, artık iç içe yerleştirilmiş alt öğeler için tüm seçici zincirini (1172985) göstermektedir.
Uygulama > Manifest'te artık Manifest'te display_override değerinin olup olmadığını kontrol eden ve ilgili belgelere yönlendiren bağlantılar sağlayan bir Pencere Denetimleri Yer Paylaşımı bölümü bulunuyor.
Kaynaklar > Sayfa ağacı artık (1442863 dahil ancak bunlarla sınırlı olmamak üzere) aşağıdaki işlemleri gerçekleştirmektedir:
- Tüm içerikleri yoksayılanlar listesindeyse klasörleri grileştirir.
- Tüm içerikleri kaynak eşlemeden geliyorsa klasörleri turuncu renkle renklendirir.
Performans: Yakalama Ayarları artık kaydı başlattığınızda otomatik olarak gizleniyor (1455498).
Kaynaklar > Düzenleyici, Ctrl + Ok davranışını (Win) ve Opt + Arrow (MacO'lar) davranışını geri yükledi (1468208).
Animasyonlar > Tümünü duraklat açma/kapatma düğmesi artık sayfa yüklemeleri genelindeki durumunu korur (1446046).
Uygulama > Depolama > Önbellek depolama alanı, Uygulama > Depolama > Önbellek bölümü'ne (1462622) taşındı.
Bazı kullanıcı arayüzü metinleri ve ipuçları iyileştirilmiştir: Donanım eşzamanlılığı ipucu, Ağ filtresi metinleri ve bir ana menü seçeneği, Uygulama ağacı görünümü, Ağ > Başlık metinleri, Kaynaklar > Geçersiz kılmalar ve Dosya sistemi metinleri'ndeki büyük harf kullanımı.

Yeni deneysel özellikler

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

Web sitenizin kullanıcıları, şeffaf efektleri azaltmayı tercih ettiklerini 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. Oluşturma çekmecesi sekmesi size yardımcı olmak için artık prefers-reduced-transparency: reduce ayarına öykünebilir. Böylece, bir çözüm için prototip oluşturabilir ve web sitenizin bu durumda nasıl davranacağını test edebilirsiniz.

Chrome'da bu özelliği test etmek için chrome://flags uygulamasında Deneysel Web Platformu özelliklerini etkinleştirin.

Chromium sorunu: 1424879.

Gelişmiş Protokol izleyici

Chrome Geliştirici Araçları, Chrome Tarayıcıları denetlemek, denetlemek, 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 izleyici, Geliştirici Araçları tarafından gönderilen tüm CDP isteklerini ve yanıtlarını görüntülemenin ve CDP komutları göndermenin bir yolunu sağlar.

Protokol izleyici, CDP komutlarını daha kolay oluşturabilmenizi ve göndermenizi sağlayan yeni bir arayüzle kavuştu. Artık belgelerde komutları ve parametrelerini aramanız gerekmez. Geliştirici Araçları size bunları önerir.

Protokol izleme çekmecesi sekmesinin sağ alt köşesinde, CDP komut düzenleyicisini göster'i tıklayın, bir hedef seçin, bir komut yazmaya başlayın, gerekirse önerilen parametrelerden birini seçin, parametre değerlerini belirtin ve Komut gönder'i (Ctrl/Cmd + Enter) tıklayın.

CDP komutu belirleme ve gönderme.

Chromium sorunu: 1469345.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.