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

Jecelyn Yeen

CSS ızgara düzenleyici

Çok istenen bir özellik. Artık yeni CSS Grid düzenleyiciyle CSS Grid'i önizleyebilir ve yazabilirsiniz.

CSS Grid düzenleyici

Sayfanızdaki bir HTML öğesine display: grid veya display: inline-grid uygulandığında, Stiller panelinde öğenin yanında bir simge görürsünüz. CSS ızgara düzenleyiciyi açmak/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

Console'da const yeniden beyanları için destek

Console artık mevcut let ve class yeniden bildirimlerine ek olarak const ifadesinin yeniden bildirimini de destekliyor. Yeniden tanımlama yapılamaması, yeni JavaScript kodunu denemek için Console'u kullanan web geliştiricileri için can sıkıcı bir durumdu.

Bu sayede geliştiriciler, kodu Geliştirici Araçları konsoluna kopyalayıp yapıştırarak nasıl çalıştığını görebilir veya denemeler yapabilir, kodda küçük değişiklikler yapabilir ve sayfayı yenilemeden işlemi tekrarlayabilir. Önceden, kod bir const bağlamayı yeniden tanımladığında Geliştirici Araçları söz dizimi hatası veriyordu.

Aşağıdaki örneği inceleyin. const yeniden tanımlama, 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 sayfa komut dosyalarının const yeniden tanımlanmasına izin verilmez.
  • Aynı REPL komut dosyasında const yeniden tanımlamasına izin verilmez (b değişkenine bakın)

const yeniden bildirimleri

Chromium sorunu: 1076427

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

Erişilebilirlik denetimini daha iyi yapabilmek için artık ekrandaki kaynak öğelerin sırasını görüntüleyebilirsiniz.

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

HTML belgesindeki içerik sırası, arama motoru optimizasyonu ve erişilebilirlik açısından önemlidir. Daha yeni CSS özellikleri, geliştiricilerin ekrandaki sıralaması HTML belgesindekinden çok farklı görünen içerikler oluşturmasına olanak tanır. Ekran okuyucu kullanıcıları, gören kullanıcılardan farklı ve muhtemelen kafa karıştırıcı bir deneyim yaşayacağından bu durum, erişilebilirlik açısından büyük bir sorundur.

Chromium sorunu: 1094406

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

Öğeler 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 Uygulama panelindeki iframe ayrıntılarının görünümüne yönlendirir. Burada, olası sorunları ayıklamak için belge ayrıntılarını, güvenlik ve izolasyon durumunu, izinler politikasını ve daha fazlasını inceleyebilirsiniz.

Kare 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 anlamak için her bir sorunu tıklayarak genişletin.

Sorunlar sekmesindeki CORS sorunları

Chromium sorunu: 1141824

Ağ paneli güncellemeleri

XHR etiketini Fetch/XHR olarak yeniden adlandırma

XHR etiketi, 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 gösterir.

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'a göre filtrele

Chromium sorunu: 1103638

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

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

Kullanıcı Aracısı İstemci İpuçları, Client Hints API'nin yeni bir uzantısıdır. Bu uzantı, geliştiricilerin kullanıcıların tarayıcılarıyla ilgili bilgilere gizliliği korumaya yönelik ve ergonomik bir şekilde erişmesini sağlar.

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

Chromium sorunu: 1174299

Sorunlar sekmesinde Quirks modu sorunlarını bildirme

Geliştirici Araçları artık Quirks Modu ve Sınırlı Quirks 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önem 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. Geliştirici Araçları, sorunu düzeltmek için öneriler sunar.

Sorunlar sekmesinde Quirks modu sorunlarını bildirme

Chromium sorunu: 622660

Performans paneline Kesişimleri Hesapla'yı ekleme

Geliştirici Araçları artık flame grafiğinde Kesişimleri Hesapla'yı gösterir. Bu değişiklikler, intersection observers etkinliklerini belirlemenize ve olası performans ek yüklerinde hata ayıklamanıza yardımcı olur.

Performans panelinde Kesişimleri Hesapla

Chromium sorunu: 1199137

Lighthouse panelinde Lighthouse 7.5

Lighthouse panelinde artık Lighthouse 7.5 çalışıyor. CSS'de aspect-ratio tanımlanmış resimler için "açıkça belirtilmiş genişlik ve yükseklik eksik" uyarısı artık kaldırıldı. Daha önce Lighthouse, genişlik ve yükseklik tanımlanmamış resimler için 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 "Kareyi yeniden başlat" bağlam menüsü kullanımdan kaldırıldı

Kareyi yeniden başlat seçeneği artık kullanımdan kaldırılmıştır. Bu özelliğin iyi çalışması için daha fazla geliştirilmesi gerekiyor. Şu anda bozuk ve sık sık kilitleniyor.

Kullanımdan kaldırılan kareyi yeniden başlat bağlam menüsü

Chromium sorunu: 1203606

[Deneysel] Protokol izleyici

Chrome Geliştirici Araçları; Chrome tarayıcıları izlemek, incelemek, hata ayıklamak ve profillemek için Chrome Geliştirici Araçları Protokolü'nü (CDP) kullanır. Protokol izleyici, Geliştirici Araçları 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.
  • Ham CDP komutunu doğrudan göndermenize olanak tanıyan yeni bir alan

Protokol izleme

Chromium sorunları: 1204004, 1204466

[Deneysel] Puppeteer Kaydedici

Puppeteer kaydedici artık tarayıcıyla etkileşiminize dayalı bir adım listesi oluşturuyor. Daha önce Geliştirici Araçları doğrudan bir Puppeteer komut dosyası oluşturuyordu. Adımları Puppeteer komut dosyası olarak dışa aktarmanıza olanak tanıyan yeni bir Dışa aktar düğmesi eklenir.

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

Bu özelliğin henüz deneme aşamasında olduğunu lütfen unutmayın. Kaydedici işlevini zaman içinde geliştirip 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ı kullanabilirsiniz. Bu önizleme kanalları, en yeni Geliştirici Araçları ö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 ö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.