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 hızlı geçersiz kılın

Yerel geçersiz kılmalar özelliği artık daha kullanışlı hale getirildi. Böylece, erişim başlıklarına erişmeden Ağ panelinden uzak kaynakların web içeriğiyle ve yanıt başlıklarını 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.

Yerel geçersiz kılmalar ayarlayıp devre dışı bıraktıysanız Geliştirici Araçları bunları etkinleştirir. Geliştirici Araçları'nı henüz ayarlamadıysanız üstteki işlem çubuğunda bir istem görüntülenir. Geçersiz kılmaların depolanacağı bir klasör seçin ve Geliştirici Araçları'nın bu klasöre erişmesine izin verin.

Üst kısımdaki işlem çubuğundan bir klasör seçin ve bu klasöre erişim izni verin.

Geçersiz kılma ayarları ayarlandıktan sonra Geliştirici Araçları, sizi web içeriğini geçersiz kılmanıza izin vermek için Kaynaklar > Geçersiz kılmalar > Düzenleyici'ye yönlendirir.

Geçersiz kılınan kaynakların Ağ panelinde ile belirtildiğini unutmayın. Hangi öğelerin 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ıl

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). Geliştirici Araçları, desteklenmeyen türler için İçeriği geçersiz kıl seçeneğini artık 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 eklendi.

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

Uzantı URL'leri, istekler tablosunda gizlenmiş.

Chromium sorunları: 1257885, 1458803.

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

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

Kullanıcıların okuyabileceği HTTP durum kodlarını görüntülemeden önce ve sonra.

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ı hâle getirin

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ıyor ve düzeltmenizi sağlıyor.

Ağ yanıtı önizlemesinde bir uygulama/json alt türünü ayrıştırdıktan önce ve sonra.

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 bölümüne bakın.

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

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

Ağ panelindeki Öncelik sütunu.

Chromium sorunları: 1463901, 1380964.

Kaynak ayarları varsayılan olarak etkin: 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 katlamak için fareyle blokun başlangıcının yanındaki satır numarasının üzerine gelin ve daralt 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ıyla ilgili gelişmiş hata ayıklama

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'deki gizliliği temel olarak geliştiriyor ve üçüncü taraf çerezlerini geçersiz kılacak şekilde web'deki sağlıklı, reklam destekli web'i sürdürebilir. Özel Korumalı Alan, değişikliklere rahat bir şekilde uyum sağlamanızı sağlamak için kademeli bir aşamalı olarak kullanımdan kaldırma zaman çizelgesine sahiptir.

Üçüncü taraf çerezleri kullanımdan kaldırıldıktan sonra Chrome'un nasıl davrandığını zaten test edebilirsiniz. Bunu yapmak için Chrome'u komut satırından --test-third-party-cookies-phaseout işaretiyle çalıştırın. Bu işaretin ne işe yaradığını öğrenmek için Çerezlerde hata ayıklama bölümüne bakın.

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 aşamalı olarak kullanımdan kaldırma ile 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ılmasıyla ilgili çerez uyarılarını görmek istiyorsanız bu onay kutusunu işaretlediğinizden emin olun.

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

Sorunlar sekmesinde bildirilen üçüncü taraf çerez sorunları.

Ayrıca, Ağ panelindeki Engellenen yanıt çerezleri filtresi, yalnızca engellenen yanıt çerezlerini gösterdiğini netleştirmek için 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ıklama

Chrome ekibi, kullanıcının gitme ihtimali yüksek olan gelecekteki sayfaların tamamen önceden oluşturulmasını sağlıyor. Geliştirici Araçları, bu hatada hata ayıklayabilmeniz için Uygulama paneline Önceden Yükleme bölümünü ekler. Yeni önceden getirme ve önceden işleme (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 gruplarını listeleyen Spekülasyon Kuralları.
Kural kümelerindeki önceden getirilen ve önceden oluşturulmuş tüm URL'leri listeleyen önceden yüklemeler.
Geçerli sayfanın önceden işlenmiş durumunu listeleyen bu sayfa.

Daha fazla bilgi edinmek için spekülasyon kuralları hata ayıklamasıyla ilgili özel gönderiyi inceleyebilirsiniz.

Chromium sorunu: 1410709.

Yeni renkler

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

Yeni renklerin uygulanmasının öncesinde ve sonrasında.

Bu sürüm (117), bir dizi iyileştirilmiş kullanıcı arayüzü metni de dahil olmak üzere, hem sözü edilen hem de daha ayrıntılı bir şekilde listelenen Geliştirici Araçları'na daha fazla kullanıcı deneyimi iyileştirmesi sağlıyor.

Chromium sorunu: 1456677.

Lighthouse 10.4.0

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

Örneğin:

Bağlantıları ayırt edilemez hale getiren renk denetimi başarısız oldu.

Ayrıca değişikliklerin tam listesini de inceleyebilirsiniz. Geliştirici Araçları'nda Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme konusuna bakın.

Chromium sorunu: 772558.

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

DevAraçlar için C/C++ WebAssembly hata ayıklama uzantısı artık açık kaynak ve Geliştirici Araçları ö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.

Çeşitli öne çıkan anlar

Bu sürümdeki önemli düzeltmeler 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'te artık manifest'te display_override değerinin olup olmadığını kontrol eden ve ilgili dokümanların bağlantılarını sağlayan bir Pencere Denetimi Yer Paylaşımı bölümü var.
Kaynaklar > Sayfa ağacı artık aşağıdaki işlemleri gerçekleştiriyor (1442863):
- 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 (1455498) otomatik olarak gizleniyor.
Kaynaklar > Düzenleyici, Ctrl + Ok davranışını (Win) ve Opt + Ok (MacOs) (1468208) davranışını geri yükledi.
Animasyonlar > Tümünü duraklat açma/kapatma düğmesi artık sayfa yüklemelerinde durumunu koruyor (1446046).
Uygulama > Depolama > Önbellek depolama alanı, Uygulama > Depolama > Önbellek bölümü (1462622) konumuna taşındı.
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ğaç görünümünde büyük harf kullanımı, Ağ > Başlık 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 dikkate alabilirsiniz. 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 ürününde Deneysel Web Platformu özelliklerini etkinleştirin.

Chromium sorunu: 1424879.

Gelişmiş Protokol izleyici

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

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

Protokol izleme çekmecesinin 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 önerilenlerden birini seçin, parametre değerlerini belirtin ve Komut gönder'i (Ctrl/Cmd + Enter) tıklayın.

Bir CDP komutu belirtme ve gönderme.

Chromium sorunu: 1469345.

Önizleme kanallarını indirme

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

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

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
Geliştirici Araçları'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.