Bu sayfa, Cloud Translation API ile çevrilmiştir.

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ı belirleyebilir ve bir kullanıcı akışını adım adım yeniden oynatabilirsiniz.

Ayrılma noktası ayarlamak için adımın yanındaki mavi noktayı tıklayın. Kullanıcı akışınızı yeniden 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ı işlemleri akışınızı tamamen görselleştirebilir ve hata ayıklayabilirsiniz.

Daha fazla bilgi için Kaydedici özellikleri referansı başlıklı makaleye bakın.

Kaydedici'de adım adım tekrar oynatma

Chromium sorunu: 1257499

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

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

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

Kullanıcı işlemleri akışını şimdi yeniden oynatırsanız Kaydedici, kayıt sırasında fareyle etkinliklerin üzerine gelme işlemlerini otomatik olarak kaydetmeyeceğinden işlem başarısız olur. Bu sorunu çözmek için manuel olarak bir adım ekleyerek menü öğesini tıklamadan önce fareyle seçicinin üzerine gelin.

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çmek için önemli ve kullanıcı merkezli bir metriktir. Artık Largest Contentful Paint (LCP) işlemlerinin kritik yollarını ve temel 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ın nasıl düzeltileceğini öğrenebilir ve LCP kaynağı için kritik yolu görebilirsiniz.

Harekete geçirici analizlere nasıl ulaşabileceğinizi ve panelle web sitenizin performansını nasıl artırabileceğinizi öğrenmek için Performans Analizleri'ne göz atı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 nedenleri olarak görünmez metin yanıp sönme (FOIT) ve biçimlendirilmemiş metin yanıp sönme (FOUT) olduğunu algılıyor.

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üklemesini ve oluşturmayı optimize etme bölümüne bakın.

Performans analizleri panelinde FOUT

Chromium sorunları: 1334628, 1328873

Manifest bölmesindeki protokol işleyicileri

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

URL protokol işleyici kaydı, yüklü PWA'ların belirli bir protokolü (ör. magnet, web+example) kullanan bağlantıları daha entegre bir deneyimle işlemesini sağlar.

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

Örneğin, bu PWA demosunu yükleyin. Protokol İşleyiciler bölümünde "americano" yazın ve Test protokolü'nü 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 bir süre önce tüm tarayıcılarda kararlı hale geldi. Bir iletişim kutusunu açtığınızda 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.

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

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

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

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 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. Düzenleyiciyi sağ tıklayın ve istek üzerine hata ayıklama bilgileri eklemek için DWARF hata ayıklama bilgileri 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 üstteki işlevi düzenleyebilirsiniz.

Geliştirici Araçları, Chrome 104'te çerçeveyi yeniden başlat özelliğini geri getiriyor. Ancak duraklatılmış olduğunuz işlevi düzenleyemediniz. Geliştiricilerin bir işleve ara vermesi ve ardından duraklatıldığında işlevi düzenlemesi yaygın bir durumdur.

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

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

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

Chromium sorunu: 1334484

Stiller bölmesinde @scope'u kurallarda görüntüleyin ve düzenleyin

Artık CSS @scope kurallarını Stiller bölmesinde 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 kuyruklarını görüntüleyin. Düzenlemek için kural bildirimini tıklayın.

Not: CSS @scope şu anda geliştirme aşamasındadır. Bu özelliği test etmek için chrome://flags/#enable-experimental-web-platform-features üzerinden Deneysel Web Platformu özellikleri işaretini etkinleştirin.

Stiller bölmesinde @scope at kuralları

Chromium sorunu: 1337777

Kaynak eşlemesi iyileştirmeleri

Aşağıda, genel hata ayıklama deneyimini iyileştirmek için kaynak eşlemeleriyle ilgili birkaç düzeltme sunulmuştur:

Geliştirici Araçları artık kaynak eşleme tanımlayıcılarını noktalama işaretleriyle doğru şekilde çözüyor. Bazı modern küçültücüler (örneğin, esbuild), tanımlayıcıları sonraki noktalama işaretleriyle (virgül, parantez, noktalı virgül) birleştiren kaynak eşlemeleri oluşturur.
Geliştirici Araçları, artık kurucular için kaynak eşleme adlarını super çağrısıyla çözümliyor.
Yinelenen standart URL'ler için kaynak eşleme URL'sini dizine ekleme sorunu düzeltildi. Önceden, ayrılma noktaları kopya standart URL'ler nedeniyle bazı dosyalarda etkinleştirilmiyordu.

Chromium sorunu: 1335338, 1333411

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler şunlardır:

Silinen bir yerel depolama anahtarı değer çiftini Uygulama > Yerel Depolama bölmesindeki tablodan düzgün bir şekilde kaldırın. (1339280)
Renk önizlemeleri artık Kaynaklar panelinde CSS dosyaları görüntülenirken doğru şekilde gösterilmektedir. Daha önce konumları yanlış yerleştirilmişti. (1340062)
CSS esnek ve ızgara öğelerini, Düzen bölmesinde ve Öğeler panelinde rozet olarak tutarlı bir şekilde görüntüleyin. Daha önce esnek ve ızgara öğeleri iki yerde de rastgele eksikti. (1340441, 1273992)
Geliştirici Araçları, karenin 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. Bir çerçeveyi Uygulama > Çerçeveler aracılığıyla açabilirsiniz. (1217041)

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