Geliştirici Araçları'ndaki yenilikler (Chrome 122)

Sofia Emelianova
Sofia Emelianova
GitHub

Resmi Kaydedici uzantıları koleksiyonu yayında

Dışa aktarma ve tekrar oynatma Kaydedici uzantılarının resmi koleksiyonu kullanıma sunuldu.

Koleksiyonu doğrudan Kaydedici'den açmak için Kaydedici panelinin üst kısmındaki işlem çubuğunda Dışa aktar > Uzantıları edin...'i seçin.

Ağ iyileştirmeleri

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

Durum sütunundaki hata nedeni

Durum sütununda artık her zaman bir hata nedeni gösteriliyor. Daha önce Büyük istek satırları'nı etkinleştirmeniz veya tablodaki isteği seçmeniz gerekiyordu.

Durum sütununda hata nedenini gösteren öncesi ve sonrası.

Chromium sorunları: 1506760.

İyileştirilmiş Kopyala alt menüsü

İsteğin Kopyala alt menüsü artık daha düzenli.

Kopyala alt menüsünü iyileştirmeden önceki ve sonraki görünümü.

Ayrıca, cURL olarak kopyala seçeneği artık Windows'da doğru komutu panoya kopyalıyor.

Chromium sorunları: 1267033, 1276452, 798498.

Performans iyileştirmeleri

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

Zaman Çizelgesi'ndeki içerik haritaları

Performans panelinin üst kısmındaki zaman çizelgesi artık gezinme izleri ayarlamanıza ve bunlar arasında geçiş yapmanıza olanak tanıyor.

İçerik haritası ayarlamak için Zaman Çizelgesi'nde bir aralık seçin, imleçle üzerine gelin ve N ms düğmesini tıklayın. Birbiri ardına birkaç iç içe yerleştirilmiş ekmek kırıntısı oluşturabilirsiniz. Yakınlaştırma düzeyleri arasında geçiş yapmak için Zaman Çizelgesi'nin üst kısmındaki zincirde ilgili izi tıklayın. İçerik haritalarının nasıl çalıştığını görmek için sonraki videoyu izleyin.

Chromium sorunları: 1467739.

Ana kanaldaki etkinlik başlatıcılar

Performans > Ana iz varsayılan olarak artık başlatıcıları ve neden oldukları sonraki etkinlikleri birbirine bağlayan okları gösteriyor.

  • Stil veya düzen geçersiz kılma -> Stilleri yeniden hesapla veya Düzen
  • Animasyon Karesi İste -> Animasyon Karesi Tetiklendi
  • Boşta Geri Çağırma İste -> Boşta Geri Çağırmayı Tetikle
  • Zamanlayıcı Yüklendi -> Zamanlayıcı Tetiklendi
  • WebSocket oluştur -> Gönder... ve WebSocket el sıkışması al veya WebSocket'i kaldır

Okları görmek için izlemede bu tür bir etkinlik bulun ve tıklayın. Bu özellik daha önce deneysel olarak sunuluyordu.

İstekten ve boşta geri çağırma tetiklenmesinden gelen bir ok.

Chromium sorunları: 1434596.

Node.js DevTools için JavaScript VM örneği seçici menüsü

Node.js DevTools'un Performans panelinde artık işlem çubuğundaki ilgili açılır menüden bir JavaScript VM örneği seçebilirsiniz. Benzer bir özellik, yakında desteği sonlandırılacak JavaScript Profiler'da da mevcuttu.

JavaScript VM örneği seçmenize olanak tanıyan yeni bir menü eklenmeden önceki ve sonraki görünüm.

Chromium sorunları: 1511813.

Öğe iyileştirmeleri

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

Aşağıdaki iki özelliğe ek olarak, Öğeler paneli artık açtığınız son sekmeyi (ör. Hesaplanan veya Özellikler) hatırlıyor.

::view-transition sözde öğesi artık Stiller'de düzenlenebilir

Artık Stiller'deki ::view-transition CSS sahte öğelerini, inceleyici stil sayfasını kullanarak düzenleyebilirsiniz.

Görünüm geçişi sözde öğelerinin düzenleme öncesi ve sonrası desteği.

Daha fazla bilgi için View Transitions API ile sorunsuz ve basit geçişler başlıklı makaleyi inceleyin.

Chromium sorunları: 1511233.

Blok container'lar için align-content özelliği desteği

align-content mülkü artık table-caption ve table-cell dahil olmak üzere tüm blok kapsayıcılarla çalışır. Daha önce yalnızca ızgara ve esnek düzenle çalışıyordu.

Blok kapsayıcılarda align-content desteği öncesi ve sonrası.

Chromium sorunları: 1500511.

Kaynaklar'da yeni kısayol ve komut

Artık Kaynaklar'da bir satır numarasını Cmd (Mac) / Ctrl (Win) + Üst Karakter tuşlarına basarak tıklayarak bir logpoint oluşturabilirsiniz. Bu kısayol, koşullu kesme noktaları için zaten mevcut olan Cmd (Mac) / Ctrl (Win) + tıklama kısayoluna eklenmiştir.

Komut Menüsü'ne, Düzenleyici'nin açılır menüsündeki ilgili seçenekle aynı işlevi gören yeni Etkin dosyayı, gezinme kenar çubuğunda göster komutu eklendi.

Etkin dosyayı gezinme kenar çubuğunda gösterme komutu eklendi.

Chromium sorunları: 1486933, 1467464.

Emülasyonu yapılan katlanabilir cihazlarda duruş desteği

Cihaz modu artık emüle edilmiş katlanabilir bir cihazın duruşunu (Kesintisiz veya Katlanmış) ayarlamanıza olanak tanır. Sürekli duruş, "düz" bir konumu ifade eder ve katlandığında ekran bölümleri arasında bir açı oluşur.

Duruş seçeneklerinin bulunduğu açılır menü.

Ayrıca, Cihazlar listesine yeni bir emüle edilmiş katlanabilir cihaz eklenir: Asus Zenbook Fold.

Chromium sorunu: 1066842.

Dinamik temalar

Geliştirici Araçları artık Chrome'un renk temasıyla otomatik olarak eşleşiyor. Tema ayarlamak için:

  1. Yeni bir sekme açın ve sağ alt köşedeki Chrome'u Özelleştirin seçeneğini tıklayın.
  2. Görünüm bölümünde Temaları değiştir seçeneğini kullanarak bir tema seçin veya renk paleti belirleyin.

Geliştirici Araçları, Görünüm'de seçilen renk temasıyla eşleşir.

Chromium sorunları: 1483276.

Ağ ve Uygulama panellerindeki üçüncü taraf çerezlerinin kullanımdan kaldırılmasıyla ilgili uyarılar

Hem Ağ hem de Uygulama panelleri artık İzlemeye Karşı Koruma'nın üçüncü taraf kısıtlamalarından etkilenen çerezlerin yanında uyarıları vurguluyor ve gösteriyor.

Ağ'da uyarı simgesi olan bir isteği bulup tıklayın ve Çerezler sekmesini açın.

Ağ panelinde üçüncü taraf çerezleri yakalanmadan önce ve yakalandıktan sonraki durum.

Uygulama bölümünde Depolama > Çerezler'e gidin ve bir alanı tıklayın. Sarı renkle vurgulanan çerezler tarayıcıda depolanmaz.

Uygulama panelinde üçüncü taraf çerezlerinin vurgulandığı önceki ve sonraki durum.

Sorunları açıklayan bir ipucu görmek için uyarı simgesinin üzerine gelin ve daha fazla bilgi içeren Sorunlar sekmesini açmak için simgeyi tıklayın.

Ayrıca, tablodaki çerezler artık varsayılan olarak ada göre sıralanıyor.

Chromium sorunları: 1506225, 1503961.

Lighthouse 11.4.0

Lighthouse paneli artık Lighthouse 11.4.0'ı çalıştırıyor. Değişikliklerin tam listesini inceleyin. Önemli değişikliklerden biri, web sitenizin hâlâ üçüncü taraf çerezlerini kullanıp kullanmadığını tespit etmenizi sağlayan yeni denetimdir.

Üçüncü taraf çerezlerini algılayan denetim.

Geliştirici Araçları'nda Lighthouse panelini kullanmanın temel bilgileri için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 772558.

Erişilebilirlik

Bu sürümde aşağıdaki erişilebilirlik iyileştirmeleri yapıldı:

  • Ayarlar > Denemeler'i açtığınızda Arama kutusu artık otomatik olarak odaklanıyor.
  • Network > Filter bölümündeki Clear input düğmesine artık odaklanılabiliyor.
  • Kaynaklar > Sayfa bölümündeki dosya ağacı artık yüksek kontrast modunda doğru şekilde gösteriliyor.
  • Ekran okuyucular artık aşağıdakileri doğru şekilde duyuruyor:
    • Kaynaklar > Kesme Noktaları'ndaki onay kutularının durumu.
    • Öneri listesi için konum ve dizin bilgileri.
    • Ayarlar > Konumlar'da konum ekleme veya silme işleminden sonraki sonuç.
    • Ayarlar > Yoksayma Listesi'nde dışlama kuralı grupları (genel veya özel).

Chromium sorunları: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmeler ve iyileştirmelerden bazıları şunlardır:

  • Animasyonlar:
    • Ekran görüntüsü pop-up'ının sınırların dışında oluşturulmasına neden olan hata düzeltildi (1506991).
    • Kaldırılan animasyon düğümlerinin kaldırılmış olarak işaretlenmemesi hatası düzeltildi (1506561).
  • Ağ:
    • Üst bilgi geçersiz kılmaları: Üstbilgiler sekmesindeki yanlış mor nokta simgesiyle ilgili hata düzeltildi (1507856).
    • Önizleme: Gereksiz çift kod çözme ile ilgili hata düzeltildi (1509336).
    • Kısa isteklerin gösterilmemesine neden olan hata düzeltildi (1509862).
  • Application (Uygulama) > IndexedDB: Diğer panellerle tutarlılık için işlem çubuğundaki düğmeler yeniden düzenlendi (1393800).
  • Sensörler: Kullanılamayan konumun yanlış başarılı geri çağırma ile ilgili hatası düzeltildi (1486859).
  • Performans:
    • Çöp topla düğmesinde artık "çöp kutusu" yerine uygun bir simge olan "paspas" kullanılıyor (1507530).
    • Performans izleme, about:blank'ya (1509947) gidildiğinde artık verileri saklıyor.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.