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

CSS ızgara düzenleyicisi

Çok istenen bir özellik. Artık yeni CSS Izgara düzenleyicisiyle CSS Izgarasını önizleyebilir ve oluşturabilirsiniz.

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

Chromium sorunu: 1203241

Console'da const yeniden beyan desteği

Console artık mevcut let ve class bildirimlerinin yanı sıra const ifadesinin de yeniden beyanını destekliyor. Yeni JavaScript koduyla denemeler yapmak için Console'u kullanan web geliştiricilerinin yeniden bildirememesi sık karşılaşılan bir sorundu.

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

Aşağıdaki örneğe bakın. const için yeniden bildirim, ayrı REPL komut dosyalarında desteklenir (a değişkenine bakın). Aşağıdaki senaryoların tasarım tarafından desteklenmediğini göz önünde bulundurun:

• REPL komut dosyalarında sayfa komut dosyalarının const kez yeniden tanımlanmasına izin verilmez
• Aynı REPL komut dosyası içinde const için yeniden bildirime izin verilmez (b değişkenine bakın)

Chromium sorunu: 1076427

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

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

HTML dokümanındaki içeriğin sırası, arama motoru optimizasyonu ve erişilebilirlik açısından önemlidir. Yeni CSS özellikleri, geliştiricilerin ekran sırası HTML dokümanında olduğundan çok farklı görünen içerikler oluşturmalarına olanak tanır. Görme engellilere kıyasla ekran okuyucu kullanıcılarının farklı, muhtemelen kafa karıştırıcı bir deneyim yaşamaları nedeniyle bu büyük bir erişilebilirlik sorunudur.

Chromium sorunu: 1094406

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

Öğeler panelinde iframe öğesini sağ tıklayarak iframe ayrıntılarını görüntüleyin ve Çerçeve ayrıntılarını göster'i seçin.

Bunu yaptığınızda, Uygulama panelinde iframe'in ayrıntılarına yönlendirilirsiniz. Bu panelde doküman ayrıntıları, güvenlik ve izolasyon durumu, izin politikası ve daha birçok bilgiyi inceleyin.

Chromium sorunu: 1192084

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

Kaynaklar arası kaynak paylaşımı (CORS) hataları artık Sorunlar sekmesinde gösteriliyor. CORS hatalarına yol açan çeşitli nedenler vardır. Olası nedenleri ve çözümleri anlamak için ilgili sorunları tıklayarak genişletin.

Chromium sorunu: 1141824

Ağ paneli güncellemeleri

XHR etiketinin adını Fetch/XHR olarak değiştirin

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

Chromium sorunu: 1201398

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

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

Chromium sorunu: 1103638

Ağ koşulları sekmesindeki cihazlar için kullanıcı aracısı istemci ipuçları

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

İstemci İpuçları API'sinin yeni bir uzantısı olan kullanıcı aracısı istemci ipuçları, geliştiricilerin kullanıcının tarayıcısıyla ilgili bilgilere gizliliği koruyan ve ergonomik bir şekilde erişmesini sağlar.

Chromium sorunu: 1174299

Sorunlar sekmesinde Quirks modu sorunlarını bildirin

Geliştirici Araçları artık Quirks Modu ve Sınırlı Quirks Modu sorunlarını bildiriyor.

Süslemeler Modu ve Sınırlı Süsler Modu, web standartları oluşturulmadan önceki eski tarayıcı modlarıdır. Bu modlar, genellikle beklenmedik görsel efektlere neden olan standart öncesi düzen davranışlarını emüle eder.

Geliştiriciler düzen sorunlarını ayıklarken bunların, kullanıcı tarafından yazılmış CSS veya HTML hatalarından kaynaklandığını düşünebilir. Asıl sorun ise sayfanın bulunduğu Uyumlu Mod'dur. Geliştirici Araçları, bu sorunu düzeltmeye yönelik öneriler sunar.

Chromium sorunu: 622660

Performans paneline Compute Kesişimlerini dahil et

Geliştirici Araçları artık flame grafiğinde İşlem Kesişimlerini gösteriyor. Bu değişiklikler, kesişim gözlemcileri etkinliklerini tanımlamanıza ve bu olayların potansiyel performans ek yüklerinde hata ayıklamanıza yardımcı olur.

Chromium sorunu: 1199137

Lighthouse 7.5 panelindeki Lighthouse 7.5

Lighthouse paneli şu anda Lighthouse 7.5'i çalıştırıyor. "Açık genişlik ve yükseklik eksik" uyarısı artık CSS'de tanımlanmış aspect-ratio içeren resimler için kaldırıldı. Daha önce Lighthouse, genişlik ve yükseklik tanımlanmayan 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

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

Yeniden başlat seçeneği kullanımdan kaldırıldı. Bu özelliğin iyi çalışması için daha fazla geliştirme yapılması gerekiyor. Şu anda çalışmıyor ve sıklıkla kilitleniyor.

Chromium sorunu: 1203606

[Deneysel] Protokol izleyici

Chrome Geliştirici Araçları, Chrome Tarayıcıları izlemek, incelemek, hata ayıklamak ve profil oluşturmak için Chrome Geliştirici Araçları Protokolü'nü (CDP) kullanır. Protokol izleme, Geliştirici Araçları tarafından gönderilen tüm CDP isteklerini ve yanıtlarını görüntülemenizi sağlar.

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

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

Chromium sorunları: 1204004, 1204466

[Deneysel] Kukla Kaydedici

Puppeteer kaydedici, artık tarayıcıyla etkileşiminize göre bir adım listesi oluştururken DevTools bunun yerine doğrudan bir Puppeteer komut dosyası oluşturuyordu. Adımları Puppeteer komut dosyası olarak dışa aktarmanıza olanak tanıyan yeni bir Export (Dışa Aktar) düğmesi eklenmiştir.

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

Bunun erken aşamadaki bir deneme olduğunu lütfen unutmayın. Kaydedici işlevini zaman içinde geliştirip genişletmeyi planlıyoruz.

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, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

• Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
• Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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