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

Jecelyn Yeen

CSS ızgara düzenleyicisi

Çok istenen bir özellik. Yeni CSS Izgara Düzenleyici ile artık CSS Izgara'yı önizleyebilir ve oluşturabilirsiniz.

CSS Grid düzenleyici

Sayfanızdaki bir HTML öğesine display: grid veya display: inline-grid uygulandığında, Stiller bölmesinde öğenin yanında bir simge görünür. CSS ızgara düzenleyicisini açmak veya kapatmak için simgeyi tıklayın. Burada, ekrandaki simgelerle (ör. justify-content: space-around) olası değişiklikleri önizleyebilir ve tek bir tıklamayla ızgara görünümünü oluşturabilirsiniz.

Chromium sorunu: 1203241

Konsolda const yeniden bildirimleri için destek

Console artık mevcut let ve class yeniden bildirimlerine ek olarak const ifadesinin yeniden bildirimini de destekliyor. Yeniden bildirimde bulunamama, konsolu yeni JavaScript koduyla denemeler yapmak için kullanan web geliştiriciler için yaygın bir rahatsızlık kaynağıydı.

Bu sayede geliştiriciler, kodu nasıl çalıştığını görmek veya deneme yapmak için Geliştirici Araçları konsoluna kopyalayıp yapıştırabilir, kodda küçük değişiklikler yapabilir ve sayfayı yenilemeden işlemi tekrarlayabilir. Daha önce, kod bir const bağlamasını yeniden tanımlarsa DevTools söz dizimi hatası veriyordu.

Aşağıdaki örneğe bakın. const yeniden bildirim ayrı REPL komut dosyalarında desteklenir (a değişkenine bakın). Aşağıdaki senaryoların tasarım gereği desteklenmediğini unutmayın:

  • REPL komut dosyalarında const sayfa komut dosyalarının yeniden bildirilmesine izin verilmez.
  • Aynı REPL komut dosyasında const yeniden bildirimine izin verilmez (b değişkenine bakın).

const yeniden bildirimleri

Chromium sorunu: 1076427

Kaynak sırası görüntüleyici

Artık daha iyi bir erişilebilirlik incelemesi için ekrandaki kaynak öğelerin sırasını görüntüleyebilirsiniz.

Kaynak sırası görüntüleyici

Bir HTML belgesindeki içerik sırası, arama motoru optimizasyonu ve erişilebilirlik açısından önemlidir. Daha yeni CSS özellikleri, geliştiricilerin ekrandaki sırası HTML belgesindekinden çok farklı görünen içerikler oluşturmasına olanak tanır. Bu durum, ekran okuyucu kullanıcıları görme engelli olmayan kullanıcılardan farklı ve büyük olasılıkla kafa karıştırıcı bir deneyim yaşayacağından büyük bir erişilebilirlik sorunudur.

Chromium sorunu: 1094406

Kare ayrıntılarını görüntülemek için yeni kısayol

Nesneler panelinde iframe öğesini sağ tıklayıp Çerçeve ayrıntılarını göster'i seçerek iframe ayrıntılarını görüntüleyin.

Kare ayrıntılarını göster

Bu işlem sizi, olası sorunları ayıklamak için doküman ayrıntılarını, güvenlik ve izolasyon durumunu, izin politikasını ve daha fazlasını inceleyebileceğiniz Uygulama panelindeki iframe ayrıntılarının görünümüne yönlendirir.

Çerçeve ayrıntıları görünümü

Chromium sorunu: 1192084

Gelişmiş CORS hata ayıklama desteği

Merkezler arası kaynak paylaşımı (CORS) hataları artık Sorunlar sekmesinde gösteriliyor. CORS hatalarına neden olan çeşitli faktörler vardır. Olası nedenleri ve çözümleri öğrenmek için her sorunu genişletmek üzere tıklayın.

Sorunlar sekmesindeki CORS sorunları

Chromium sorunu: 1141824

Ağ paneli güncellemeleri

XHR etiketini Fetch/XHR olarak yeniden adlandırın

XHR etiketi artık Fetch/XHR olarak yeniden adlandırıldı. Bu değişiklik, filtrenin hem XMLHttpRequest hem de Fetch API ağ isteklerini içerdiğini daha net bir şekilde belirtir.

Fetch/XHR etiketi

Chromium sorunu: 1201398

Ağ panelinde Wasm kaynak türünü filtreleme

Artık Wasm ağ isteklerini filtrelemek için yeni Wasm düğmesini tıklayabilirsiniz.

Wasm'ye göre filtreleme

Chromium sorunu: 1103638

Ağ koşulları sekmesindeki cihazlar için Kullanıcı Aracısı İstemci İpuçları

Ağ koşulları sekmesindeki Kullanıcı aracısı alanında bulunan cihazlar için artık Kullanıcı Aracısı İstemci İpuçları uygulanıyor.

Kullanıcı Aracısı İstemci İpuçları, geliştiricilerin bir kullanıcının tarayıcısıyla ilgili bilgilere gizliliği koruyarak ve ergonomik bir şekilde erişmesini sağlayan, İstemci İpuçları API'sinin yeni bir genişletilmiş sürümüdür.

Ağ koşulları sekmesindeki cihazlar için Kullanıcı Aracısı İstemci İpuçları

Chromium sorunu: 1174299

Sorunlar sekmesinde uyumluluk modu sorunlarını bildirme

Geliştirici Araçları artık uyumsuzluk modu ve sınırlı uyumsuzluk modu sorunlarını bildiriyor.

Quirks modu ve sınırlı quirks modu, web standartları oluşturulmadan önceki eski tarayıcı modlarıdır. Bu modlar, genellikle beklenmedik görsel efektlere neden olan, standart öncesi döneme ait düzen davranışlarını taklit eder.

Geliştiriciler, düzen sorunlarını ayıklarken bunların kullanıcı tarafından yazılan CSS veya HTML hatalarından kaynaklandığını düşünebilir. Ancak asıl sorun, sayfanın bulunduğu uyumluluk modudur. DevTools, sorunu düzeltmek için öneriler sunar.

Sorunlar sekmesinde uyumluluk modu sorunlarını bildirme

Chromium sorunu: 622660

Kesişimleri Hesapla özelliğini Performans paneline dahil etme

DevTools artık alev grafiğinde Compute Intersections'ı gösteriyor. Bu değişiklikler, kesişim gözlemcisi etkinliklerini belirlemenize ve olası performans ek yüklerinde hata ayıklamanıza yardımcı olur.

Performans panelinde kesişimleri hesaplama

Chromium sorunu: 1199137

Lighthouse panelinde Lighthouse 7.5

Lighthouse paneli artık Lighthouse 7.5'i çalıştırıyor. CSS'de aspect-ratio tanımlanmış resimler için "açık genişlik ve yükseklik eksik" uyarısı kaldırıldı. Daha önce Lighthouse, genişlik ve yükseklik tanımlanmamış resimlerle ilgili uyarılar gösteriyordu.

Değişikliklerin tam listesi için sürüm notlarına göz atın.

Chromium sorunu: 772558

Çağrı yığınındaki "Çerçeveyi yeniden başlat" bağlam menüsü kullanımdan kaldırıldı

Çerçeveyi yeniden başlat seçeneğinin desteği sonlandırıldı. Bu özelliğin iyi çalışması için daha fazla geliştirilmesi gerekir. Şu anda bozuktur ve sık sık kilitlenir.

Kullanımdan kaldırılan "Çerçeveyi yeniden başlat" içerik menüsü

Chromium sorunu: 1203606

[Deneysel] Protokol izleyici

Chrome Geliştirici Araçları, Chrome tarayıcılarda enstrüman oluşturmak, incelemek, hata ayıklamak ve profil oluşturmak için Chrome Geliştirici Araçları Protokolü'nü (CDP) kullanır. Protokol monitörü, DevTools tarafından yapılan tüm CDP isteklerini ve yanıtlarını görüntülemenizi sağlar.

CDP'nin test edilmesini kolaylaştırmak için iki yeni işlev eklendi:

  • Yeni Kaydet düğmesi, kaydedilen mesajları JSON dosyası olarak indirmenize olanak tanır.
  • Doğrudan ham CDP komutu göndermenize olanak tanıyan yeni bir alan

Protokol izleyici

Chromium sorunları: 1204004, 1204466

[Deneysel] Puppeteer Recorder

Puppeteer kaydedici artık tarayıcıyla etkileşiminize göre bir adım listesi oluşturuyor. Daha önce ise doğrudan bir Puppeteer komut dosyası oluşturuluyordu. Adımları Puppeteer komut dosyası olarak dışa aktarmanıza olanak tanıyan yeni bir Dışa aktar düğmesi eklendi.

Adımları kaydettikten sonra, adımları tekrar oynatmak için yeni Tekrar Oynat düğmesini kullanabilirsiniz. Kayda nasıl başlayacağınızı öğrenmek için buradaki talimatları uygulayın.

Bu özelliğin erken aşama deneme sürümünde olduğunu lütfen unutmayın. Kaydedici işlevini zaman içinde geliştirmeyi ve kapsamını genişletmeyi planlıyoruz.

Puppeteer Recorder

Chromium sorunu: 1199787

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

Geliştirici Araçları'ndaki yenilikler

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