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

Jecelyn Yeen

Kaydedici'de adım adım oynatma

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

Bir kesme noktası ayarlamak için adımın yanındaki mavi noktayı tıklayın. Kullanıcı akışınızı yeniden oynatın. Yeniden oynatma, adımı uygulamadan önce duraklatılır. Buradan, yeniden oynatmaya devam edebilir, bir adımı yürütebilir veya yeniden oynatmayı iptal edebilirsiniz.

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

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

Kaydedici'de adım adım oynatma

Chromium sorunu: 1257499

Kaydedici panelinde fareyle üzerine gelme etkinliğini destekleme

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

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

Kullanıcı akışını şimdi oynatırsanız Kaydedici, kayıt sırasında fareyle üzerine gelme etkinliklerini otomatik olarak yakalamadığı için işlem başarısız olur. Bu sorunu çözmek için menü öğesini tıklamadan önce seçicinin üzerine gelerek 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)'nin kritik yollarını ve temel nedenlerini öğrenebilirsiniz.

Performans kaydında zaman çizelgesinde 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.

Paneli kullanarak nasıl işlem yapılabilir analizler elde edebileceğinizi ve web sitenizin performansını nasıl iyileştirebileceğinizi öğrenmek için Performans Analizleri başlıklı makaleyi inceleyin.

Performans analizleri panelinde LCP

Chromium sorunu: 1326481

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

Performans analizleri paneli artık düzen kaymalarının olası temel nedenleri olarak görünmez metnin yanıp sönmesi (FOIT) ve biçimlendirilmemiş metnin yanıp sönmesi (FOUT)'ni algılar.

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 yükleme ve oluşturma işlemini optimize etme başlıklı makaleyi inceleyin.

Performans analizleri panelinde FOUT

Chromium sorunları: 1334628, 1328873

Manifest bölmesinde 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 daha entegre bir deneyim için belirli bir protokolü (ör. magnet, web+example) kullanan bağlantıları işlemesine olanak tanır.

Uygulama > Manifest bölmesinden Protokol işleyicileri bölümüne gidin. Mevcut tüm protokolleri burada görüntüleyebilir ve test edebilirsiniz.

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

Manifest bölmesinde protokol işleyicileri

Chromium sorunları: 1300613

Nesne panelindeki ü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 yakın zamanda tarayıcılarda kararlı hale geldi. Açtığınız iletişim kutuları üst katmana yerleştirilir. Üst düzey içerik, diğer tüm içeriklerin üzerine oluşturulur.

Bu demoda İ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ı (#top-layer) ekler. Kapanış </html> etiketinden sonra bulunur.

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

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

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 kaynak eşlemelerinin JavaScript ve Wasm dosyalarına eklenmesini destekliyordu.

Kaynaklar panelinde bir Wasm dosyası açın. İsteğe bağlı olarak hata ayıklama bilgilerini eklemek için düzenleyiciyi sağ tıklayın ve DWARF hata ayıklama bilgisi ekle…'yi seçin.

ALT_TEXT_HERE

Chromium sorunu: 1341255

Hata ayıklama sırasında canlı düzenlemeyi destekleme

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

Chrome 104'te DevTools, çerçeveyi yeniden başlat özelliğini geri getiriyor. Ancak şu anda duraklattığınız işlevi düzenleyemezsiniz. Geliştiricilerin bir işlevi duraklatıp duraklatılmış durumdayken düzenlemesi yaygın bir durumdur.

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

  • Duraklatılmışken yalnızca en üst işlev düzenlenebilir
  • Yığının daha alt kısmında aynı işlev için yinelenen çağrı olmaması

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

Chromium sorunu: 1334484

Stil bölmesinde @scope at kurallarını görüntüleme ve düzenleme

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

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

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

Stiller bölmesinde @scope at kuralları

Chromium sorunu: 1337777

Kaynak harita iyileştirmeleri

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

  • Geliştirici Araçları artık kaynak eşleme tanımlayıcılarını noktalama işaretleriyle düzgün şekilde çözmektedir. Bazı modern sıkıştırıcılar (ö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ı içeren kurucuların kaynak haritası adlarını çözmektedir. ALT_TEXT_HERE
  • Kopya standart URL'ler için kaynak haritası URL dizine ekleme sorunu düzeltildi. Daha önce, kopya standart URL'ler nedeniyle bazı dosyalarda kesme noktaları etkinleştirilmiyordu.

Chromium sorunu: 1335338, 1333411

Diğer öne çıkan özellikler

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

  • Silinen yerel depolama alanı anahtar/değer çiftini Uygulama > Yerel Depolama bölmesinde tablodan uygun şekilde kaldırın. (1339280)
  • CSS dosyaları Kaynaklar panelinde görüntülenirken renk önizlemeleri artık doğru şekilde gösteriliyor. Daha önce, konumları yanlış yerleştirilmişti. (1340062)
  • CSS esnek ve ızgara öğelerini Düzen bölmesinde tutarlı bir şekilde ve Öğeler panelinde rozet olarak gösterin. Daha önce, esnek ve ızgara öğeleri her iki yerde de rastgele eksikti. (1340441, 1273992)
  • DevTools, çerçevenin reklam olarak etiketlenmesine neden olan komut dosyasını bulursa reklam çerçeveleri için yeni bir Creator Reklam Komut Dosyası bağlantısı kullanılabilir. Uygulama > Çerçeveler'i kullanarak çerçeve açabilirsiniz. (1217041)

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.