Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Sofia Emelianova

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

Öğeler paneli artık @property CSS at-kural özelliğini destekliyor. CSS özel özelliklerini açık bir şekilde tanımlamanıza ve bunları, herhangi bir JavaScript çalıştırmadan bir stil sayfasında kaydetmenize olanak tanır.

Kayıtlı özel mülklerinizi incelemek için Öğeler > Stiller bölümünde mülk adının üzerine gelin ve ipucunda mülk adlarını inceleyin. İpucundaki bağlantıyı tıklayarak daraltılabilir @property bölümünde kayıtlı mülkü görebilirsiniz.

Chromium sorunları: 1471102, 1471103, 1471105.

Geçersiz kılmalarla ilgili daha fazla yerel iyileştirme

Önceki sürümde yapılan iyileştirmelerin akışına devam ederken, yerel geçersiz kılmalar artık aşağıdakileri yapıyor:

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ı, bunun yerine sizi orijinal kaynağa yönlendiren bir iletişim kutusu gösterir. Kaynak eşlemesi yapılan dosyaların içerikleri geçersiz kılınamaz.
Ağ panelinde yeni bir Geçersiz kılmalar var sütunu ve karşılık gelen 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 > Geçersiz kılmalar bölümünde, Tüm geçersiz kılmaları sil menü seçeneği yerine hassas davranışa sahip Sil seçeneği getirildi.

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

Yeni Sil seçeneği, ilk olarak bir uyarı mesajı görüntüler 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 > Denemeler'de "Tüm geçersiz kılmaları geçici olarak sil"i 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österilir. 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 eşleşme artık yalnızca dikey değil, yatay olarak da görünüme kaydırılır.

Arama işleminden önceki ve sonraki satır başına tüm eşleşmeler gösterilir.

Ayrıca Arama özelliği de hız kazandı. Önceki (sol) ve sonraki (sağ) karşılaştırmasını bir sonraki videoda görebilirsiniz.

Son olarak, Arama özelliği artık yoksayılan girişleri destekler ve yoksayılan dosyalardan gelen sonuçları göstermez.

Chromium sorunları: 1468875, 1472019.

İyileştirilmiş Kaynaklar paneli

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

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

Tutarlı adlandırma. En önemlisi de, Kaynaklar > Dosya sistemi bölmesinin adı Çalışma Alanı olarak değiştirildi. Bu bölmedeki çeşitli kullanıcı arayüzü metinleri artık daha net ve gereksiz.
İyileştirilmiş kurulum. Klasörleri sürükleyip bırakmayla ilgili daha iyi ipuçları görün veya klasör seçmek için bir bağlantıyı tıklayın.

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ı uygulamalı olarak görün:

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

Kaynaklar'daki bölmeleri yeniden sıralama

Artık diğer panelleri, sekmeleri ve bölmeleri yeniden sıralamaya benzer şekilde, 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 özellikleri

Kaynaklar paneli artık şunları yapabilir:

Satır içi JavaScript komutlarını şu komut dosyası türlerinde düzgün bir şekilde yazdırın: module, importmap ve speculationrules.
Her ikisi de JSON değerine sahip importmap ve speculationrules komut dosyası türlerinin söz dizimini vurgulayın.

Kolay yazdırılmadan önce ve sonra, tahmin kuralları komut dosyası türünün söz dizimi vurgulaması.

Spekülasyon kuralları hakkında daha fazla bilgi edinmek istiyorsanız Anında sayfada gezinme için sayfaları Chrome'da önceden oluşturma başlıklı makaleye bakın.

Chromium sorunu: 1473875.

Preferreds-reduced-transparency medya özelliği emülasyonu

Chrome 118 artık prefers-reduced-transparency medya özelliğini destekliyor. Bu özellik, geliştiricilerin OS'de daha az şeffaflık sağlamak için web içeriğini kullanıcının seçtiği tercihe göre uyarlamasına olanak tanır (ör. macOS'teki Saydamlığı azalt ayarı).

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ırmaktadır. En önemlisi, bu sürüm eski gezinmeyi kaldırıp yeni erişilebilirlik denetimleri ekler ve erişilebilirlik kategorisinin puanlanma şeklini değiştirir.

Ayrıca değişikliklerin tam listesine de bakabilirsiniz. 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ş vuruş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 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, bazı ekran okuyucu duyuru sorunları da düzeltilmiştir.

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

Öne çıkan çeşitli unsurlar

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

Ağ: Popüler kaynak türleri için yeni simgeler: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
Renkler, özellikle Öğeler ve Performans panellerinde (1456690, 1472243) olmak üzere birçok kullanıcı arayüzü öğesinde malzeme 3 renginde güncellenir.
Sorunlar bölümü, artık gezinme bölümlerindeki çerez sorunlarını korumaktadır (1466601).
Çeşitli Uygulama > Önceden yükleme iyileştirmeleri, en önemli sıralanabilir kılavuzlar ve düzeltilmiş kural kümesi ayrıntıları (1410709).
Protokol izleme özelliğindeki komut düzenleyicide ç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 için düzenleyici, referanslar tarafından tanımlanmamış numaralandırmalar, tür referansı olmayan nesneler, alt dize eşleşmelerine göre filtreleme komutları ve daha fazlası (1448050).
Performans flame grafiğinde, pasta grafikteki toplam kutusunun etrafında bir kenarlık gösterilir (1470147).
Kaynaklar artık CSS'de kısa çizgileri kelime karakterleri olarak değerlendirmemektedir (1471354).
Otomatik tamamlama artık CSS açısından anahtar kelimeleri her zaman sonda sıralıyor.
RegEx filtreleri artık alanları (1346936) destekliyor.
Öğeler medya sorgusu özellik algılamasını sabitledi (1472693).

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