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ılmalar ayarlandıktan sonra Geliştirici Araçları sizi Kaynaklar > Geçersiz kılmalar > Web içeriğini geçersiz kılmanıza olanak tanıyan Düzenleyici.

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 önceki ve sonraki.

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 özelliği artık varsayılan olarak etkin.

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

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ında, 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ümanlara bağlantılar sağlayan bir Pencere Denetimleri Yer Paylaşımı bölümü bulunuyor.
Kaynaklar > Sayfa ağacı, (1442863) dahil ancak bunlarla sınırlı olmamak üzere artık aşağıdaki işlemleri gerçekleştirmektedir:
- 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 düğmesi artık sayfa yüklemelerinde durumunu koruyor (1446046).
Uygulama > Depolama > Önbellek depolama alanı, Uygulama > Depolama > Önbellek bölümü (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ğ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 izleyici, Geliştirici Araçları tarafından gönderilen tüm CDP isteklerini ve yanıtlarını görüntüleyip CDP komutları göndermenize olanak tanır.

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ı sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.