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

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

Öğeler paneli artık @kuralda CSS'yi desteklemektedir. CSS özel özelliklerini açık bir şekilde tanımlamanıza ve bunları herhangi bir JavaScript çalıştırmadan bir stil sayfasına kaydetmenize olanak tanır.

Kayıtlı özel özelliklerinizi incelemek için Öğeler > Stiller'in üzerine gelin, mülk adının üzerine gelin ve mülk tanımlayıcılarını bir ipucunda inceleyin. İpucundaki kayıtlı mülkü daraltılabilir @property bölümünde görüntülemek için bağlantıyı tıklayın.

Chromium sorunları: 1471102, 1471103, 1471105.

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

Önceki sürümle sunulan iyileştirme akışına devam ederken yerel geçersiz kılmalar artık şunları yapıyor:

• Kaynaklar'da > Sayfa: Kaynakla eşlenmiş bir dosyayı sağ tıklayıp İçeriği geçersiz kıl'ı seçtiğinizde Geliştirici Araçları, sizi orijinal kaynağa yönlendiren bir iletişim kutusu gösterir. Kaynakla eşlenen dosyaların içeriği 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 uygulanır. Geçersiz kılmalar içeriyor sütununu görmek için tablo başlığını sağ tıklayın ve seçin.

  

• Kaynaklar'da > Geçersiz kılmalar, Tüm geçersiz kılmaları sil menü seçeneği, hassas davranışa sahip Sil seçeneği ile değiştirilmiştir.

  

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

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

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

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

Gelişmiş arama

Arama sonuçları artık bir kod satırında bulunan tüm eşleşmeler için bir giriş gösteriyor. Daha önce, her kod satırı için 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 eşleşme yalnızca dikey değil, yatay olarak da görünüme kaydırılır.

Ayrıca, Arama özelliğinin hızı da artırıldı. Sonraki videoda öncesi (sol) ve sonrası (sağ) karşılaştırmasını inceleyin.

Son olarak, Arama artık yoksay listesini desteklemektedir ve yoksayılan dosyalardaki sonuçları göstermez.

Chromium sorunları: 1468875, 1472019.

İyileştirilmiş Kaynaklar paneli

Kaynaklar panelinde modern çalışma alanı

Kaynaklar panelindeki çalışma alanı özelliği artık daha basitleştirilmiştir:

• Tutarlı adlandırma. En önemlisi de 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 nettir ve gereksizdir.
• İyileştirilmiş kurulum. Klasörleri sürükleyip bırakmak için daha iyi işaretler görün veya klasör seçmek üzere bir bağlantıyı tıklayın.

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

Yeni kurulumu ve iş akışını uygulamalı olarak görün:

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

Kaynaklar'daki bölmeleri yeniden sıralama

Artık Kaynaklar panelinin sol tarafındaki bölmeleri sürükleyip bırakarak diğer panelleri, sekmeleri ve bölmeleri 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:

• Satır içi JavaScript'i şu komut dosyası türlerinde biçimde yazın: module, importmap, speculationrules.
• Her ikisi de JSON'u içeren importmap ve speculationrules komut dosyası türlerinin söz dizimini vurgulayın.

Tahmin kuralları hakkında daha fazla bilgi edinmek üzere Anında sayfa gezinmeleri için Chrome'da sayfaları önceden işleme konusuna bakın.

Chromium sorunu: 1473875.

İndirgenmiş şeffaflık medya özelliği emülasyonu

Chrome 118 artık prefers-reduced-transparency medya özelliğini destekliyor. Bu özellik sayesinde geliştiriciler, işletim sisteminde daha az şeffaflık sağlamak için web içeriğini kullanıcının seçtiği tercihe (ör. macOS'teki Saydamlığı azalt ayarı) uyarlayabilir.

Bu medya özelliğini emüle etmek için Oluşturma sekmesini açın ve aşağı kaydırın.

Chromium sorunu: 1424879.

Deniz Feneri 11

Lighthouse paneli artık Lighthouse 11'i çalıştırıyor. En önemlisi, bu sürümün eski gezinme seçenekleri kaldırılır, yeni erişilebilirlik denetimleri eklenir ve erişilebilirlik kategorisinin puanlanma şekli değiştirilir.

Ayrıca değişikliklerin tam listesini de inceleyebilirsiniz. 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.

Erişilebilirlikle ilgili iyileştirmeler

Geliştirici Araçları artık daha fazla gezinme tuşunu destekliyor:

• CSS'ye Genel Bakış: Sol kenar çubuğundaki bölümlerde gezinmek için yukarı ve aşağı okları kullanın.
• Bellek: Sol kenar çubuğunda, Sekme ile 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 duyuru ile ilgili çeşitli sorunlar düzeltildi.

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

Çeşitli öne çıkan anlar

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).
• Renkler, çoğu kullanıcı arayüzü öğesinde, özellikle de Öğeler ve Performans panellerinde (1456690, 1472243) malzeme 3 renklerine güncellenir.
• Sorunlar artık gezinmeler genelinde (1466601) çerez sorunlarını korumaktadır.
• Çeşitli Uygulama > Önceden yükleme iyileştirmeleri, en belirgin şekilde sıralanabilir ızgaralar ve düzeltilmiş kural grubu ayrıntıları (1410709).
• Protokol monitörü'ndeki komut düzenleyicisiyle ilgili çeşitli iyileştirmeler; en önemlisi yanlış girişle ilgili uyarılar, gönderilen bir komutu düzenleme, önceden tanımlanmış anahtarları olmayan nesne parametreleri düzenleyici, referanslarla tanımlanmamış enum'lar için destek, tür referansı olmayan nesneler, alt dize eşleşmelerine göre filtreleme komutları ve daha fazlası (1448050).
• Performans grafiği, pasta grafiğindeki toplam kutusunun etrafında bir kenarlık alır (1470147).
• Kaynaklar, artık CSS'de (1471354) tireleri kelime karakteri olarak değerlendirmemektedir.
• Otomatik tamamlama artık CSS'ye uygun anahtar kelimeleri her zaman sonunda sıralıyor.
• RegEx filtreleri artık boşlukları (1346936) destekliyor.
• Öğeler medya sorgusu özellik algılamasını düzeltti (1472693).

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

Geliştirici Araçları'ndaki yenilikler

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