Geliştirici Araçları'ndaki Yenilikler (Chrome 115)

Sofia Emelianova
Sofia Emelianova
GitHub

Öğe iyileştirmeleri

Yeni CSS alt ızgara rozeti

Öğeler paneline alt ızgara için yeni bir subgrid rozeti eklendi. Bu özellik şu anda Chrome Canary'da deneysel olarak sunulmaktadır.

Alt ızgara olan ve bu nedenle parça sayısını ve boyutunu üst öğesinden devralan iç içe yerleştirilmiş bir ızgarayı incelemek ve hata ayıklamak için rozeti tıklayın. Bu düğme, görüntü alanındaki öğenin üstünde sütunları, satırları ve sayılarını gösteren bir yer paylaşımını açar/kapatır.

Görüntü alanındaki alt ızgara rozeti ve yer paylaşımı.

Öğeler panelindeki tüm rozetlerin listesi için Rozetler referansı başlıklı makaleyi inceleyin.

Chromium sorunu: 1442536.

İpuçlarındaki seçici özgüllüğü

Öğeler > Stiller bölümünde, fareyle bir seçicinin üzerine gelerek özellik ağırlığını bir ipucu olarak görebilirsiniz.

Bir seçicinin özgül ağırlığını içeren ipucu.

Chromium sorunu: 1204932.

İpuçlarındaki özel CSS mülklerinin değerleri

Öğeler > Stiller bölümünde, fareyle bir özel CSS mülk adının üzerine gelerek değerini bir ipucu olarak görebilirsiniz.

Özel CSS mülkünün değerini içeren ipucu.

DevTools ekibi, bu iyileştirmeyi hayata geçirdikleri için 一丝 ve Suyan'a teşekkür eder.

Chromium sorunu: 1380779.

Kaynak iyileştirmeleri

CSS söz dizimi vurgulama

Kaynaklar paneli, SASS, SCSS ve LESS gibi önceden işlenmiş CSS dosyaları için aşağıdakileri alır:

  • Söz dizimi vurgulama.
  • Satır içi düzenleyici desteği. Bu düzenleyicide, Öğeler > Stiller bölümündeki düzenleyicilere benzer özellikler (ör. Renk Seçici ve Yumuşatma Düzenleyicisi) bulunur.

Kaynaklar'da CSS söz dizimi vurgulama ve satır içi düzenleyici desteği iyileştirildi.

Chromium sorunları: 1302261, 1392085.

Koşullu kesme noktaları ayarlama kısayolu

Artık kısayol kullanarak koşullu kesme noktaları daha hızlı ayarlayabilirsiniz. Kesme noktası iletişim kutusunu açmak için Komut (MacOS) veya Denet (Windows / Linux) tuşunu basılı tutun ve Kaynaklar > Düzenleyici'nin sol sütunundaki satır numarasını tıklayın.

Sol sütundaki satır numarası ve kesme noktası iletişim kutusu.

Chromium sorunu: 1405767.

Uygulama > Hemen Çıkma Durumunu İzleme Çözümleri

Chrome'daki Hemen Çıkış İzleme Azaltmaları denemesi, hemen çıkış izleme tekniğini kullanarak siteler arası izleme gerçekleştirdiği anlaşılan sitelerin durumunu tanımlamanıza ve silmenize olanak tanır. Uygulama > Arka Plan Hizmetleri bölmesine, izleme azaltma işlemlerini manuel olarak zorlamanıza olanak tanıyan ve durumları silinen siteleri listeleyen yeni bir Hemen Çıkış İzleme Azaltma sekmesi eklendi.

Bu güvenlik özelliğine göz atın:

  1. Chrome'da üçüncü taraf çerezlerini engelleme Üç noktalı menü. > Ayarlar > Güvenlik. Gizlilik ve güvenlik > Çerezler ve diğer site verileri > Radyo düğmesi işaretli. Üçüncü taraf çerezlerini engelle'yi etkinleştirin.
  2. chrome://flags'te Hemen Çıkma Durumunu İzleme Çözümleri denemesini Silmeyle Etkin olarak ayarlayın.
  3. Bu demo sayfasını inceleyin, Uygulama > Arka Plan Hizmetleri > Hemen Çıkış İzleme Azaltmaları'nı açın, sayfadaki bir hemen çıkış bağlantısını tıklayın, Chrome'un hemen çıkışı kaydetmesini bekleyin (10 saniye) ve durumu hemen silmek için Zorla çalıştır'ı tıklayın.

Hemen çıkma durumunu izleme çözümleri, bir durumun silindiğini listeler.

Ayrıca Sorunlar sekmesi, yaklaşan durum silme işlemi hakkında sizi uyarır.

Chromium sorunu: 1432303.

Lighthouse 10.2.0

Lighthouse panelinde artık Lighthouse 10.2.0 sürümü kullanılıyor. En önemlisi, Largest Contentful Paint kontrolü, simüle edilmiş ve DevTools throttling için aşama hesaplamalarını içeren bir tablo alır. Değişikliklerin tam listesini de inceleyin.

LCP aşaması tablosu.

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.

İçerik komut dosyalarını varsayılan olarak yoksayma

Ayarlar'a dokunun. Ayarlar > İçerikleri Yoksayma Listesi > Onay kutusu. Uzantılar tarafından yerleştirilen içerik komut dosyaları artık varsayılan olarak etkindir.

Bu ayar etkinleştirildiğinde:

  • Hata ayıklayıcı bu tür komut dosyalarını yoksayar ve bunlardan kaynaklanan istisna hatalarında durmaz.
  • Kaynaklar > Çağrı Yığını bölmesi, yoksayılan kareleri atlar. Atlama özelliğini burada devre dışı bırakmak için Onay kutusu. Yoksayılanlar listesindeki kareleri göster'i işaretleyin.
  • Konsol, yığın izlemelerinde yoksayılan çerçeveleri daraltır. Genişletmek için N tane daha kare göster'i, tekrar daraltmak için Daha az göster'i tıklayın.

Uzantılar tarafından yerleştirilen içerik komut dosyaları varsayılan olarak etkindir. Ayarlar'ı ve ardından Yoksayma listesi'ni ziyaret ederek bulabilirsiniz.

Ayrıca, İçerikleri Yoksay Listesi'ndeki onay kutuları daha net bir metinle güncellendi.

Chromium sorunları: 1440958, 1364501.

Ağ > Yanıtları varsayılan olarak güzel yazdırma

Ağ > Yanıt bölmesi artık Kaynaklar paneline benzer şekilde varsayılan olarak sıkıştırılmış yanıt gövdelerini güzel bir şekilde yazdırır.

Ağ sekmesinin Yanıt penceresinde güzel yazdırma özelliği etkinleştirildi.

Ayrıca, SVG dosyalarında söz dizimi vurgulama özelliği de bulunur.

SVG söz dizimi vurgulama.

Chromium sorunları: 1382752, 1385374.

Diğer öne çıkan özellikler

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

  • Ayarlar'a dokunun. Ayarlar > Cihazlar: Temsilci dizesi listesine Pixel 6'da Android için Facebook v407 eklendi.
  • Ağ: Ağ günlüğünü temizle kısayolu (1444991) eklendi:
    • macOS: Command + K
    • Windows/Linux: Denetimli + L
  • Kaydedici > Kayıt N > Performans analizleri paneli açılır menüsü seçeneği kaldırıldı (1414773).
  • Yüklenememiş stil sayfaları artık gezgin ağacında gizlenir (1386059).
  • Performans: Genişletilebilir Etkileşim sayısı kanalının yanlış gösterilmesi düzeltildi (1432510).
  • Öğeler: Yüklenememiş stil sayfalarının altı dalgalı çizgiyle çizilir (1440626).
  • İlgili dil için eklenti olmadığında Hata Ayıklama Aracı, WebAssembly'de otomatik olarak adım atmaz (1443342).
  • İmleci bir kelimede bir hareket ettiren kısayol, Kaynaklar > Düzenleyici bölümündeki CSS dosyaları için geri yüklenir (1241848):
    • macOS: Alt + Ok
    • Windows/Linux: Ctrl + Ok

Ö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.