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'in üzerine gelin, ipucunda spesifiklik ağırlığını görmek için fareyle bir seçici adının üzerine gelin.

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, değerini ipucunda görmek için fareyle özel bir CSS mülkü adının üzerine gelin.

Ö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 (ör. 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'ın sol sütunundaki satır numarasını tıklayın > Düzenleyici.

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 zorlamanıza 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. öğesine gidin ve etkinleştirin > Ayarlar > Gizlilik ve güvenlik > Çerezler ve diğer site verileri > Üçüncü taraf çerezlerini engelle.
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'yı açın > Arka Plan Hizmetleri > Hemen Çıkma Durumunu İzleme Çözümleri'ni tıklayın, sayfadaki bir geri dönen bağlantıyı tıklayın, Chrome'un hemen çıkmayı kaydetmesi için (10 saniye) bekleyin ve durumu hemen silmek için Zorla çalıştır'ı 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ı Grubu 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ı şekilde yazdırılıyor

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

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 kaldırıldı > N Kaydı > Performans analizleri paneli açılır seçeneği (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 (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ı 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ı sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.