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ı başlangıcı artık JavaScript derlemesi açısından yaklaşık% 37 daha hızlı (6,9 saniyeden 5 saniyeye kadar)! 🎉

Ekip, başlatma sırasında serileştirme, ayrıştırma ve serileştirmenin performans yükü 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çı hata ayıklama için daha iyi destek sunuyor.

CSS açısı

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 saatte herhangi bir yeri tıklayın veya iğneyi 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, Oluşturma sekmesine AVIF ve WebP resim biçimlerini devre dışı bırakmanıza olanak tanıyan iki yeni emülasyon ekledi. Bu yeni emülasyonlar, geliştiricilerin tarayıcı değiştirmek zorunda kalmadan farklı resim yükleme senaryolarını test etmesini kolaylaştırır.

Yeni tarayıcılar için AVIF ve WebP biçiminde bir resim yayınlamak ve eski tarayıcılar için yedek PNG resmi sağlamak üzere aşağıdaki HTML koduna sahip olduğumuzu varsayalım.

<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. Fareyle img src simgesinin üzerine gelin. Geçerli resim kaynağı (currentSrc) artık yedek WebP resmidir.

Resim türlerini taklit etme

Chromium sorunu: 1130556

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

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

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

Depolama alanı kotası boyutunu simüle etme

Chromium sorunları: 945786, 1146985

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

Performans kayıtlarında artık Web Verileri bilgilerini görüntüleme 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.

Bu şerit şu anda İlk Zengin İçerikli Boyama (FCP), Largest Contentful Paint (LCP) ve Layout Shift (LS) gibi Web Vitals bilgilerini gösterir.

Web Vitals metrikleriyle kullanıcı deneyimini optimize etme hakkında daha fazla bilgi edinmek için web.dev/vitals adresine göz atın.

Web Vitals şerit

Chromium sorunu: Yok

Ağ panelinde CORS hatalarını bildirme

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

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

Bu sayede, CORS sorunları hakkında daha ayrıntılı açıklama sunma konusunda gelecekte yapacağımız geliştirmelerin temelini atabilirsiniz.

CORS hataları

Chromium sorunu: 1141824

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

Çerçeve ayrıntıları görünümündeki kökler arası izolasyon bilgileri

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

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

SAB ve postMessage() şu anda kullanılabilir durumdaysa ancak bağlam, kökler arası erişime kapalı değilse bir desteği sonlandı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.

Kaynaklar arası bilgiler

Chromium sorunu: 1139899

Çerçeve ayrıntıları görünümünde yeni Web İşleyici bilgileri

Geliştirici Araçları artık özel web işçilerini, onları oluşturan çerçevenin altında gösterir.

Uygulama panelinde, web işçilerinin bulunduğu bir çerçeveyi genişletin ve ardından web işçisinin ayrıntılarını görüntülemek için İşçiler ağacının altında bir işçi seçin.

Web çalışanlarının bilgileri

Chromium sorunları: 1122507, 1051466

Açık pencereler için başlatıcı çerçeve ayrıntılarını görüntüleme

Artık başka bir pencerenin açılmasına hangi çerçevenin 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. Nesne panelinde açıcıyı göstermek için Açıcı Çerçevesi bağlantısını tıklayın.

Açıcı çerçevesi ayrıntıları

Chromium sorunu: 1107766

Hizmet Çalışanları bölmesinden Ağ panelini 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 yazılımda hata ayıklarken ek bağlam bilgisi sağlar.

Uygulama > Hizmet Çalışanları'na gidin, bir hizmet çalışanının Ağ istekleri'ni tıklayın. Alt panelde, hizmet işleyiciyle ilgili tüm isteklerin gösterildiği Ağ paneli açılır (ağ istekleri "is:service-worker-intercepted" tarafından filtrelenir).

Hizmet Çalışanları&#39;ndan Ağ panelini açma

Chromium sorunu: Yok

Ağ panelinde yeni kopyalama seçenekleri

Özellik değerini kopyala

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.

Özellik değerini kopyalama

Ağ panelinde Başlıklar bölmesini açmak için bir ağ isteğini tıklayın. Aşağıdaki 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, mülk değerini panonuza kopyalamak için Değeri kopyala'yı seçebilirsiniz.

Chromium sorunu: 1132084

Ağı başlatan için yığın izlemeyi kopyala

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

Yığın izlemeyi kopyala

Chromium sorunu: 1139615

Wasm hata ayıklama güncellemeleri

Fareyle üzerine gelindiğinde Wasm değişken değerini önizleme

Bir durak noktasında duraklatılmışken WebAssembly (Wasm) disassembley'sinde fareyle bir değişkenin üzerine geldiğinizde DevTools artık değişkenin geçerli değerini gösterir.

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

Fareyle üzerine geldiğinizde Wasm değişkenini önizleme

Chromium sorunları: 1058836, 1071432

Konsoldaki Wasm değişkenini değerlendirin

Artık bir durak noktasında duraklatılmışken Konsolda Wasm değişkenini değerlendirebilirsiniz.

Bu örnekte, local.get $input satırına bir ayrılma noktası koyduk. Console'da $input yazdığınızda hata ayıklama işlemi yapılır ve değişkenin mevcut değeri döndürülür. Bu durumda, döndürülen değer 4 olur.

Konsoldaki Wasm değişkenini değerlendirin

Chromium sorunu: 1127914

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

DevTools artık dosya/bellek boyutlarını göstermek için tutarlı bir şekilde KB kullanır. Daha önce DevTools'ta kB (1.000 bayt) ve KiB (1.024 bayt) bir arada kullanılıyordu. Örneğin, Ağ panelinde daha önce "kB" etiketleri kullanılıyordu ancak hesaplamalar KiB kullanılarak yapılıyordu. Bu da gereksiz bir kafa karışıklığına neden oluyordu.

Chromium sorunu: 1035309

Nesne panelinde sözde öğeleri vurgulama

DevTools, sözde öğeleri daha iyi tespit etmenize yardımcı olmak için sözde öğelerin renk kontrastını artırdı.

Yapay öğeleri vurgulama

Chromium sorunu: 1143833

Deneysel özellikler

CSS Flexbox hata ayıklama araçları

Flexbox hata ayıklama araçları kullanıma sunuluyor!

Geliştirici Araçları, öncelikle display: flex uygulanmış öğeler için artık Öğeler panelinde flex rozeti gösteriyor.

Bunun yanı sıra aşağıdaki flexbox özelliklerine yeni hizalama simgeleri eklendi:

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

Üstelik, bu simgeler bağlama duyarlıdır. Simge yönü aşağıdakilere göre ayarlanır:

  • flex-direction
  • direction
  • writing-mode

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

CSS Flex hata ayıklama

Flexbox araç özelliklerinin tasarım dokümanı aşağıda verilmiştir. 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

Geliştirici Araçları'na, son sürümden bu yana klavye kısayollarının özelleştirilmesi için deneysel destek eklendi.

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

Ayarlar > Kısayollar'a gidin, fareyle bir komutun üzerine gelin ve akorlar kısayolunu özelleştirmek için Düzenle düğmesini (kalem simgesi) tıklayın.

Akor klavye kısayolları

Chromium sorunu: 174309

Ö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şmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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 özellikleri, güncellemeleri veya Geliştirici Araçları ile ilgili diğer konuları görüşmek 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.