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

Jecelyn Yeen

CSS ızgara düzenleyici

Çok istenen bir özellik. Artık yeni CSS Izgara düzenleyiciyle CSS Izgara'yı önizleyebilir ve oluşturabilirsiniz.

CSS ızgara düzenleyici

Sayfanızdaki bir HTML öğesine display: grid veya display: inline-grid uygulandığında Stil bölmesindeki öğenin yanında bir simge görünür. 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ü düzenleyebilirsiniz.

Chromium sorunu: 1203241

Konsol'da const yeniden tanımlama desteği

Console artık mevcut let ve class yeniden tanımlamalarına ek olarak const ifadesinin yeniden tanımlanmasını da destekliyor. Yeni JavaScript kodlarıyla denemeler yapmak için Konsolu kullanan web geliştiricileri, yeniden tanımlama özelliğinin olmaması nedeniyle sık sık sorun yaşıyordu.

Bu sayede geliştiriciler, kodun nasıl çalıştığını görmek veya denemek için kodu kopyalayıp Geliştirici Araçları Konsolu'na 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ği inceleyin. const yeniden tanımlama işlemi, 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 yeniden tanımlanmasına const izin verilmez
  • Aynı REPL komut dosyasında const yeniden beyan edilmesine izin verilmez (b değişkenine bakın)

const yeniden tanımlamaları

Chromium sorunu: 1076427

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

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

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

HTML dokümanındaki içeriğin sırası, arama motoru optimizasyonu ve erişilebilirlik için önemlidir. Yeni CSS özellikleri, geliştiricilerin ekrandaki sırası HTML dokümanındakinden çok farklı görünen içerikler oluşturmasına olanak tanır. Ekran okuyucu kullanıcıları, görme engeli olmayan kullanıcılardan farklı ve büyük olasılıkla kafa karıştırıcı bir deneyim yaşayacağından 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

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.

Çerçeve ayrıntılarını göster

Bu işlem sizi, uygulama panelinde iframe'in ayrıntılarını görüntüleyebileceğiniz bir sayfaya yönlendirir. Bu sayfada, olası sorunları gidermek için belge ayrıntılarını, güvenlik ve izolasyon durumunu, izin politikasını ve daha fazlasını inceleyebilirsiniz.

Ç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 yol açan çeşitli nedenler vardır. Olası nedenleri ve çözümleri anlamak için her sorunu tıklayarak genişletin.

Sorunlar sekmesindeki CORS sorunları

Chromium sorunu: 1141824

Ağ paneli güncellemeleri

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

XHR etiketi artık Getir/XHR olarak adlandırılıyor. Bu değişiklik, bu filtrenin hem XMLHttpRequest hem de Fetch API ağ isteklerini içerdiğini daha net bir şekilde ortaya koyar.

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'e göre filtreleme

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 Ağ koşulları sekmesindeki Kullanıcı aracısı alanındaki cihazlar için uygulanıyor.

Kullanıcı Aracısı İstemci İpuçları, geliştiricilerin kullanıcının tarayıcısı hakkındaki bilgilere gizliliği koruyan ve ergonomik bir şekilde erişmesini sağlayan Client Hints API'nin yeni bir uzantısıdır.

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

Chromium sorunu: 1174299

Sorunlar sekmesinde Tuhaflıklar modu sorunlarını bildirme

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

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, sayfadaki uyumluluk modundan kaynaklanan gerçek sorunun kullanıcı tarafından yazılmış CSS veya HTML hatalarından kaynaklandığını düşünerek sayfadaki düzen sorunlarında hata ayıklama yaparken yanlış teşhis koyabilir. DevTools, bu sorunu düzeltmek için öneriler sunar.

Sorunlar sekmesinde Tuhaflıklar modu sorunlarını bildirme

Chromium sorunu: 622660

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

DevTools artık alev grafiğinde kesişimleri hesapla seçeneğini gösterir. Bu değişiklikler, kesişim gözlemcileri etkinliklerini belirlemenize ve olası performans yükü konusunda hata ayıklamanıza yardımcı olur.

Performans panelinde kesişimleri hesaplama

Chromium sorunu: 1199137

Lighthouse panelinde Lighthouse 7.5

Lighthouse panelinde artık Lighthouse 7.5 sürümü kullanılı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üksekliği tanımlanmamış resimler için uyarı 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" içerik menüsü kullanımdan kaldırıldı

Çerçeveyi yeniden başlat seçeneğinin desteği sonlandırılmıştır. Bu özelliğin düzgün çalışması için daha fazla geliştirme yapılması gerekiyor. Şu anda bu özellik bozuk ve sık sık kilitleniyor.

Desteği sonlandı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ını donatmak, 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ı ile etkileşiminize dayalı bir adım listesi oluşturuyor. Daha önce ise 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 Dışa aktar düğmesi eklendi.

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

Bunun erken aşamada olan bir deneme olduğunu lütfen unutmayın. Kaydedici işlevini zaman içinde iyileştirmeyi ve genişletmeyi planlıyoruz.

Puppeteer Recorder

Chromium sorunu: 1199787

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.