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'de deneysel olarak sunulmaktadır.

Alt ızgara olduğu için parçaların sayısını ve boyutunu üst öğesinden devralan yerleştirilmiş bir ızgarayı incelemek ve hatalarını ayıklamak için rozeti tıklayın. Görünüm alanındaki öğenin üzerinde sütunları, satırları ve bunların numaralarını gösteren bir yer paylaşımını açar veya kapatır.

Alt ızgara rozeti ve görüntü alanındaki yer paylaşımı.

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

Chromium sorunu: 1442536.

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

Öğeler > Stiller'de, bir seçici adının üzerine gelerek özellik ağırlığını ipucu olarak görebilirsiniz.

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

Chromium sorunu: 1204932.

Araç ipuçlarındaki özel CSS özelliklerinin değerleri

Öğeler > Stiller'de, özel bir CSS özelliği adının üzerine gelerek değerini ipucu olarak görebilirsiniz.

Özel CSS özelliğinin değerini içeren ipucu.

DevTools ekibi, bu iyileştirmeyi kullanıma sunan 一丝 ve Suyan'a teşekkür etmek istiyor.

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üzenleyiciler, Öğeler > Stiller'deki düzenleyicilere benzer. Örneğin, Renk Seçici ve Kolaylık Düzenleyicisi.

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ını daha hızlı ayarlayabilirsiniz. Kesme noktası iletişim kutusunu açmak için Command (MacOS) veya Control (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 Bounce Tracking Mitigations denemesi, geri sıçrama izleme tekniğini kullanarak siteler arası izleme yaptığı görünen sitelerin durumunu belirlemenize ve silmenize olanak tanır. Uygulama > Arka Plan Hizmetleri panelinde, izleme azaltma işlemlerini manuel olarak zorlamanıza ve durumları silinen siteleri listelemenize olanak tanıyan yeni bir Hemen Çıkma İzlemeyi Azaltma sekmesi bulunur.

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

  1. Chrome'da üçüncü taraf çerezlerini engelleme Üç nokta menüsü. > Ayarlar > Güvenlik. Gizlilik ve güvenlik > Çerezler ve diğer site verileri > Radyo düğmesi işaretli. Üçüncü taraf çerezlerini engelle'ye gidin ve bu ayarı etkinleştirin.
  2. chrome://flags bölümünde Sıçramalı İzleme Çözümleri denemesini Silme İşlemiyle Etkinleştirildi olarak ayarlayın.
  3. Bu demo sayfasını inceleyin, Uygulama > Arka Plan Hizmetleri > Hemen Çıkma İzlemeyi Azaltma'yı açın, sayfadaki bir hemen çıkma bağlantısını tıklayın, Chrome'un hemen çıkmayı kaydetmesini bekleyin (10 saniye) ve durumu hemen silmek için Çalışmaya zorla'yı tıklayın.

Hemen Çıkma Durumunu İzleme Çözümleri, durum silme işlemini listeler.

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

Chromium sorunu: 1432303.

Lighthouse 10.2.0

Lighthouse paneli artık Lighthouse 10.2.0'ı çalıştırıyor. En önemlisi, Largest Contentful Paint kontrolü, simüle edilmiş ve DevTools sınırlaması için aşama hesaplamalarının yer aldığı bir tabloya sahip olur. Değişikliklerin tam listesini de inceleyin.

LCP aşaması tablosu.

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.

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

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

Bu ayar etkinleştirildiğinde:

  • Debugger bu tür komut dosyalarını yoksayar ve bunlardan kaynaklanan istisnalarda durmaz.
  • Kaynaklar > Çağrı Yığını bölmesi, yoksayılan çerçeveleri atlar. Yoksayma özelliğini buradan devre dışı bırakmak için Onay kutusu. Yoksayılanlar listesindeki çerçeveleri göster'i işaretleyin.
  • Konsol, yığın izlemelerindeki yoksayılan çerçeveleri daraltır. Genişletmek için N kare daha göster'i, tekrar daraltmak için Daha az göster'i tıklayın.

Varsayılan olarak etkinleştirilen uzantılar tarafından yerleştirilen içerik komut dosyaları. Bu ayarı bulmak için Ayarlar'a, ardından Yoksayma listesi'ne gidin.

Ayrıca, Yoksayma Listesi'ndeki onay kutularında daha net bir metin kullanıldı.

Chromium sorunları: 1440958, 1364501.

Ağ > Varsayılan olarak yanıtı güzel yazdırma

Ağ > Yanıt bölmesi artık Kaynaklar paneline benzer şekilde, küçültülmüş yanıt gövdelerini varsayılan olarak güzel biçimlendiriyor.

Ağ sekmesinin Yanıt penceresinde güzel yazdırma 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 önemli noktalar

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

  • Ayarlar'a dokunun. Ayarlar > Cihazlar: Aracı dizeleri listesine Pixel 6'da Android için Facebook v407 eklendi.
  • Ağ: Ağ günlüğünü temizle kısayolu eklendi (1444991):
    • MacOS: Command + K
    • Windows/Linux: Control + L
  • Kaydedici > N Kaydı > Performans analizleri paneli açılır menü seçeneği kaldırıldı (1414773).
  • Yüklenemeyen stil sayfaları artık gezinme ağacında gizleniyor (1386059).
  • Performans: Genişletilebilir Etkileşimler izinin yanlış gösterilmesi sorunu düzeltildi (1432510).
  • Öğeler: Yüklenemeyen stil sayfalarının altı artık dalgalı çizgilerle çiziliyor (1440626).
  • İlgili dil için eklenti olmadığında Debugger, WebAssembly'de otomatik olarak adım adım ilerlemez (1443342).
  • Kaynaklar > Düzenleyici'deki CSS dosyalarında imleci her seferinde bir kelime hareket ettiren kısayol geri yüklendi (1241848):
    • MacOS: Alt + Ok
    • Windows/Linux: Ctrl + Ok

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