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

Jecelyn Yeen

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, başlatma sırasında serileştirme, ayrıştırma ve seri dışı bırakma işlemlerinin performans ek yükünü azaltmak için bazı optimizasyonlar yaptı.

Yakında, uygulama sürecinin ayrıntılı bir şekilde açıklandığı bir mühendislik blog yayını olacaktır. Gelişmeler için bizi takip etmeye 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.

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. Geçiş yapmak 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

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

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

Resim türleri emülasyonu

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, farklı cihazları simüle etmenize ve düşük disk kullanılabilirliği durumlarında uygulamalarınızın davranışını test etmenize olanak tanır.

Application (Uygulama) > Storage'a (Depolama alanı) gidin, Simulate custom Storage quota (Özel depolama kotasını simüle et) onay kutusunu işaretleyip 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ükleme performansınızı kaydettikten sonra yeni Web Verileri şeridini görüntülemek için Performans panelindeki Web Vitals onay kutusunu etkinleştirin.

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

Web Vitals metrikleriyle kullanıcı deneyimini nasıl optimize edeceğiniz hakkında daha fazla bilgi edinmek için web.dev/vitals sayfasına göz atın.

Web Verileri şeridi

Chromium sorunu: Yok

Ağ panelinde CORS hatalarını bildirme

Geliştirici Araçları, artık kaynaklar arası kaynak paylaşımı (CORS) nedeniyle 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ı" gösterilir. Fareyle hatanın üzerine gelin. İpucunda artık hata kodu gösterilmektedir. 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

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 Yalıtım 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() ş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ı izolasyon ve SharedArrayBuffers gibi özellikler için neden gerekli olduğu hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.

Kaynaklar arası bilgiler

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ın bulunduğu 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 çalışanlarının bilgileri

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. Nesne panelinde açıcıyı görüntülemek 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çı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.

Application (Uygulama) > Service Workers'a (Hizmet Çalışanları) gidin ve bir yazılımın Network requests (Ağ istekleri) seçeneğini tıklayın. Alt panelde, Service Worker ile ilgili tüm isteklerin gösterildiği Ağ paneli açılır (ağ istekleri "is:service-worker-intercepted" olarak filtrelenir).

Hizmet çalışanlarından Ağ panelini aç

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ıza olanak tanır.

Ö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 Başlıkları 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ı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 önizle

Bir kesme noktasında duraklatılmışken WebAssembly (Wasm) ayırma işleminde fareyle değişkenin üzerine geldiğinizde Geliştirici Araçları artık değişkenin geçerli değerini gösteriyor.

Kaynaklar panelinde bir Wasm dosyası açın, bir ayrılma noktası yerleştirin 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

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 Konsol'a $input yazmak, değişkenin mevcut değerini (bu örnekte 4) döndürür.

Konsoldaki 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 sürekli olarak kB değerini kullanıyor. Önceden Geliştirici Araçları, kB (1.000 bayt) ve KiB (1.024 bayt) karmasını birleştiriyordu. Örneğin, Ağ paneli daha önce "kB" etiketlerini kullanıyordu ancak gerçekte KiB kullanarak hesaplamalar yapıyordu ve bu da gereksiz karışıklığa neden oluyordu.

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

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!

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

CSS Flex hata ayıklama

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 > 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, 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ı'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını 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.

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109 sürümü

Chrome 108 sürümü

Chrome 107 sürümü

Chrome 106

Chrome 105 sürümü

Chrome 104 sürümü

Chrome 103 sürümü

Chrome 102 sürümü

Chrome 101

Chrome 100 sürümü

Chrome 99 sürümü

Chrome 98 sürümü

Chrome 97 sürümü

Chrome 96 sürümü

Chrome 95 sürümü

Chrome 94 sürümü

Chrome 93 sürümü

Chrome 92 sürümü

Chrome 91 sürümü

Chrome 90 sürümü

Chrome 89 sürümü

Chrome 88 sürümü

Chrome 87 sürümü

Chrome 86

Chrome 85 sürümü

Chrome 84

Chrome 83 sürümü

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80 sürümü

Chrome 79 sürümü

Chrome 78 sürümü

Chrome 77

Chrome 76

Chrome 75 sürümü

Chrome 74 sürümü

Chrome 73

Chrome 72 sürümü

Chrome 71

Chrome 70

Chrome 68 sürümü

Chrome 67 sürümü

Chrome 66

Chrome 65 sürümü

Chrome 64 sürümü

Chrome 63 sürümü

Chrome 62 sürümü

Chrome 61 sürümü

Chrome 60 sürümü

Chrome 59 sürümü