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

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

Öğeler panelindeki tüm rozetlerin listesi için Rozetlerle ilgili 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.

Chromium sorunu: 1204932.

İpuç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.

DevTools ekibi, bu iyileştirmeyi kullanıma sundukları için 一丝 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üzenleyiciler desteklenir. Bu düzenleyiciler, Öğeler > Stiller'deki düzenleyicilere benzer. Örneğin, Renk Seçici ve Kolaylık Düzenleyicisi.

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.

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 bölmesine, izleme azaltma işlemlerini manuel olarak zorlamanıza ve durumları silinen siteleri listelemenize olanak tanıyan yeni bir Hemen Çıkma İzlemeyi Azaltma sekmesi eklenir.

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

1. Chrome'da üçüncü taraf çerezlerini engelleme > Ayarlar > Gizlilik ve güvenlik > Çerezler ve diğer site verileri > Üçü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.

Ayrıca, Sorunlar sekmesinde yaklaşan durum silme işlemi hakkında uyarı gösterilir.

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.

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 > Yoksayma Listesi > 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 hatalarda durmaz.
• Kaynaklar > Çağrı Yığını bölmesinde yoksayılan çerçeveler atlanır. Burada atlamayı devre dışı bırakmak için 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.

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.

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

Chromium sorunları: 1382752, 1385374.

Diğer önemli noktalar

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

• 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 parçasının 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 hata ayıklayıcı, 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.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools'a tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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