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

Sofia Emelianova
Sofia Emelianova
GitHub

Öğeler > Stiller bölümünde özel mülkler 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ştirmelere devam eden yerel geçersiz kılmalar artık aşağıdakileri yapıyor:

  • Kaynaklar > Sayfa bölümünde, kaynak haritalı 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şlemesi yapılan 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 Yedekleme var sütunu ve ilgili bir has-overrides:[content|headers|yes|no] filtresi eklenir. Yedekleme var sütununu görmek için tablo başlığını sağ tıklayın ve seçin.

    "Üst geçersiz kılma var" sütununda "has-overrides:yes" değerine göre filtreleme.

  • Kaynaklar > Üst Yazımlar bölümündeki Tüm üst yazıları sil menü seçeneği, kesin davranışa sahip Sil seçeneğiyle değiştirildi.

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

Önceki Tüm geçersiz kılma işlemlerini sil seçeneği, yalnızca geçerli oturumda etkin olan ve Kaydedildi. mor nokta simgesiyle işaretlenen geçersiz kılma işlemlerini 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'da hız artışı sağlandı. 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 dosyalardan elde edilen 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ış.
  • Daha iyi 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 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

Chrome 118 artık prefers-reduced-transparency medya özelliğini destekliyor. 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

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

Diğer öne çıkan özellikler

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).
  • Renk, özellikle Öğeler ve Performans panellerinde (1456690, 1472243) birçok kullanıcı arayüzü öğesinde 3. malzeme renklerine güncellendi.
  • 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 yapılan çeşitli iyileştirmeler (ör. 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ı) (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 her zaman CSS'ye göre anahtar kelimeleri sona doğru sıralar.
  • Normal ifade filtreleri artık boşlukları destekliyor (1346936).
  • Öğeler'de medya sorgusu özellik algılama sorunu düzeltildi (1472693).

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak 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.