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

Jecelyn Yeen

Geliştirici Araçları'nın daha hızlı başlatılması

Geliştirici Araçları'nın başlatılması artık JavaScript derleme açısından yaklaşık% 37 daha hızlı (6,9 saniyeden 5 saniyeye düşürüldü). 🎉

Ekip, başlatma sırasında serileştirme, ayrıştırma ve seri durumdan çıkarma işlemlerinin performans ek yükünü azaltmak için bazı optimizasyonlar yaptı.

Uygulamayı ayrıntılı olarak açıklayan bir mühendislik blog yayını yakında yayınlanacaktır. Bizi izlemeye devam edin!

Chromium sorunu: 1029427

Yeni CSS açı görselleştirme araçları

DevTools artık CSS açısı hata ayıklama için daha iyi destek sunuyor.

Sayfanızdaki bir HTML öğesine CSS açısı uygulandığında (ör. background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), Stiller bölmesinde açının yanında bir saat simgesi gösterilir. Saat yer paylaşımını açmak veya kapatmak için saat simgesini tıklayın. Açıyı değiştirmek için saatin herhangi bir yerini tıklayın veya ibreyi sürükleyin.

Açı değerini değiştirmek için fare ve klavye kısayolları da vardır. Daha fazla bilgi edinmek için dokümanlarımıza göz atın.

Chromium sorunları: 1126178, 1138633

Desteklenmeyen resim türlerini taklit etme

DevTools, Rendering (Oluşturma) sekmesine iki yeni emülasyon ekledi. Bu sayede AVIF ve WebP resim biçimlerini devre dışı bırakabilirsiniz. Bu yeni emülasyonlar, geliştiricilerin tarayıcı değiştirmelerine gerek kalmadan farklı resim yükleme senaryolarını test etmelerini kolaylaştırır.

Daha yeni tarayıcılarda AVIF ve WebP biçiminde bir resim yayınlamak için aşağıdaki HTML kodunun olduğunu varsayalım. Bu kod, daha eski tarayıcılarda PNG biçiminde yedek bir resim yayınlar.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Oluşturma sekmesini açın, "AVIF resim biçimini devre dışı bırak"ı seçin ve sayfayı yenileyin. img src simgesinin üzerine gelin. Geçerli resim kaynağı (currentSrc) artık yedek WebP resmi.

Chromium sorunu: 1130556

Depolama alanı bölmesinde depolama alanı kotası boyutunu simüle etme

Artık depolama alanı kotası boyutunu Depolama bölmesinde geçersiz kılabilirsiniz. Bu özellik, farklı cihazları simüle etmenize ve uygulamalarınızın düşük disk alanı senaryolarındaki davranışını test etmenize olanak tanır.

Uygulama > Depolama'ya gidin, Özel depolama alanı kotasını simüle et onay kutusunu etkinleştirin ve depolama alanı kotasını simüle etmek için geçerli bir sayı girin.

Chromium sorunları: 945786, 1146985

Performans paneli kayıtlarında yeni Web Vitals şeridi

Performans kayıtlarında artık Web Verileri bilgilerini gösterme seçeneği var.

Yükleme performansınızı kaydettikten sonra, yeni Web Vitals şeridini görüntülemek için Performans panelinde Web Vitals onay kutusunu etkinleştirin.

Şu anda şeritte İlk Zengin İçerikli Boyama (FCP), Largest Contentful Paint (LCP) ve Layout Shift (LS) gibi önemli web verileri bilgileri gösterilmektedir.

Web Vitals metrikleriyle kullanıcı deneyimini nasıl optimize edeceğiniz hakkında daha fazla bilgi edinmek için web.dev/vitals adresini ziyaret edin.

Chromium sorunu: Yok

Ağ panelinde CORS hatalarını bildirme

Geliştirici Araçları artık merkezler arası kaynak paylaşımı (CORS) nedeniyle bir ağ isteği başarısız olduğunda CORS hatası gösteriyor.

Ağ panelinde başarısız olan CORS ağ isteğini inceleyin. Durum sütununda "CORS hatası" gösteriliyor. Hatanın üzerine geldiğinizde hata kodu artık ipucu olarak gösteriliyor. Daha önce, Geliştirici Araçları yalnızca CORS hataları için genel "(failed)" durumunu gösteriyordu.

Bu, CORS sorunlarının daha ayrıntılı bir açıklamasını sunmayla ilgili sonraki geliştirmelerimizin temelini oluşturur.

Chromium sorunu: 1141824

Çerçeve ayrıntıları görünümü güncellemeleri

Frame ayrıntıları görünümünde kökler arası erişime kapatma bilgileri

Kökler arası erişime kapalı durumu artık Güvenlik ve İzolasyon bölümünde gösteriliyor.

Yeni API kullanılabilirliği bölümünde SharedArrayBuffer'lerin (SAB) kullanılabilirliği ve postMessage() kullanılarak paylaşılıp paylaşılamayacağı gösterilir.

SAB ve postMessage() şu anda kullanılabiliyorsa ancak bağlam kökler arası erişime kapalı değilse kullanımdan kaldırma uyarısı gösterilir. Kökler arası erişimin kapatılması ve SharedArrayBuffers gibi özellikler için neden gerekli olacağı hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.

Chromium sorunu: 1139899

Kare ayrıntıları görünümünde yeni Web Workers bilgileri

Geliştirici Araçları artık özel web çalışanlarını, bunları oluşturan çerçeve altında gösteriyor.

Uygulama panelinde, web çalışanları olan bir kareyi genişletin ve ardından web çalışanının ayrıntılarını görüntülemek için Çalışanlar ağacının altındaki bir çalışanı seçin.

Chromium sorunları: 1122507, 1051466

Açılan pencereler için açıcı çerçeve ayrıntılarını görüntüleme

Artık hangi çerçevenin başka bir pencerenin açılmasına neden olduğuyla ilgili ayrıntıları görüntüleyebilirsiniz.

Pencere ayrıntılarını görüntülemek için Çerçeveler ağacında açık bir pencere seçin. Açıcıyı Nesneler panelinde göstermek için Opener Frame bağlantısını tıklayın.

Chromium sorunu: 1107766

Ağ panelini Service Workers bölmesinden açma

Yeni Ağ istekleri bağlantısıyla tüm hizmet çalışanı (SW) istek yönlendirme bilgilerini görüntüleyin. Bu, geliştiricilere SW'de hata ayıklarken ek bağlam bilgisi sağlar.

Application (Uygulama) > Service Workers'a (Servis Çalışanları) gidin ve bir SW'nin Network requests'ini (Ağ istekleri) tıklayın. Alt panelde Ağ paneli açılır ve hizmet çalışanıyla ilgili tüm istekler gösterilir (ağ istekleri "is:service-worker-intercepted" ile filtrelenir).

Chromium sorunu: Yok

Ağ panelinde yeni kopyalama seçenekleri

Özellik değerini kopyalama

Bağlam menüsündeki yeni "Değeri kopyala" seçeneği, bir ağ isteğinin mülk değerini kopyalamanıza olanak tanır.

Ağ panelinde bir ağ isteğini tıklayarak Başlıklar bölmesini açın. Şu bölümlerdeki özelliklerden birini sağ tıklayın: İstek yükü (JSON) Form Verileri Sorgu Dizesi Parametreleri İstek Başlıkları Yanıt Başlıkları

Ardından, özellik değerini panonuza kopyalamak için Değeri kopyala'yı seçebilirsiniz.

Chromium sorunu: 1132084

Ağ başlatıcısı için yığın izini kopyalama

Bir ağ isteğini sağ tıklayın, ardından yığın izini panonuza kopyalamak için Yığın izini kopyala'yı seçin.

Chromium sorunu: 1139615

Wasm hata ayıklama güncellemeleri

Fareyle üzerine gelindiğinde Wasm değişken değerinin önizlemesini gösterme

Bir kesme noktasında duraklatılmışken WebAssembly (Wasm) ayrıştırmasında bir değişkenin üzerine gelindiğinde DevTools artık değişkenin geçerli değerini gösteriyor.

Kaynaklar panelinde bir Wasm dosyası açın, kesme noktası yerleştirin ve sayfayı yenileyin. Değeri görmek için bir değişkenin üzerine gelin.

Chromium sorunları: 1058836, 1071432

Konsolda Wasm değişkenini değerlendirme

Artık bir kesme noktasında duraklatılmışken Konsol'da Wasm değişkenini değerlendirebilirsiniz.

Bu örnekte, local.get $input satırına kesme noktası yerleştiriyoruz. Hata ayıklama sırasında Console'da $input yazıldığında değişkenin geçerli değeri (bu durumda 4) döndürülür.

Chromium sorunu: 1127914

Dosya/bellek boyutları için tutarlı ölçü birimleri

Geliştirici Araçları artık dosya/bellek boyutlarını göstermek için tutarlı bir şekilde kB kullanıyor. Daha önce Geliştirici Araçları, kB (1.000 bayt) ve KiB (1.024 bayt) değerlerini karıştırıyordu. Örneğin, Ağ paneli daha önce "kB" etiketlerini kullanıyordu ancak aslında KiB kullanarak hesaplamalar yapıyordu. Bu durum gereksiz karışıklığa neden oluyordu.

Chromium sorunu: 1035309

Nesne panelinde sözde öğeleri vurgulama

Geliştirici Araçları, sözde öğeleri daha iyi tespit edebilmeniz için bu öğelerin renk kontrastını artırdı.

Chromium sorunu: 1143833

Deneysel özellikler

CSS Flexbox hata ayıklama araçları

Flexbox hata ayıklama araçları geliyor

Başlangıç olarak, DevTools artık flex uygulanmış öğeler için Nesneler panelinde display: flex rozeti gösteriyor.

Ayrıca, aşağıdaki flexbox özelliklerine yeni hizalama simgeleri eklendi:

• flex-direction
• align-items
• align-content
• align-self
• justify-items
• justify-content

Ayrıca bu simgeler bağlama duyarlıdır. Simge yönü şunlara göre ayarlanır:

• flex-direction
• direction
• writing-mode

Bu simgeler, sayfanın esnek kutu düzenini daha iyi görselleştirmenize yardımcı olmayı amaçlar.

Flexbox araçlarının özellikleriyle ilgili tasarım belgesini burada bulabilirsiniz. Yakında daha fazla özellik eklenecektir.

Deneyin ve ne düşündüğünüzü bize bildirin.

Chromium sorunları: 1144090, 1139945

Akor klavye kısayollarını özelleştirme

DevTools, son sürümden bu yana klavye kısayollarını özelleştirme için deneysel destek ekledi.

Artık kısayol düzenleyicide akorlar (diğer adıyla çok tuşlu kısayollar) oluşturabilirsiniz.

Ayarlar > Kısayollar'a gidin, bir komutun üzerine gelin ve Düzenle düğmesini (kalem simgesi) tıklayarak akor kısayolunu özelleştirin.

Chromium sorunu: 174309

Ö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.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools'a tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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