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 kullanışlı hale getirildi. Böylece, uzak kaynakların yanıt başlıklarını ve web içeriğini bunlara erişim olmadan Ağ panelinden 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ılma ayarlarınız varsa ancak devre dışıysa DevTools bunları etkinleştirir. Henüz ayarlamadıysanız DevTools, en üstteki işlem çubuğunda sizi uyarır. Geçersiz kılmaların saklanacağı bir klasör seçin ve DevTools'un bu klasöre erişmesine izin verin.

DevTools, geçersiz kılma işlemleri ayarlandıktan sonra sizi web içeriğini geçersiz kılmanıza olanak tanımak için Kaynaklar > Geçersiz kılma işlemleri > 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 fareyle 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ına ek olarak XHR ve getirme isteklerinin içeriğini geçersiz kılabilirsiniz. Bu tür geçersiz kılmalarla, 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). DevTools artık desteklenmeyen türler için İçeriği geçersiz kıl seçeneğini devre dışı bırakır.

Chromium sorunları: 792101, 1469776.

Chrome uzantı isteklerini gizleme

Ağ paneline, 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ı olacak yeni bir filtre eklendi.

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

Chromium sorunları: 1257885, 1458803.

Kullanıcıların okuyabileceği HTTP durum kodları

İsteğin başlığındaki Durum Kodu, HTTP durum kodlarının yanında artık kullanıcı tarafından okunabilir metin gösteriyor. Böylece istekle ilgili durumu daha hızlı anlayabilirsiniz.

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

Chromium sorunu: 1153956.

JSON alt türleri için yanıtları okunaklı hâle getirin

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

Chromium sorunu: 406900.

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

Performans paneli artık Ağ kanalındaki bir etkinliğin Özeti'nde iki öncelik alanı gösteriyor: İlk Öncelik ve (nihai) Öncelik. Yalnızca Öncelik. Bu ek alanla artık etkinliğin getirme önceliğinin değişip değişmediğini görebilir ve indirme işlemlerinin sırasını ayarlayabilirsiniz. Daha fazla bilgi için Fetch Priority API ile kaynak yüklemeyi optimize etme başlıklı makaleyi inceleyin.

Buna ek olarak, aynı bilgileri Ağ panelinin Öncelik sütununda, Büyük istek satırları ayarı etkin halde 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 etkinleştirildi. Bu seçenek, kod bloklarını katlamanıza olanak tanır.

Bir kod bloğunu daraltmak için fareyle bloğun başlangıcındaki satır numarasının üzerine gelip daraltma simgesini tıklayın. Bloğu tekrar genişletmek için {...} işaretini tıklayın.

Ayrıca Ayarlar > Tercihler > Kenar çubuğundaki dosyaları 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 Düzenleyici'de açık olmasını sağlar.

Chromium sorunları: 1459193, 1336599.

Üçüncü taraf çerez sorunlarının hata ayıklama işlemi iyileştirildi

Chrome, daha gizli bir web oluşturmaya yardımcı olmak ve buna paralel olarak diğer tarayıcılar tarafından yapılan güncellemelere paralel olarak Özel Korumalı Alan girişimini kullanıma sundu. Bu girişim, web'de gizliliği temelden iyileştirir ve üçüncü taraf çerezlerini geçersiz kılacak şekilde sağlıklı, reklam destekli bir web'i sürdürebilir. Özel Korumalı Alan, değişikliklere rahat bir şekilde uyum sağlamanızı sağlamak için kademeli bir kullanımdan kaldırma zaman çizelgesine sahiptir.

Chrome'un üçüncü taraf çerezlerini aşamalı olarak kullanımdan kaldırma işleminin sonrasında nasıl davranacağını 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 kullanma şeklinizden bağımsız olarak (bayrakla veya işaretsiz), Sorunlar sekmesinde artık tüm yeni Chrome kullanıcıları için Üçüncü taraf çerezleriyle ilgili sorunları dahil et onay kutusu varsayılan olarak etkin durumdadır ve sonuç olarak raporlar şu şekildedir:

• Yaklaşan kullanımdan kaldırmayla 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ılacak çerezlerle ilgili 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.

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

Chromium sorunları: 1458839, 1462693, 1466310.

Uygulama panelinde önceden yükleme işleminde hata ayıklama

Chrome ekibi, kullanıcının gitme olasılığı yüksek olan gelecekteki sayfaların tam ön oluşturma özelliğini geri getiriyor. Geliştirici Araçları, bu konuda hata ayıklamanıza olanak tanımak için Uygulama paneline Ön yükleme bölümünü ekler. Yeni ön getirme ve ön oluşturma (toplu olarak "gezinme ön getirme" olarak bilinir) özelliği, bağlantı tabanlı kaynak ipuçları yerine Tahmin Kuralları API'sini kullanır.

Bu demo sayfasında, Uygulama > Ön yükleme bölümünde şunları inceleyebilirsiniz:

• Geçerli sayfada bulunan tüm kural gruplarını listeleyen Spekülasyon Kuralları.
• Kural gruplarındaki önceden getirilen ve önceden oluşturulan tüm URL'leri listeleyen ön yüklemeler.
• Geçerli sayfanın önceden işlenmiş durumunu listeleyen bu sayfa.

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

Chromium sorunu: 1410709.

Yeni renkler

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

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

Chromium sorunu: 1456677.

Lighthouse 10.4.0

Lighthouse panelinde artık Lighthouse 10.4.0 sürümü kullanılıyor. Bu sürümde en önemlisi, aşağıdakiler için yeni erişilebilirlik denetimleri eklenmiştir:

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

Örneğin:

Ayrıca değişikliklerin tam listesini de inceleyebilirsiniz. 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

Geliştirici Araçları için C/C++ WebAssembly hata ayıklama uzantısı artık açık kaynaktır ve Geliştirici Araçları ön uç veri havuzunda bulunur. Bu uzantı, WebAssembly olarak 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ı nasıl oluşturacağınızı, çalıştıracağınızı ve test edeceğinizi öğrenin ve katkıda bulunmaya çekinmeyin.

Chromium sorunu: 1410709.

Çeşitli öne çıkan anlar

Bu sürümdeki dikkate değer düzeltme ve iyileştirmelerden bazıları şunlardır:

• CSS iç içe yerleştirme: Öğeler panelinde artık iç içe yerleştirilmiş alt öğeler için seçici zincirinin tamamı (1172985) gösterilmektedir.
• Uygulama > Manifest bölümünde artık manifest dosyasında display_override değerinin bulunup bulunmadığını kontrol eden ve ilgili dokümanların bağlantılarını sağlayan bir Pencere Denetimleri Yerleşimi bölümü bulunuyor.
• Kaynaklar > Sayfa ağacı artık aşağıdakileri (1442863) kapsayan ancak bunlarla sınırlı olmayan işlemleri gerçekleştiriyor:
  • Tüm içerikleri yoksayılanlar listesindeyse klasörleri devre dışı bırakır.
  • Tüm içerikleri bir kaynak eşlemeden geliyorsa klasörler turuncu renkle gösterilir.
• Performans: Kayıt Ayarları artık kaydı başlattığınızda otomatik olarak gizlenir (1455498).
• Kaynaklar > Düzenleyici'de Ctrl + Ok (Win) ve Opt + Ok (MacOs) davranışı geri yüklendi (1468208).
• Animasyonlar > Tümünü duraklat açma/kapatma düğmesi artık sayfa yüklemelerinde durumunu korur (1446046).
• Uygulama > Depolama > Önbellek depolama alanı, Uygulama > Depolama > Ö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ğ > Üstbilgi 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 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 göz önünde bulundurabilirsiniz. Size yardımcı olmak için Oluşturma çekmecesi sekmesi artık prefers-reduced-transparency: reduce ayarını emüle edebilir. Böylece bir çözümün prototipini oluşturabilir ve bu durumda web sitenizin nasıl davrandığını test edebilirsiniz.

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

Chromium sorunu: 1424879.

Gelişmiş protokol izleyici

Chrome Geliştirici Araçları, Chrome tarayıcılarını donatmak, incelemek, hata ayıklamak ve profillemek için Chrome Geliştirici Araçları Protokolü'nü (CDP) kullanır. Chromium veya DevTools geliştiricisiyseniz Protokol İzleyici, DevTools tarafından yapılan tüm CDP isteklerini ve yanıtlarını görüntülemenize ve CDP komutları göndermenize olanak tanır.

Protokol İzleyici, CDP komutlarını daha kolay oluşturmanıza ve göndermenize olanak tanıyan yeni bir arayüz kazandı. Artık belgelerde komutları ve parametrelerini aramanız gerekmiyor. Geliştirici Araçları, bunları size önerecektir.

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

Chromium sorunu: 1469345.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji web platformu API'lerini test etmenizi ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanızı sağlar.

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

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu 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.