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

Jecelyn Yeen

Kaydedici'de adım adım yeniden oynatma

Artık Kaydedici panelinde bir kesme noktası ayarlayabilir ve kullanıcı akışını adım adım yeniden oynatabilirsiniz.

Kesme noktası ayarlamak için bir adımın yanındaki mavi noktayı tıklayın. Kullanıcı akışınızı yeniden oynatın. Yeniden oynatma, adım yürütülmeden önce duraklatılır. Buradan tekrarı devam ettirebilir, bir adımı uygulayabilir veya tekrarı iptal edebilirsiniz.

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

Daha fazla bilgi için Kaydedici özellikleri referansı başlıklı makaleyi inceleyin.

Kaydedici'de adım adım yeniden oynatma

Chromium sorunu: 1257499

Kaydedici panelinde fareyle üzerine gelme etkinliği desteği

Kaydedici artık kayda manuel olarak fareyle üzerine gelme (hover) adımı eklemeyi destekliyor.

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

Kullanıcı akışını şimdi tekrar oynatırsanız Kaydedici, kayıt sırasında fareyle üzerine gelme etkinliklerini otomatik olarak yakalamadığından akış başarısız olur. Bu sorunu çözmek için menü öğesini tıklamadan önce seçicinin üzerine gelmek üzere manuel olarak bir adım ekleyin.

Kaydedici'de fareyle üzerine gelme etkinliği desteği

Chromium sorunu: 1257499

Performans analizleri panelinde Largest Contentful Paint (LCP)

LCP, algılanan yükleme hızını ölçme konusunda önemli ve kullanıcı merkezli bir metriktir. Artık Largest Contentful Paint (LCP) ile ilgili kritik yolları ve temel nedenleri öğ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.

İşleme dönüştürülebilir analizler elde etmeyi ve paneli kullanarak web sitenizin performansını artırmayı öğrenmek için Performans Analizleri'ne bakın.

Performans analizleri panelinde LCP

Chromium sorunu: 1326481

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

Performans analizleri paneli artık görünmez metin parlaması (FOIT) ve biçimlendirilmemiş metin parlamasını (FOUT) düzen kaymalarının olası temel nedenleri olarak algılıyor.

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

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

Performans analizleri panelindeki 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 üzere Geliştirici Araçları'nı kullanabilirsiniz.

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

Application (Uygulama) > Manifest (Manifest) bölmesinden Protocol Handlers (Protokol İşleyicileri) bölümüne gidin. Kullanılabilir tüm protokolleri burada görüntüleyebilir ve test edebilirsiniz.

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

Manifest bölmesindeki protokol işleyicileri

Chromium sorunları: 1300613

Nesne panelindeki üst katman rozeti

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

<dialog> öğesi, son zamanlarda tarayıcılarda kararlı hale geldi. Açtığınız iletişim kutuları en üst katmana yerleştirilir. En üst düzey içerik, diğer tüm içeriklerin üzerinde oluşturulur.

Bu demoda Open dialog'u (İletişim kutusunu aç) tıklayın.

Geliştirme Araçları, üst katman öğelerini görselleştirmeye yardımcı olmak için DOM ağacına bir üst katman kapsayıcısı (#top-layer) ekler. Kapatma </html> etiketinden sonra yer alır.

En üst katman kapsayıcı öğesinden en üst katman ağacı öğesine atlamak için en üst katman kapsayıcısında öğenin veya arka planının yanındaki göster düğmesini tıklayın.

Üst katman ağacı öğesinin (ör. iletişim kutusu öğesi) yanındaki top-layer rozetini tıklayarak üst katman kapsayıcısına gidin.

Nesne panelindeki üst katman rozeti

Chromium sorunu: 1313690

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

Artık çalışma zamanında wasm için DWARF hata ayıklama bilgilerini ekleyebilirsiniz. Daha önce Kaynaklar paneli yalnızca JavaScript ve Wasm dosyalarına kaynak eşleşmeleri eklemeyi destekliyordu.

Kaynaklar panelinde bir Wasm dosyası açın. İsteğe bağlı olarak hata ayıklama bilgileri eklemek için düzenleyiciyi sağ tıklayın ve Add DWARF debugging info… (DWARF hata ayıklama bilgilerini 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 yığındaki en üst işlevi düzenleyebilirsiniz.

Geliştirici Araçları, Chrome 104'te çerçeveyi yeniden başlatma özelliğini geri getiriyor. Ancak şu anda duraklattığınız işlevi düzenleyemezsiniz. Geliştiriciler genellikle bir işlevde kesme noktası oluşturur ve ardından duraklatılmış durumdayken bu işlevi düzenler.

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

  • Duraklatılmış durumdayken yalnızca en üstteki işlev düzenlenebilir.
  • Yığının daha aşağısında aynı işlevde yinelenen çağrı yok

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

Chromium sorunu: 1334484

Stiller bölmesindeki kurallarda @scope'u görüntüleme ve düzenleme

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

@scope @ kuralları, CSS Cascading and Inheritance Level 6 spesifikasyonunun bir parçasıdır. Bu kurallar, geliştiricilerin CSS'deki stil kurallarını kapsamlandırmasına olanak tanır.

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

Stiller bölmesindeki @scope kuralları

Chromium sorunu: 1337777

Kaynak eşleme iyileştirmeleri

Genel hata ayıklama deneyimini iyileştirmek için kaynak haritalarıyla ilgili birkaç düzeltme aşağıda verilmiştir:

  • Geliştirici Araçları artık noktalama işaretleri içeren kaynak eşleme tanımlayıcılarını düzgün şekilde çözüyor. Bazı modern küçültücüler (ör. esbuild), tanımlayıcıları sonraki noktalama işaretleriyle (virgül, parantez, noktalı virgül) birleştiren kaynak haritaları oluşturur.
  • Geliştirici Araçları artık super çağrısı olan oluşturucular için kaynak eşleme adlarını çözümlüyor. ALT_TEXT_HERE
  • Kopya standart URL'ler için kaynak haritası URL'si dizine ekleme sorunu düzeltildi. Daha önce, kopya standart URL'ler nedeniyle bazı dosyalarda kesme noktaları etkinleştirilmiyordu.

Chromium sorunu: 1335338, 1333411

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmelerden bazıları şunlardır:

  • Silindiğinde Application (Uygulama) > Local Storage (Yerel Depolama) bölmesindeki tablodan yerel depolama anahtarı/değer çiftini düzgün şekilde kaldırın. (1339280)
  • Kaynaklar panelinde CSS dosyaları görüntülenirken renk önizlemeleri artık doğru şekilde gösteriliyor. Daha önce bu öğelerin konumları yanlış yerleştirilmişti. (1340062)
  • CSS esnek ve ızgara öğelerini Düzen bölmesinde tutarlı bir şekilde gösterin ve Öğeler panelinde rozet olarak görüntüleyin. Daha önce, esnek ve ızgara öğeleri her iki yerde de rastgele olarak 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 Creator Ad Script bağlantısı kullanılabilir. Uygulama > Çerçeveler'i kullanarak bir çerçeve açabilirsiniz. (1217041)

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

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