Geliştirici Araçları'ndaki yenilikler, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Yeni Otomatik Doldurma paneli

Bu sürümde, DevTools'a yeni otomatik doldurma paneli eklendi. Chrome Otomatik Doldurma, web sitelerindeki formları kayıtlı adreslerle otomatik olarak doldurmanın kolay bir yolunu sunar. Yeni Otomatik Doldurma paneli, form alanlarınız, tahmin edilen otomatik doldurma değerleri ve kayıtlı veriler arasındaki eşlemeyi incelemenize olanak tanır.

Bu demo sayfasında test verileriyle yeni paneli deneyin:

  1. Profili otomatik doldur bölümünde, Formu doldur... düğmelerinden birini, ardından Gönder'i tıklayın. Ardından, Adresi kaydet? iletişim kutusunda Kaydet'i tıklayın ve formun bulunduğu sayfaya geri dönün.
  2. DevTools'u açın ve otomatik doldurma etkinliği tetikleyin: Bir form alanı seçin ve açılır listeden adresi seçin.

Otomatik doldurma paneli otomatik olarak açılır ve algılanan form alanlarını, otomatik doldurmanın tahmin ettiği alanları ve kayıtlı değerleri gösterir.

Otomatik doldurma paneli.

Daha fazla bilgi edinmek için Formlar hakkında ve Otomatik doldurma başlıklı makaleleri inceleyin.

WebRTC için gelişmiş ağ sınırlama

Özel ağ tıkanma profillerine paketle ilgili parametrelerin yeni eklenmesiyle artık WebRTC uygulamalarınızı doğrudan DevTools'ta tıkanabilirsiniz. Bu, üçüncü taraf yazılım kullanmanıza gerek kalmadan gerçek zamanlı iletişim uygulamanızı test etmek için yararlıdır.

Yeni parametreler şunlardır: Paket Kaybı (yüzde), Paket Sırası Uzunluğu (paket sayısı) ve Paket Yeniden Düzenleme işareti.

Özel akış kısıtlaması profillerine paketle ilgili yeni seçenekler eklemeden önce ve sonra.

Bir WebRTC bağlantısını kısıtlamak için Ayarlar > Kısıtlama bölümünde özel bir profilde paketle ilgili parametreleri belirtin ve Ağ panelinde seçin.

Bu demo sayfasında yeni parametreleri deneyin. Öncelikle sayfanın kamerayı kullanmasına izin verin. Ardından, Ağ panelinde yapılandırdığınız özel profili seçin ve sayfaya geri dönüp Başlat ve Ara'yı tıklayın.

Chromium sorunu: 41175925.

Animasyonlar panelinde kaydırmayla çalışan animasyon desteği

Animasyonlar paneli artık kaydırmayla çalışan animasyonları incelemenize olanak tanır.

Bu özelliği bu demo sayfasında deneyin. Kaydırmayla çalışan animasyonları yakalamak için Animasyonlar panelini açıp sayfayı yeniden yükleyin.

Fare simgesiyle işaretlenmiş, kaydırmayla çalışan animasyon grubu.

Genel Bakış bölümünde, fare simgesiyle işaretlenmiş bir animasyon grubu görünür. Artık denetleyebilirsiniz. Grup, zaman çizelgesinde milisaniye yerine piksel değerlerini gösterir.

Öğeler > Stiller bölümünde CSS iç içe yerleştirme desteği iyileştirildi

Öğeler > Stiller sekmesi, CSS iç içe yerleştirme desteğini iyileştirdi ve artık iç içe yerleştirilmiş stilleri girinti ve parantez içinde gösteriyor. CSS iç içe yerleştirme, CSS kurallarını gruplandırmanın ve daha az ayrıntılı ve daha yapılandırılmış bir şekilde ifade etmenin bir yoludur.

Girintiyi ekleme ve iç içe yerleştirilmiş stilleri köşeli parantez içine alma işleminden önceki ve sonraki durum.

Chromium sorunu: 40166888.

Gelişmiş Performans paneli

Bu sürümde Performans panelinde çeşitli iyileştirmeler yapıldı.

İşlevleri ve alt öğelerini alev grafiğinde gizleme

Performans > Ana bölümündeki alev grafiğindeki gereksiz bilgileri filtrelemek için artık alakasız işlevleri ve alt öğelerini gizleyebilirsiniz. Alev grafiğinde bir işlevi sağ tıklayın ve içerik menüsünden bir seçenek belirleyin.

İşlevleri ve alt öğelerini gizlemenize olanak tanıyan bir bağlam menüsü eklemeden önce ve sonra.

Gizli alt öğeleri olan işlevlerin sağ tarafında Açılır menü düğmesi bulunur. Gizli çocukların sayısını görmek için fareyle üzerine gelin ve tekrar göstermek için tıklayın. Alev grafiğinin ilk durumuna dönmek için bir işlevi sağ tıklayın ve İzleme sıfırla'yı seçin.

Seçilen başlatıcılardan, başlatıcıların başlattığı etkinliklere giden oklar

Daha önce, Ana kanalda bir etkinlik seçtiğinizde kanalda başlatıcıdan seçilen etkinliğe bir ok gösteriliyordu. Artık kanalda, seçilen etkinlikten başlatılan etkinliğe (varsa) giden bir ok da gösteriliyor.

Önce ve sonra, seçilen etkinliklerden başlatılan etkinliklere giden okları ve Göster yerine adlandırılmış bağlantıları gösterir.

Ayrıca, tüm başlatıcılar artık Özet sekmesinde Başlatıcı alanlarına sahiptir ve hem Başlatıcı hem de Başlatıcı alanları Göster yerine adlandırılmış bağlantılara sahiptir.

Chromium sorunları: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

Lighthouse panelinde artık Lighthouse 11.6.0 sürümü kullanılıyor. Değişikliklerin tam listesini inceleyin.

Önemli değişikliklerden biri, yeni etkinleştirme JS örneklemeyi etkinleştir ayarıdır. Bu ayar varsayılan olarak devre dışıdır.

Etkinleştirme amaçlı bir JS örnekleme ayarı eklemeden önce ve sonra.

JS örneklemeyi etkinleştirmek, performans izlemeye ayrıntılı JavaScript çağrı yığınları ekler ancak rapor oluşturmayı yavaşlatabilir.

JS örneklemesi olmadan (sol) ve JS örneklemesiyle (sağ) performans izleme.

İzleme, Lighthouse raporu oluşturulduktan sonra Araçlar menüsü > Sıkıştırılmamış İzlemeyi Görüntüle bölümünde bulunur.

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.

Bellek > Toplu hacim anlık görüntüleri bölümündeki özel kategoriler için ipuçları

Bellek panelindeki yığın anlık görüntüleri, kuruculara dayalı olmayan özel nesne gruplarına sahiptir. Fareyle bu tür nesnelerin üzerine geldiğinizde Anı panelinde kısa bir açıklama ve dokümanlar bölümündeki daha uzun bir açıklamanın bağlantısı içeren bir ipucu gösterilir.

Özel nesne grupları için açıklayıcı bir ipucu gösteren öncesi ve sonrası.

Chromium sorunu: 41490331.

Uygulama > Depolama alanı güncellemeleri

Bu sürümde, Uygulama > Depolama bölümünde birkaç güncelleme yapıldı.

Ortak depolama alanı için kullanılan bayt sayısı

Uygulama > Depolama alanı > Paylaşılan depolama alanı bölümünde artık bir kaynağın kullandığı bayt sayısı gösteriliyor.

Paylaşılan depolama alanı için kaç bayt kullanıldığını gösteren önce ve sonra durumu.

Ortak depolama alanı, gizliliği korumaya yönelik okuma erişimi ile siteler arası sınırsız depolama alanı yazma erişimi elde etmenizi sağlar.

Chromium sorunu: 324464353.

Web SQL desteği tamamen sonlandırıldı

Chrome, 119 sürümünde WebSQL desteğini sonlandırdı ve bu sürümde kullanımdan kaldırma deneme jetonunu kaldırdı. Bu nedenle artık WebSQL'i kullanamazsınız.

Geliştirici Araçları da bu doğrultuda Uygulama panelinden Web SQL bölümünü kaldırdı.

Chromium sorunu: 327254049.

Kapsam panelinde yapılan iyileştirmeler

Bu sürümde Kapsam panelinde birkaç güncelleme yapıldı:

  • Durum çubuğu artık filtrelenen URL'lerin kullanım istatistiklerini doğru şekilde hesaplıyor. Daha önce, filtreyle eşleşen çocukların kullanım verilerini toplama yerine ebeveynlerinin verilerini toplamaktaydı.

Eşleşen çocuk istatistiklerinin doğru şekilde hesaplandığından önceki ve sonraki durum.

  • Özellikle yeşil renk görme bozukluğu olan kullanıcılar için görünürlüğü artırmak amacıyla, kullanılan kodun rengi artık yeşil yerine gridir.

Kullanılan kodun rengini gri olarak değiştirmeden önceki ve sonraki durum.

Chromium sorunu: 41494198, 329253687.

Katmanlar panelinin desteği sonlandırılabilir

Katmanlar panelinin desteği, az kullanım nedeniyle yakında sonlandırılabilir. Panelin üst kısmında artık bir uyarı banner'ı gösteriliyor.

Katmanlar panelinin üst kısmında, desteğin sonlandırılabileceğini duyuran uyarı banner'ı.

Ekip, panelin desteğini sonlandırma konusunda nihai kararı vermeden önce düşüncelerinizi ve endişelerinizi bizimle paylaşabilirsiniz.

JavaScript Profil Aracı'nın desteğinin sonlandırılması: Dördüncü aşama, son

Bu sürümde JS Profiler panelinin desteği tamamen sonlandırıldı ve panel artık yeniden etkinleştirilemez.

CPU performansını profillemek için Performans panelini kullanın.

Chromium sorunu: 40262073.

Diğer öne çıkan özellikler

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

  • Ağ:
    • Çok satırlık çerezlerin yanlış ayrıştırılmasıyla ilgili bir hata düzeltildi (325410304).
    • Bağlantıyı başlatan sütununda çağrı yığını önizlemesi düzeltildi (327665602).
  • Performans İzleyici: İzleme onay kutuları artık kullanıcı arayüzünün geri kalanıyla aynı (1467464).
  • Kaynaklar: XHTML dokümanları için söz dizimi vurgulama özelliği eklendi (327940244).
  • Ayarlar > Cihazlar: Eski Galaxy Fold, yeni Galaxy Z Fold 5 (40113439) ile değiştirildi.
  • Performans: Ctrl/Cmd+F (1523279) ile arama yaparken eşleşen tüm arama sonuçları artık vurgulanıyor.
  • Geliştirici kaynakları: Artık C/C++ DevTools Desteği (DWARF) Chrome uzantısı (40746829) gibi dil uzantıları aracılığıyla yüklenen kaynaklar da gösteriliyor.
  • Performans: Kırpılmış çağrı yığınının ve Özet sekmesindeki kötü düzeninin düzeltilmesi (325314708).
  • Çekmece: Kapat düğmeleri artık odaklanılabilir durumda olduğundan paneller klavye kullanılarak kapatılabilir.

Ö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 son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.