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

Jecelyn Yeen

Kaydedici'de adım adım tekrar oynatma

Artık Kaydedici panelinde bir ayrılma noktası ayarlayabilir ve kullanıcı akışını adım adım tekrar oynatabilirsiniz.

Ayrılma noktası ayarlamak için adımın yanındaki mavi noktayı tıklayın. Kullanıcı akışınızı tekrar oynatın. Adım yürütülmeden önce tekrar oynatma duraklatılır. Buradan tekrar oynatmaya devam edebilir, bir adımı yürütebilir veya tekrarı iptal edebilirsiniz.

Bu özellik sayesinde kullanıcı akışınızı kolayca tam olarak görselleştirebilir ve hata ayıklayabilirsiniz.

Daha fazla bilgi için Kaydedici özellikleri referansı bölümüne bakın.

Kaydedici'de adım adım tekrar oynatma

Chromium sorunu: 1257499

Kaydedici panelinde fareyi etkinliğin üzerine getirme desteği

Kaydedici, artık bir kayıtta fareyle üzerine gelme adımını manuel olarak eklemeyi desteklemektedir.

Bu demoda, fareyle üzerine gelindiğinde bir pop-up menü gösterilmektedir. Kullanıcı işlemleri akışı kaydetmeyi deneyin ve bir menü öğesini tıklayın.

Kaydedici, kayıt sırasında fareyi etkinliklerin üzerine otomatik olarak yakalamayacağından kullanıcı akışını şu anda tekrar oynatırsanız akış başarısız olur. Bu sorunu çözmek için manuel olarak bir adım ekleyerek menü öğesini tıklamadan önce seçicinin üzerine gelin.

Kaydedici'de fareyle etkinliğin üzerine gelmeyi destekleyin

Chromium sorunu: 1257499

Performans analizleri panelindeki Largest Contentful Paint (LCP)

LCP, algılanan yükleme hızını ölçmeyle ilgili önemli ve kullanıcı odaklı bir metriktir. Artık Largest Contentful Paint (LCP) sürecinin kritik yollarını ve kök nedenlerini öğrenebilirsiniz.

Performans kaydında, Zaman Çizelgesi'ndeki LCP rozetini tıklayın. Ayrıntılar bölmesinde LCP puanını görüntüleyebilir, LCP'yi yavaşlatan kaynakları nasıl düzelteceğinizi öğrenebilir ve LCP kaynağının kritik yolunu görebilirsiniz.

Uygulanabilir analizler elde etmeyi ve panelden web sitenizin performansını iyileştirmeyi öğrenmek için Performans Analizleri'ne bakın.

Performans analizleri panelinde LCP

Chromium sorunu: 1326481

Düzen kaymalarının olası temel nedenleri olarak metin yanıp sönmelerini (FOIT, FOUT) tanımlama

Performans analizleri paneli artık düzen kaymalarının olası temel nedeni olarak görünmez metin flash (FOIT) ve biçimlendirilmemiş metnin (FOUT) yanıp söndüğünü algılıyor.

Bir düzen kaymasının olası temel nedenlerini görüntülemek için Düzen kaymaları kanalındaki bir ekran görüntüsünü tıklayın.

Düzen kaymalarını önleme tekniğini öğrenmek için WebFont'un yüklenmesini ve oluşturulmasını optimize etme başlıklı makaleyi inceleyin.

Performans analizleri panelinde FOUT

Chromium sorunları: 1334628, 1328873

Manifest bölmesindeki protokol işleyicileri

Artık Progresif Web Uygulamaları (PWA) için URL protokol işleyici kaydını test etmek amacıyla Geliştirici Araçları'nı kullanabilirsiniz.

URL protokol işleyici kaydı, yüklü PWA'ların daha entegre bir deneyim için belirli bir protokol (ör. magnet, web+example) kullanan bağlantıları işlemesine olanak tanır.

Application (Uygulama) > üzerinden Protokol İşleyicileri (Protokol İşleyicileri) bölümüne gidin Manifest bölmesini açın. Mevcut tüm protokolleri buradan görüntüleyebilir ve test edebilirsiniz.

Örneğin, bu demo PWA'yı yükleyin. Protokol işleyiciler bölümüne "americano" yazın ve Test Protocol'u (Protokol test et) tıklayarak kahve sayfasını PWA'da açın.

Manifest bölmesindeki protokol işleyicileri

Chromium sorunları: 1300613

Nesne panelinde üst katman rozeti

Üst katman kavramını anlamak ve üst katman içeriğinin nasıl değiştiğini görselleştirmek için üst katman rozetini kullanın.

<dialog> öğesi kısa süre önce farklı tarayıcılarda kararlı hale geldi. Açtığınız iletişim kutuları bir en üst katmana yerleştirilir. Üst düzey içerik, diğer tüm içeriklerin üzerinde oluşturulur.

Bu demoda İletişim kutusunu aç'ı tıklayın.

En üst katman öğelerinin görselleştirilmesine yardımcı olmak için Geliştirici Araçları, DOM ağacına bir üst katman kapsayıcısı (#top-layer) ekler. Kapanış </html> etiketinden sonra gelir.

Üst katman kapsayıcı öğesinden üst katman ağaç öğesine atlamak için üst katman kapsayıcıda öğenin veya arka planının yanındaki belirt düğmesini tıklayın.

Üst katman ağaç öğesinin (örneğin, iletişim öğesi) yanındaki üst katman rozetini tıklayarak üst katman kapsayıcısına atlayın.

Nesne panelinde üst katman rozeti

Chromium sorunu: 1313690

Çalışma zamanında Wasm hata ayıklama bilgilerini ekleyin

Artık çalışma zamanı sırasında wasm için DWARF hata ayıklama bilgileri ekleyebilirsiniz. Daha önce, Kaynaklar paneli yalnızca kaynak eşlemelerinin JavaScript ve Wasm dosyalarına eklenmesini destekliyordu.

Kaynaklar panelinde bir Wasm dosyası açın. İsteğe bağlı hata ayıklama bilgilerini eklemek için düzenleyiciyi sağ tıklayıp DWARF hata ayıklama bilgisi ekle... seçeneğini belirleyin.

ALT_TEXT_HERE

Chromium sorunu: 1341255

Hata ayıklama sırasında canlı düzenleme desteği

Artık hata ayıklayıcıyı yeniden başlatmadan gruptaki en üst işlevi düzenleyebilirsiniz.

Geliştirici Araçları, Chrome 104'te yeniden başlat özelliğini geri getirir. Ancak şu anda duraklatılmış olduğunuz işlevi düzenleyemediniz. Geliştiricilerin bir işleve ayrılıp duraklatılmış durumdayken bu işlevi düzenlemesi yaygın bir durumdur.

Bu güncellemeden sonra hata ayıklayıcı, aşağıdaki kısıtlamalarla işlevi otomatik olarak yeniden başlatır:

  • Duraklatılmış durumdayken yalnızca en üstteki işlev düzenlenebilir
  • Yığının daha alt kısımlarında, aynı işlev için yinelenen çağrı yok

hata ayıklama sırasında canlı düzenleme

Chromium sorunu: 1334484

Stiller bölmesinde @scope kurallarını görüntüleyin ve düzenleyin

Artık Stiller bölmesinde CSS @scope kurallarını görüntüleyebilir ve düzenleyebilirsiniz.

Kurallardaki @scope, CSS Geçişli ve Devralma Düzeyi 6 spesifikasyonunun bir parçasıdır. Bu kurallar, geliştiricilerin CSS'de stil kurallarının kapsamını belirlemesine olanak tanır.

Bu demo sayfasını açın ve <div class=”dark-theme”> öğesindeki köprüyü inceleyin. Stiller bölmesinde, @scope kuvvetlerini görüntüleyin. Düzenlemek için kural bildirimini tıklayın.

Stiller bölmesindeki kurallarda @scope

Chromium sorunu: 1337777

Kaynak eşleme iyileştirmeleri

Genel hata ayıklama deneyimini iyileştirmek için kaynak eşlemelerindeki birkaç düzeltmeyi aşağıda bulabilirsiniz:

  • Geliştirici Araçları artık kaynak harita tanımlayıcılarını noktalama işaretleriyle düzgün şekilde çözümliyor. Bazı modern küçültücüler (örneğin, esbuild), tanımlayıcıları birleştiren kaynak haritaları oluşturur ardından gelen noktalama işaretleriyle (virgül, parantez, noktalı virgül).
  • Geliştirici Araçları, artık super çağrısı kullanarak oluşturucular için kaynak harita adlarını çözümliyor. ALT_TEXT_HERE
  • Yinelenen standart URL'ler için kaynak harita URL'sini dizine ekleme sorunu düzeltildi. Daha önce, ayrılma noktaları, kopya standart URL'ler nedeniyle bazı dosyalarda etkinleştirilmiyordu.

Chromium sorunu: 1335338, 1333411

Çeşitli öne çıkan anlar

Bu sürümde yer alan bazı önemli düzeltmeler şunlardır:

  • Uygulama > altındaki tablodan yerel depolama anahtarı/değer çiftini doğru şekilde kaldırın Silindiğinde Local Storage (Yerel Depolama) bölmesi. (1339280)
  • Renk önizlemeleri artık Kaynaklar panelinde CSS dosyaları görüntülenirken doğru şekilde gösteriliyor. Daha önce konumları kaybedilmişti. (1340062)
  • CSS esnek ve ızgara öğeleri, Düzen bölmesinde düzenli olarak ve Öğeler panelinde rozet olarak gösterilir. Daha önce, esnek ve ızgara öğeleri her iki yerde de rastgele eksikti. (1340441, 1273992)
  • Geliştirici Araçları, çerçevenin reklam olarak etiketlenmesine neden olan komut dosyasını bulursa reklam çerçeveleri için yeni bir İçerik Üretici Reklam Komut Dosyası bağlantısı kullanılabilir. Uygulama > üzerinden bir çerçeve açabilirsiniz Çerçeveler. (1217041)

Ö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 Daha fazla > 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.