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

Öğeler > Stiller bölümünde özel özellikler için yeni bölüm

Öğeler paneli artık @property CSS at-rule'u destekliyor. CSS özel özelliklerini açıkça tanımlamanıza ve herhangi bir JavaScript çalıştırmadan bir stil sayfasına kaydetmenize olanak tanır.

Kayıtlı özel özelliklerinizi incelemek için Öğeler > Stiller'de özellik adının üzerine gelin ve açıklayıcılarını bir ipucu penceresinde görün. Kaydedilen mülkü daraltılabilir @property bölümünde görüntülemek için ipucundaki bağlantıyı tıklayın.

Chromium sorunları: 1471102, 1471103, 1471105.

Yerel geçersiz kılma ile ilgili daha fazla iyileştirme

Önceki sürümdeki iyileştirmelerden sonra yerel geçersiz kılmalar artık şunları yapıyor:

• Kaynaklar > Sayfa'da, kaynak eşlemeli bir dosyayı sağ tıklayıp İçeriği geçersiz kıl'ı seçtiğinizde DevTools, sizi orijinal kaynağa yönlendiren bir iletişim kutusu gösterir. Kaynak eşlemesine sahip dosyaların içerikleri geçersiz kılınamaz.

  

• Ağ paneline yeni bir Geçersiz kılmalar var sütunu ve buna karşılık gelen bir has-overrides:[content|headers|yes|no] filtresi eklendi. Geçersiz kılmalar var sütununu görmek için tablo başlığını sağ tıklayın ve sütunu seçin.

  

• Kaynaklar > Geçersiz kılmalar bölümünde, Tüm geçersiz kılmaları sil menü seçeneğinin yerini, tam olarak aynı işlevi gören Sil seçeneği aldı.

  

Önceki Tüm geçersiz kılmaları sil seçeneği, yalnızca geçerli oturumda etkin olan ve mor nokta simgesiyle işaretlenen geçersiz kılmaları sildiği için kafa karıştırıcıydı.

Yeni Sil seçeneği, önce bir uyarı mesajı gösterip onay ister, ardından tıkladığınız klasörü tüm içeriğiyle birlikte siler.

Önceki seçeneği geri getirmek için Ayarlar > Denemeler'de "Tüm geçersiz kılmaları geçici olarak sil" seçeneğini etkinleştir'i işaretleyin.

Chromium sorunları: 1472952, 1416338, 1472580, 1473681 1475668.

Gelişmiş arama

Arama sonuçlarında artık bir kod satırında bulunan tüm eşleşmeler için bir giriş gösteriliyor. Daha önce, kod satırı başına yalnızca ilk eşleşme gösteriliyordu. Bu yeni davranış, özellikle küçültülmüş dosyalarda arama yaparken kullanışlıdır. Bir arama sonucunu tıkladığınızda dosya düzenleyicide açılır ve artık eşleşme yalnızca dikey olarak değil, yatay olarak da görünür hale gelir.

Ayrıca Arama özelliği daha hızlı hale getirildi. Öncesi (sol) ve sonrası (sağ) karşılaştırmasını bir sonraki videoda görebilirsiniz.

Son olarak, Arama artık listelemeyi yoksayma özelliğini destekliyor ve yoksayılan dosyalardaki sonuçları göstermiyor.

Chromium sorunları: 1468875, 1472019.

İyileştirilmiş Kaynaklar paneli

Kaynaklar panelinde basitleştirilmiş çalışma alanı

Kaynaklar panelindeki çalışma alanı özelliği artık daha kolay kullanılabiliyor:

• Tutarlı adlandırma. En önemlisi, Kaynaklar > Dosya sistemi bölmesi Çalışma alanı olarak yeniden adlandırıldı. Bu bölmedeki çeşitli kullanıcı arayüzü metinleri artık daha net ve gereksiz tekrarlardan arındırılmış durumda.
• Gelişmiş kurulum. Klasörleri sürükleyip bırakmak için daha iyi ipuçları görün veya bir bağlantıyı tıklayarak klasör seçin.

Kaynaklar > Çalışma alanı, Geliştirici Araçları'nda yaptığınız değişiklikleri doğrudan kaynak dosyalarınızla senkronize etmenizi sağlar.

Yeni kurulum ve iş akışını uygulamalı olarak inceleyin:

Chromium sorunları: 1473771, 1473880, 1473963, 1474686, 1474687.

Kaynaklar'da paneleri yeniden sıralama

Artık Kaynaklar panelinin sol tarafındaki bölmeleri, diğer panelleri, sekmeleri ve bölmeleri yeniden sıralayabileceğiniz gibi sürükleyip bırakarak yeniden sıralayabilirsiniz.

Chromium sorunları: 1473758.

Daha fazla komut dosyası türü için söz dizimi vurgulama ve güzel yazdırma

Kaynaklar paneli artık şunları yapabilir:

• Aşağıdaki komut dosyası türlerinde satır içi JavaScript'i okunaklı hale getirin: module, importmap, speculationrules.
• Her ikisi de JSON içeren importmap ve speculationrules komut dosyası türlerinin söz dizimini vurgulayın.

Spekülasyon kuralları hakkında daha fazla bilgi için Anında sayfa gezinme için Chrome'da sayfaları önceden oluşturma başlıklı makaleyi inceleyin.

Chromium sorunu: 1473875.

prefers-reduced-transparency medya özelliğini emüle etme

Chrome 118 artık prefers-reduced-transparency medya özelliğini destekliyor. Bu özellik, geliştiricilerin web içeriğini kullanıcının seçtiği tercihe göre uyarlayarak işletim sisteminde şeffaflığı azaltmasına olanak tanır. Örneğin, macOS'teki Şeffaflığı azalt ayarı bu kapsamdadır.

Bu medya özelliğini taklit etmek için Rendering (Oluşturma) sekmesini açın ve aşağı kaydırarak bu özelliğe gidin.

Chromium sorunu: 1424879.

Lighthouse 11

Lighthouse paneli artık Lighthouse 11'i çalıştırıyor. Bu sürümde en dikkat çekici değişiklikler arasında eski gezinme özelliğinin kaldırılması, yeni erişilebilirlik denetimlerinin eklenmesi ve erişilebilirlik kategorisinin puanlanma şeklinin değiştirilmesi yer alıyor.

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.

Erişilebilirlikle ilgili iyileştirmeler

DevTools artık daha fazla gezinme tuş vuruşunu destekliyor:

• CSS'ye Genel Bakış: Sol kenar çubuğundaki bölümler arasında gezinmek için yukarı ve aşağı okları kullanın.
• Bellek: Sol kenar çubuğunda, Sekme tuşunu kullanarak anlık görüntülerin yanındaki Kaydet düğmesine odaklanın ve klasörü seçmek için Enter tuşuna basın.

Ayrıca, ekran okuyucu duyurularıyla ilgili çeşitli sorunlar düzeltildi.

Chromium sorunları: 1470401, 1471301, 1474108, 1468631.

Diğer önemli noktalar

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

• Ağ: Popüler kaynak türleri için yeni simgeler: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
• Birçok kullanıcı arayüzü öğesinde, özellikle Öğeler ve Performans panellerinde (1456690, 1472243) Material 3 renkleriyle ilgili renk güncellemeleri yapıldı.
• Sorunlar artık gezinmelerdeki çerez sorunlarını koruyor (1466601).
• Çeşitli Uygulama > Önceden yükleme iyileştirmeleri, özellikle sıralanabilir ızgaralar ve revize edilmiş kural grubu ayrıntıları (1410709).
• Protokol monitöründeki komut düzenleyicide çeşitli iyileştirmeler yapıldı. Bunlar arasında en önemlileri; yanlış girişle ilgili uyarılar, gönderilen bir komutu düzenleme, önceden tanımlanmış anahtarları olmayan nesne parametreleri için düzenleyici, referanslarla tanımlanmamış numaralandırmalar için destek, tür referansı olmayan nesneler, komutları alt dize eşleşmelerine göre filtreleme ve daha fazlası (1448050).
• Performans alev grafiğinin pasta grafiğindeki toplam kutusunun etrafına kenarlık ekleniyor (1470147).
• Kaynaklar artık CSS'de tireleri kelime karakteri olarak değerlendirmiyor (1471354).
• Otomatik tamamlama özelliği artık CSS ile ilgili anahtar kelimeleri her zaman sona göre sıralıyor.
• Normal ifade filtreleri artık boşlukları destekliyor (1346936).
• Öğeler, sabit medya sorgusu özellik algılaması (1472693).

Ö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 hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler 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.