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

Jecelyn Yeen

CSS ızgara düzenleyici

Ç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

Konsol'da const yeniden bildirimleri için destek

Console, mevcut let ve class yeniden bildirimlerine ek olarak artık const ifadesinin yeniden bildirimini de destekliyor. Yeniden bildirimde bulunamama, Konsol'u 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, kodun nasıl çalıştığını görmek veya deneme yapmak için kodu Geliştirici Araçları Konsolu'na 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ıralaması 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

Öğ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, 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 durumlar 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.

User-Agent Client Hints, Client Hints API'nin yeni bir genişletilmiş sürümüdür. Geliştiricilerin, kullanıcıların tarayıcılarıyla ilgili bilgilere gizliliği koruyarak 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 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

Performans paneline Kesişimleri Hesapla özelliğini ekleme

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. "Açık genişlik ve yükseklik eksik" uyarısı, CSS'de aspect-ratio tanımlanmış resimler için 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ıları izlemek, incelemek, hata ayıklamak ve profillemek için Chrome Geliştirici Araçları Protokolü'nü (CDP) kullanır. Protokol izleyici, 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şamadaki bir deneme 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.