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ı artık JavaScript derleme açısından yaklaşık% 37 daha hızlı (6,9 saniyeden 5 saniyeye düştü)! 🎉

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)), Stil bölmesindeki 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 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 alanı bölmesinde depolama alanı kotası boyutunu simüle etme

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

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 Vitals bilgilerini görüntüleme seçeneği mevcuttur.

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 DevTools, CORS hataları için yalnızca genel "(failed)" durumunu gösteriyordu.

Bu, CORS sorunlarının daha ayrıntılı bir açıklamasını sunma konusunda yapacağımız sonraki geliştirmelerin temelini oluşturuyor.

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 kullanımdan kaldırılma 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 işçileri hakkında bilgi

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 sayede geliştiriciler, donanım yazılımında hata ayıklama yaparken ek bağlam bilgisine sahip olur.

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 İşleyiciler&#39;den Ağ panelini açma

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.

Özellik değerini kopyalama

Ağ panelinde bir ağ isteğini tıklayarak Başlıklar bölmesini açı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şlatıcısı için yığın izini kopyalama

Bir ağ isteğini sağ tıklayın ve Yığın izlemeyi kopyala'yı seçerek yığın izlemeyi panosuna kopyalayın.

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) disassembleyinde 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 gelindiğinde Wasm değişkenini önizleme

Chromium sorunları: 1058836, 1071432

Konsol'da Wasm değişkenini değerlendirme

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

Konsol&#39;da Wasm değişkenini değerlendirme

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

Geliştirici Araçları, 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

Öncelikle, DevTools artık display: flex uygulanmış öğeler için Nesneler 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

Ayrıca 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

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.

Akor kısayolunu özelleştirmek için Ayarlar > Kısayollar'a gidin, fareyle bir komutun üzerine gelin ve 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ş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.