Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Jecelyn Yeen

CSS ızgara düzenleyicisi

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

CSS ızgara düzenleyici

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ğine dikkat edin:

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)

Const beyanları

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.

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

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.

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

Bu işlem, sizi Uygulama panelinde iFrame ayrıntılarına yönlendirir. Burada, olası sorunları ayıklamak için doküman ayrıntılarını, güvenlik ve yalıtım 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

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.

Sorunlar sekmesindeki CORS sorunları

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.

Getirme/XHR etiketi

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.

Wasm'a göre filtrele

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.

Ağ koşulları sekmesindeki cihazlar için kullanıcı aracısı istemci ipuç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.

Sorunlar sekmesinde Quirks modu sorunlarını bildirin

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.

Performans panelinde Kesişimleri Hesapla

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ı, CSS'de tanımlanan 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

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

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.

Çerçeve içerik menüsü desteği sonlandırıldı

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

Protokol izleyici

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.

Kukla Kayıt Cihazı

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ı'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.