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 kılavuz için yeni bir subgrid rozeti eklendi. Bu özellik şu anda Chrome Canary'de deneme aşamasındadır.

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 sayısını görüntü alanındaki öğenin üzerinde gösteren bir yer paylaşımını açar/kapatır.

Öğeler panelindeki tüm rozetlerin listesi için Rozet referansı bölümüne bakın.

Chromium sorunu: 1442536.

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

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

Seçicinin belirginlik ağırlığını içeren bir ipucu.

Chromium sorunu: 1204932.

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

Öğeler > Stiller bölümünde, ipucundaki değerini görmek için fareyle özel bir CSS mülkü adının üzerine gelin.

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

Geliştirici Araçları ekibi, bu iyileştirmeyi hayata geçirdikleri için 渝 ve Suyan adlı kullanıcılara teşekkür etmek istiyor.

Chromium sorunu: 1380779.

Kaynak iyileştirmeleri

CSS söz dizimi vurgulama

Kaynaklar paneli, SASS, SCSS ve DAHA AZ 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 bölümündekilere benzerdir; örneğin, Renk Seçici ve Yumuşak Geçiş Düzenleyici.

Kaynaklar bölümünde geliştirilmiş CSS söz dizimi vurgulama ve satır içi düzenleyici desteği.

Chromium sorunları: 1302261, 1392085.

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

Artık bir kısayolla koşullu kesme noktalarını daha hızlı ayarlayabilirsiniz. Ayrılma 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 satır numarası ve ayrılma noktası iletişim kutusu.

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 gerçekleştirdiği görülen sitelerin durumunu tanımlamanıza ve silmenize olanak tanır. Uygulama > Arka Plan Hizmetleri bölmesinde, çözümleri izlemeyi manuel olarak zorunlu kılmanıza olanak tanıyan ve durumu silinen siteleri listeleyen yeni bir Hemen Çıkma İzleme Çözümleri sekmesi eklenmiştir.

Ş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 etkinleştirin.
chrome://flags sayfasında, Hemen Çıkma İzleme Çözümleri denemesini Silme Özelliğiyle Etkinleştirildi olarak ayarlayın.
Bu demo sayfasını inceleyin, Uygulama > Arka Plan Hizmetleri > Hemen Çıkma Durumunu İzleme Çözümleri'ni açın, sayfadaki geri dönme bağlantısını tıklayın, Chrome'un geri dönmeyi kaydetmesini bekleyin (10 saniye) ve durumu hemen silmek için Çalıştır'ı tıklayın.

Hemen Çıkma Durumunu İzleme Çözümleri, bir 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ırmaktadır. En önemlisi, Largest Contentful Paint kontrolünde, simüle edilen ve Geliştirici Araçları kısıtları için faz hesaplamaları içeren bir tablo elde edilir. Ayrıca değişikliklerin tam listesine de bakabilirsiniz.

LCP aşama 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 yoksay

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

Bu ayar etkinleştirildiğinde:

Hata Ayıklayıcı, bu tür komut dosyalarını yok sayar ve bunların oluşturduğu istisnalarla 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 izlemelerde yok sayılan kareleri 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. Bunu Ayarlar'ı, ardından Yoksayılanlar listesini ziyaret ederek bulabilirsiniz.

Ayrıca, Yoksayma Listesi'ndeki onay kutuları daha anlaşılır metinler kazandı.

Chromium sorunları: 1440958, 1364501.

Ağ > Yanıt varsayılan olarak düzgün şekilde yazdırılır

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

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

Ek olarak, SVG dosyalarında söz dizimi vurgulama özelliği de vardır.

SVG söz dizimi vurgulama.

Chromium sorunları: 1382752, 1385374.

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler ve iyileştirmeler şunlardır:

Ayarlar > Cihazlar: Aracı dizeleri listesine Pixel 6'da 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 (1414773) kaldırıldı.
Yüklenmeyen stil sayfaları artık kılavuz ağacında (1386059) gizlenir.
Performans: Genişletilebilir Etkileşimler kanalının (1432510) yanlış görüntülenmesi düzeltildi.
Öğeler: Yüklenmeyen stil sayfalarının altı artık dalgalı çizgilerle gösteriliyor (1440626).
İlgili dil (1443342) için bir eklenti olmadığında Hata Ayıklayıcı, WebAssembly aracına otomatik olarak adım atmaz.
CSS dosyaları için imleci her defasında bir kelime hareket ettiren kısayol Kaynaklar > Düzenleyici'deki (1241848) CSS dosyaları için 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, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

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

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.