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

Jecelyn Yeen

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

DevTools kurulumu artık JavaScript derlemesi açısından (6,9 sn. - 5 sn.) yaklaşık% 37 daha hızlı. 🎉

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

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

Chromium sorunu: 1029427

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

DevTools artık CSS açısı hata ayıklamayı daha iyi desteklemektedir.

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ölmesindeki açının yanında bir saat simgesi gösterilir. Saat yer paylaşımını açmak/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ürleri emülasyonu

DevTools, 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ştirmek zorunda kalmadan farklı resim yükleme senaryolarını test etmelerini kolaylaştırır.

Yeni tarayıcılar için AVIF ve WebP'de bir resim, eski tarayıcılar içinse bir yedek PNG resmi sunmak ü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 görüntü biçimini devre dışı bırak"ı seçin ve sayfayı yenileyin. img src öğesinin üzerine gelin. Geçerli resim src (currentSrc) artık yedek WebP resmidir.

Resim türleri emülasyonu

Chromium sorunu: 1130556

Storage bölmesinde depolama alanı kota boyutunu simüle et

Artık Depolama bölmesindeki depolama alanı kotası boyutunu geçersiz kılabilirsiniz. Bu özellik sayesinde farklı cihazları simüle edebilir ve düşük disk kullanılabilirliği senaryolarında uygulamalarınızın davranışını test edebilirsiniz.

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ı kota boyutunu simüle et

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ük performansınızı kaydettikten sonra yeni Web Verileri şeridini görüntülemek için Performans panelindeki Web Verileri onay kutusunu etkinleştirin.

Şeritte şu anda First Contentful Paint (FCP), Largest Contentful Paint (LCP) ve Layout Shift (LS) gibi Web Verileri bilgileri gösterilir.

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

Web Verileri şeridi

Chromium sorunu: Yok

Ağ panelindeki CORS hatalarını bildirme

Geliştirici Araçları, artık kaynaklar 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 CORS ağ isteğini gözlemleyin. Durum sütununda "CORS hatası" ifadesi gösterilir. Fareyle hatanın üzerine gelin. Artık ipucunda hata kodu gösteriliyor. Geliştirici Araçları daha önce CORS hataları için yalnızca genel "(failed)" durumunu gösteriyordu.

Bu, CORS sorunlarının daha ayrıntılı açıklamasını sağlama konusunda gerçekleştireceğimiz sonraki geliştirmelerin temelini oluşturur!

CORS hataları

Chromium sorunu: 1141824

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

Çerçeve ayrıntıları görünümündeki çapraz kaynak izolasyonu bilgileri

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

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

SAB ve postMessage() kullanılabilir durumda olmasına rağmen bağlam kökler arası erişime kapalı değilse bir kullanımdan kaldırma uyarısı gösterilir. Kaynaklar arası izolasyon ve SharedArrayBuffers gibi özellikler için neden gerekli olacağı hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.

Çapraz kaynak bilgileri

Chromium sorunu: 1139899

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

DevTools artık özel web çalışanlarını oluşturan çerçevenin altında gösteriliyor.

Uygulama panelinde web çalışanlarını içeren bir çerçeveyi genişletin, ardından Çalışanlar ağacı altında bir çalışan seçerek web çalışanının ayrıntılarını görüntüleyin.

Web işçileri bilgileri

Chromium sorunları: 1122507, 1051466

Açık pencereler için açılış çerçevesi ayrıntılarını görüntüleyin

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

Açılış çerçevesi ayrıntıları

Chromium sorunu: 1107766

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

Yeni Ağ istekleri bağlantısını kullanarak tüm hizmet çalışanı (SW) isteği yönlendirme bilgilerini görüntüleyin. Bu, geliştiricilere SW'da hata ayıklarken ek bilgiler sağlar.

Uygulama > Hizmet Çalışanları bölümüne gidin ve bir SW'nun Ağ istekleri'ni tıklayın. Ağ paneli, alt panelde açılır ve Service Worker'la ilgili tüm istekleri gösterir (ağ istekleri "is:service-worker-intercepted" ölçütüne göre filtrelenir).

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

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ğ isteğinin özellik değerini kopyalamanızı sağlar.

Özellik değerini kopyala

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

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

Chromium sorunu: 1132084

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

Bir ağ isteğini sağ tıklayın, ardından Yığın izlemeyi kopyala'yı seçerek yığın izlemeyi panonuza 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 önizle

DevTools artık bir ayrılma noktasında duraklatılmışken WebAssembly (Wasm) sökme işleminde bir değişkenin üzerine geldiğinizde değişkenin geçerli değerini gösteriyor.

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

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

Chromium sorunları: 1058836, 1071432

Console'da Wasm değişkenini değerlendirin

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

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

Console&#39;da Wasm değişkenini değerlendirin

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 tutarlı olarak kB kullanıyor. DevTools daha önce kB (1.000 bayt) ve KiB'yi (1.024 bayt) karma olarak kullanıyordu. Örneğin, Ağ paneli daha önce "kB" etiketlerini kullanıyordu ancak aslında hesaplamalar KiB'den yapılmış ve bu da gereksiz karışıklığa yol açmıştı.

Chromium sorunu: 1035309

Nesne panelinde sözde öğeleri vurgulama

DevTools, yapay öğeleri daha iyi tespit edebilmeniz için bu öğelerin renk kontrastını artırdı.

Sözde öğeleri vurgula

Chromium sorunu: 1143833

Deneysel özellikler

CSS Flexbox hata ayıklama araçları

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

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

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ı. Simge yönü aşağıdakilere göre ayarlanır:

  • flex-direction
  • direction
  • writing-mode

Bu simgelerin amacı, sayfanın flexbox düzenini daha iyi görselleştirmenize yardımcı olur.

CSS Flex hata ayıklaması

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

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

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

Artık kısayol düzenleyicide akorlar (birden fazla tuşa basma kısayolları olarak da bilinir) 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.

Akorlar 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'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

  • crbug.com adresinden öneri veya geri bildirim gönderin.
  • Geliştirici Araçları'nda, Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
  • @ChromeDevTools adresine tweet gönderin.
  • Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.

Geliştirici Araçları'ndaki Yenilikler

DevTools'daki Yenilikler serisinde ele alınan her şeyin listesi.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59