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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

Kayıtlı özel mülklerinizi incelemek için Öğeler > Stiller bölümünde, fareyle mülk adının üzerine gelerek açıklamalarını bir ipucu olarak görebilirsiniz. Kayıtlı mülkü, açılıp kapanabilir @property bölümünde görüntülemek için ipucudaki bağlantıyı tıklayın.

Chromium sorunları: 1471102, 1471103, 1471105.

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

Önceki sürümde yapılan iyileştirmelerin devamı olarak yerel geçersiz kılmalar artık aşağıdakileri yapmaktadır:

  • Kaynaklar > Sayfa bölümünde, kaynak eşlemesi yapılmış 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.

    Sizi kaynak eşlenmiş dosya yerine orijinal koda yönlendiren iletişim kutusu.

  • 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. Yedekleme var sütununu görmek için tablo başlığını sağ tıklayın ve seçin.

    "Geçersiz kılmaları var" sütununda "has-overrides:yes" değeri filtrelenir.

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

    "Tüm geçersiz kılma işlemlerini sil"in "Sil" ile değiştirilmesinden önce ve sonra.

Önceki Tüm geçersiz kılmaları sil seçeneği, yalnızca geçerli oturumda etkin olan ve Kaydedildi. 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ıkladığınız klasörü tüm içeriğiyle birlikte siler.

Önceki seçeneği geri getirmek için Onay kutusu. Ayarlar > Deneysel bölümünde Ayarlar'a dokunun. "Tüm geçersiz kılma işlemlerini geçici olarak sil " seçeneğini etkinleştirin.

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

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 sıkıştırılmış dosyalarda arama yaparken faydalıdır. Bir arama sonucunu tıkladığınızda dosya düzenleyicide açılır ve eşleşme artık yalnızca dikey olarak değil, yatay olarak da kaydırılarak görüntülenir.

Arama yapmadan önce ve sonra, satır başına tüm eşleşmeler gösterilir.

Ayrıca, Arama özelliğinin hızı da artırıldı. Sonraki videoda, önce (sol) ve sonra (sağ) karşılaştırmasını 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 basit:

  • Tutarlı adlandırma. En önemlisi, Kaynaklar > Dosya sistemi bölmesi Çalışma alanı olarak yeniden adlandırıldı. Bu bölmede yer alan çeşitli kullanıcı arayüzü metinleri artık daha net ve gereksiz ifadelerden arındırılmış.
  • İyileştirilmiş kurulum. Klasörleri sürükleyip bırakmayla ilgili daha iyi ipuçları görebilir veya bir klasör seçmek için bağlantıyı tıklayabilirsiniz.

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 kurulumu ve iş akışını çalışırken görün:

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

Kaynaklar'daki panelleri yeniden sıralama

Artık diğer panelleri, sekmeleri ve bölmeleri yeniden sıraladığınız gibi Kaynaklar panelinin sol tarafındaki bölmeleri 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'u içeren importmap ve speculationrules komut dosyası türlerinin söz dizimini vurgulayın.

Spekülasyon kuralları komut dosyası türünün güzel yazdırma ve söz dizimi vurgulama özelliğinden önce ve sonra.

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

Chromium sorunu: 1473875.

prefers-reduced-transparency medya özelliğini taklit etme

prefers-reduced-transparency medya özelliği Chrome 118'de artık destekleniyor. Bu özellik, geliştiricilerin web içeriğini işletim sisteminde şeffaflığı azaltmak için kullanıcı tarafından seçilen tercihe (ör. macOS'teki Şeffaflığı azalt ayarı) göre uyarlamasına olanak tanır.

Bu medya özelliğini taklit etmek için Oluşturma sekmesini açıp aşağı kaydırın.

Chromium sorunu: 1424879.

Lighthouse 11

Lighthouse panelinde artık Lighthouse 11 kullanılıyor. Bu sürümün en önemli özelliği, eski gezinme menüsünü kaldırması, yeni erişilebilirlik denetimleri eklemesi ve erişilebilirlik kategorisinin puanlanmasını değiştirmesidir.

Değişikliklerin tam listesini de inceleyin. 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.

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ümler arasında gezinmek için yukarı ve aşağı okları kullanın.
  • Hafıza: Sol kenar çubuğunda, Sekme tuşuyla 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 birkaç sorun düzeltildi.

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

Çeşitli öne çıkan anlar

Bu sürümdeki dikkate değer düzeltme 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 gezinmelerde çerez sorunlarını korur (1466601).
  • Çeşitli Uygulama > Ön yükleme iyileştirmeleri, özellikle de sıralanabilir tablolar ve düzeltilmiş kural grubu ayrıntıları (1410709).
  • Protokol İzleyici'deki komut düzenleyicide çeşitli iyileştirmeler yapıldı. Bunlar arasında yanlış girişle ilgili uyarılar, gönderilen komutun düzenlenmesi, önceden tanımlanmış anahtarları olmayan nesne parametreleri için düzenleyici, referanslarla tanımlanmayan enum'lar için destek, tür referansı olmayan nesneler, alt dize eşleşmelerine göre komutları filtreleme ve daha fazlası yer alıyor (1448050).
  • Performans alev grafiğinde, pasta grafiğindeki toplam kutusu (1470147) etrafına bir kenar çizgisi eklenir.
  • Kaynaklar, CSS'de kısa çizgileri artık kelime karakteri olarak işlemiyor (1471354).
  • Otomatik tamamlama artık CSS'ye uygun anahtar kelimeleri her zaman sonunda sıralıyor.
  • Normal ifade filtreleri artık boşlukları destekliyor (1346936).
  • Öğeler medya sorgusu özellik algılamasını düzeltti (1472693).

Önizleme kanallarını indirme

Chrome Canary, Yeni geliştirilenler veya Beta'yı varsayılan geliştirme tarayıcınız olarak kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.

Chrome Geliştirici Araçları ekibiyle iletişime geçme

Yeni özellikleri, güncellemeleri veya Geliştirici Araçları ile ilgili diğer konuları görüşmek için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.