Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Sofia Emelianova

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

Alt ızgara olan iç içe yerleştirilmiş bir ızgarayı incelemek ve hata ayıklamak için rozeti tıklayın. Sütunları, satırları ve bunların numaralarını görüntü alanındaki öğenin üstünde gösteren bir yer paylaşımını açar/kapatır.

Öğeler panelindeki tüm rozetlerin listesi için Rozetler referansına bakın.

Chromium sorunu: 1442536.

İpuçlarında seçici belirliliği

Öğeler > Stiller bölümünde, bir seçici adının üzerine gelerek ipucunda belirlilik ağırlığını görebilirsiniz.

Bir seçicinin belirginlik ağırlığını içeren ipucu.

Chromium sorunu: 1204932.

İpuçlarındaki özel CSS özelliklerinin değerleri

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

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

Geliştirici Araçları ekibi, bu iyileştirmeyi elde ettikleri için 丝 ve Suyan'a minnettarlığını ifade etmek istiyor.

Chromium sorunu: 1380779.

Kaynaklarla ilgili iyileştirmeler

CSS söz dizimi vurgulama

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

Söz dizimi vurgulama.
Satır içi düzenleyiciler desteği. Bu düzenleyiciler Öğeler > Stiller'deki düzenleyicilere benzer. Örneğin, Renk Seçici ve Yumuşak Geçiş Düzenleyici.

Kaynaklar'da geliştirilmiş CSS söz dizimi vurgulama ve satır içi düzenleyiciler desteği.

Chromium sorunları: 1302261, 1392085.

Koşullu kesme noktalarını ayarlama kısayolu

Artık kısayol kullanarak koşullu ayrılma 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ı tutarken Kaynaklar > Düzenleyici'nin sol sütunundaki satır numarasını tıklayın.

Sol sütundaki ve ayrılma noktası iletişim kutusundaki satır numarası.

Chromium sorunu: 1405767.

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

Chrome'daki Hemen Çıkma Durumunu İzleme Çözümleri denemesi, hemen çıkma izleme tekniğini kullanarak siteler arası izleme yapıyor gibi görünen sitelerin durumunu belirlemenize ve silmenize olanak tanır. Uygulama > Arka Plan Hizmetleri bölmesinde, çözümleri manuel olarak izlemeye olanak tanıyan ve durumları silinen siteleri listeleyen yeni bir Hemen Çıkma Durumunu İzleme Çözümleri sekmesi alır.

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

Chrome'da üçüncü taraf çerezlerini engelleyin. > Ayarlar > Gizlilik ve güvenlik > Çerezler ve diğer site verileri > Üçüncü taraf çerezlerini engelle bölümüne gidip bu ayarı etkinleştirin.
chrome://flags bölümünde, Hemen Çıkma Durumunu İzleme Çözümleri denemesini Silme Özelliğiyle Etkin olarak ayarlayın.
Bu demo sayfasını inceleyin, Uygulama > Arka Plan Hizmetleri > Hemen Çıkma Durumunu İzleme Çözümleri'ni açın, sayfadaki bir geri dönen bağlantıyı tıklayın, Chrome'un geri dönen iletiyi kaydetmesi için (10 saniye) bekleyin ve durumu hemen silmek için Çalıştırmaya zorla'yı tıklayın.

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

Sorunlar sekmesi, yaklaşan durum silme işlemi hakkında da 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üne simüle edilmiş aşama hesaplamaları ve Geliştirici Araçları kısıtlaması için aşama hesaplamaları içeren bir tablo verilir. Ayrıca değişikliklerin tam listesini de inceleyebilirsiniz.

LCP aşaması tablosu.

Geliştirici Araçları'nda Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme konusuna bakın.

Chromium sorunu: 772558.

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

Ayarlar > Yoksayma Listesi > Uzantılar tarafından yerleştirilen içerik komut dosyaları artık varsayılan olarak etkin.

Bu ayar etkinken:

Hata Ayıklayıcı bu tür komut dosyalarını yok sayar ve bunlardan kaynaklanan istisnalarda durmaz.
Kaynaklar > Çağrı Yığını bölmesi, yoksayılan kareleri atlar. Atlamayı buradan devre dışı bırakmak için Yoksayılanlar listesindeki çerçeveleri göster seçeneğini işaretleyin.
Konsol, yığın izlemelerdeki 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.

Uzantılar tarafından yerleştirilen içerik komut dosyaları varsayılan olarak etkinleştirilir. Ayarlar'ı, ardından Yoksayılanlar listesi'ni ziyaret ederek bunu bulabilirsiniz.

Ayrıca, Yoksayma Listesi'ndeki onay kutuları daha net metinler aldı.

Chromium sorunları: 1440958, 1364501.

Ağ > Yanıt (varsayılan olarak okunaklı)

Ağ > Yanıt bölmesinde Kaynaklar paneline benzer şekilde artık varsayılan olarak küçültülmüş yanıt gövdeleri okunaklı hale getirilmiştir.

Ağ sekmesinin Yanıt penceresinde okunaklı yazdırma etkinleştirildi.

Ayrıca, SVG dosyalarında söz dizimi vurgulama özelliği kullanılır.

SVG söz dizimi vurgulama.

Chromium sorunları: 1382752, 1385374.

Çeşitli öne çıkan anlar

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

Ayarlar > Cihazlar: Aracı dizeleri listesine Pixel 6'daki Android v407 için Facebook eklendi.
Ağ: Ağ günlüğünü temizle kısayolu eklendi (1444991):
- MacOS: Command + K
- Windows/Linux: Ctrl + L
Kaydedici > Kayıt N > Performans analizleri paneli açılır seçeneği kaldırıldı (1414773).
Yüklenmeyen stil sayfaları artık gezinme ağacında gizleniyor (1386059).
Performans: Genişletilebilir Etkileşimler kanalının (1432510) hatalı görüntülenmesi düzeltildi.
Öğeler: Yüklenemeyen stil sayfaları artık dalgalı satırlarla (1440626) altı çizilir.
Hata Ayıklayıcı, ilgili dil (1443342) için bir eklenti olmadığında WebAssembly'ye otomatik olarak başlamaz.
İmleci bir kelime hareket ettiren kısayol, CSS dosyaları için Kaynaklar > Düzenleyici'de (1241848) geri yüklenir:
- 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ı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
Geliştirici Araçları'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.