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

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

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, serileştirme, ayrıştırma ve ayırma işlemlerinin performans ek yükünü azaltmak için bazı optimizasyonlar yaptı. serileştirmeye tabi tutulur.

Yakında, uygulama sürecinin ayrıntılı bir şekilde açıklandığı bir mühendislik blog yayını olacaktır. Bizi izlemeye devam edin!

Chromium sorunu: 1029427

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

Geliştirici Araçları artık CSS açısıyla hata ayıklamayı daha iyi destekliyor.

Sayfanızdaki bir HTML öğesine CSS açısı uygulandığında (ör. background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), bir saat simgesi, Stiller bölmesinde açının yanında gösterilir. Saati değiştirmek için saat simgesini tıklayın kullanabilirsiniz. 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 de fare ve klavye kısayollarından yararlanabilirsiniz. dokümanlarını inceleyebilirsiniz.

Chromium sorunları: 1126178, 1138633

Desteklenmeyen resim türleri emülasyonu

Geliştirici Araçları, Oluşturma sekmesine iki yeni emülasyon ekleyerek AVIF ve WebP görüntüsünü devre dışı bırakmanıza olanak tanır biçimlerinden biridir. Bu yeni emülasyonlar, geliştiricilerin farklı resim yüklemelerini test etmesini kolaylaştırır ve tarayıcı değiştirmek zorunda kalmadan kullanabileceğiniz senaryolar.

Yeni tarayıcılar için AVIF ve WebP'de bir resim sunmak üzere aşağıdaki HTML koduna sahip olduğumuzu varsayalım: eski tarayıcılar için yedek bir PNG resmi.

<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 ve "AVIF resim biçimini devre dışı bırak"ı seçin ve sayfayı yenileyin. Fareyle img src Geçerli resim src (currentSrc) artık yedek WebP resmidir.

Chromium sorunu: 1130556

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

Artık Depolama bölmesinde depolama alanı kotası boyutunu geçersiz kılabilirsiniz. Bu özellik ile şunları yapabilirsiniz: farklı cihazları simüle edebilir ve disk kullanılabilirliğinin düşük olduğu durumlarda uygulamalarınızın davranışını test edebilirsiniz.

Uygulama'ya gidin > Depolama alanı'nın altında bulunan Özel depolama kotasını simüle et onay kutusunu işaretleyin ve depolama alanı kotasını simüle etmek için geçerli herhangi bir sayı girin.

Chromium sorunları: 945786, 1146985

Performans paneli kayıtlarında yeni Web Verileri ş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 Performans panelindeki Web Vitals onay kutusunu etkinleştirin tıklayın.

Şerit şu anda First Contentful Paint (FCP) gibi Web Verileri bilgilerini gösteriyor. Largest Contentful Paint (LCP) ve Layout Shift (LS).

Web'de kullanıcı deneyimini optimize etme hakkında daha fazla bilgi edinmek için web.dev/vitals sayfasına göz atın Vitals metrikleri.

Chromium sorunu: Yok

Ağ panelinde CORS hatalarını bildirme

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

Ağ panelinde başarısız CORS ağ isteğini gözlemleyin. Durum sütununda "CORS hatası" olarak adlandırılır. Fareyle hatanın üzerine gelin. İpucunda artık hata kodu gösterilmektedir. Önceden yalnızca Geliştirici Araçları CORS hataları için genel "(failed)" durumu gösterildi.

Bu, anahtar kelimelere ilişkin daha ayrıntılı açıklama sunmakla ilgili yapacağımız geliştirmelerin temelini CORS sorunları!

Chromium sorunu: 1141824

Kare ayrıntıları görünümü güncellemeleri

Çerçeve ayrıntıları görünümünde kaynaklar arası izolasyon bilgileri

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

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

SAB ve postMessage() şu anda mevcutsa bir kullanımdan kaldırma uyarısı gösterilir, ancak bağlam, kökler arası erişime kapalı değil. Kökler arası izolasyon ve bunun neden olacağı hakkında daha fazla bilgi Bu makalede bulunan SharedArrayBuffers gibi özellikler için gereklidir.

Chromium sorunu: 1139899

Çerçeve ayrıntıları görünümündeki yeni web işçileri bilgileri

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

Uygulama panelinde web çalışanlarını içeren bir çerçeveyi genişletin, ardından Web çalışanı ayrıntılarını görmek için Çalışanlar ağacı.

Chromium sorunları: 1122507, 1051466

Açık pencereler için açıcı çerçevesi ayrıntılarını göster

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ı altında açık bir pencereyi seçin. Açıcı düğmesini tıklayın Çerçeve bağlantısını tıklayın.

Chromium sorunu: 1107766

Hizmet Çalışanları bölmesinden Ağ panelini açın

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

Uygulama'ya gidin > Service Workers'ın (Hizmet Çalışanları), bir yazılımın Ağ istekleri'ni tıklayın. İlgili içeriği oluşturmak için kullanılan Alt panelde Ağ paneli açılarak Service Worker'la ilgili tüm istekler ( ağ istekleri "is:service-worker-intercepted" temelinde filtrelenir.

Chromium sorunu: Yok

Ağ panelindeki yeni kopyalama seçenekleri

Özellik değerini kopyala

İçerik menüsündeki yeni "Değeri kopyala" seçeneği, bir ağın mülk değerini kopyalamanıza olanak tanır. isteğinde bulunabilirsiniz.

Ağ panelinde Başlıklar bölmesini açmak için bir ağ isteğini tıklayın. Sağ tıkla şu bölümdeki özelliklerden biri: İstek yükü (JSON) Form Veri Sorgu Dizesi Parametreleri İstek Üstbilgileri Yanıt Başlıkları

Ardından, Değeri kopyala'yı seçerek özellik değerini panonuza kopyalayabilirsiniz.

Chromium sorunu: 1132084

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

Bir ağ isteğini sağ tıklayıp Yığın izlemeyi kopyala öğesini seçerek yığın izlemeyi panoya ekleyebilirsiniz.

Chromium sorunu: 1139615

Wasm hata ayıklama güncellemeleri

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

Bir ayrılma noktasında duraklatılmış durumdayken WebAssembly (Wasm) sökümü sırasında fareyle değişkenin üzerine geldiğinizde Geliştirici Araçları artık değişkenin geçerli değerini gösterir.

Kaynaklar panelinde bir Wasm dosyası açın, bir ayrılma noktası yerleştirin ve sayfayı yenileyin. Fareyle bir değişkenini kullanabilirsiniz.

Chromium sorunları: 1058836, 1071432

Konsoldaki Wasm değişkenini değerlendirin

Artık bir ayrılma noktasında duraklatılmış durumdayken Wasm değişkenini Console'da değerlendirebilirsiniz.

Bu örnekte, local.get $input satırına bir ayrılma noktası koyduk. Hata ayıklama sırasında $input yazın değeri, değişkenin mevcut değerini (bu örnekte 4) döndürür.

Chromium sorunu: 1127914

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

Geliştirici Araçları artık dosya/bellek boyutlarını görüntülemek için sürekli olarak kB değerini kullanıyor. Önceden Geliştirici Araçları karma kB (1.000 bayt) ve KiB (1.024 bayt). Örneğin, ağ paneli daha önce "kB" kullanıyordu etiketler ama KiB kullanarak hesaplamalar yapmıştır ve bu da gereksiz karışıklıklara yol açmıştır.

Chromium sorunu: 1035309

Öğeler panelindeki sözde öğeleri vurgulayın

Geliştirici Araçları, yapay öğelerin daha iyi ayırt edilebilmesi için renk kontrastını artırdı.

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 şu öğelere sahip öğeler için artık Öğeler panelinde flex rozeti gösteriyor: display: flex uygulandı.

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

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

Üstelik, bu simgeler bağlama duyarlıdır. Simgenin 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ştirmenizi amaçlar.

Flexbox araç özelliklerinin tasarım dokümanını burada bulabilirsiniz. Yakında daha fazla özellik eklenecektir.

Deneyin ve düşüncelerinizi bizimle paylaşın.

Chromium sorunları: 1144090, 1139945

Akort 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 (çoklu tuşlara basma kısayolları) oluşturabilirsiniz.

Ayarlar'a gidin > Kısayollar: Fareyle bir komutun üzerine gelip Düzenle düğmesini (kalem simgesi) tıklayın kullanarak akorlar 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ı 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ı sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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