DevTools'un yeni kaydırma rozeti sayesinde kaydırmayla ilgili sorunları düzeltmek artık daha kolay. Bu yayında, kaydırılabilir öğelerin ne olduğu, neden bulunaksız olabileceği ve bu yeni özelliğin bunları hızlıca bulmanıza nasıl yardımcı olduğu açıklanmaktadır. Ayrıca, kaydırma rozetini nasıl geliştirdiğimizi görmek için sizi perde arkasına götüreceğiz.
Kaydırılabilen öğe nedir?
Bir öğenin içindeki içeriği kaydırabiliyorsanız bu öğe kaydırılabilir bir öğedir (veya kaydırma kapsayıcısı). Kaydırma çubuklarının olup olmaması önemli değildir.
Kaydırılabilir öğeyi bulmak neden zor?
Kaydırma sorunlarını ayıklamak zordur. Kaydırılabilir öğeyi net bir şekilde gösteren bir araç olmadan, özellikle kaydırma çubuklarının olmadığı karmaşık sayfalarda kaybolmak kolaydır.
Kaydıran öğeyi manuel olarak bulmak, deneme yanılma yöntemiyle yapılan sıkıcı bir işlem olabilir:
- Bir öğe seçip stillerini değiştirirsiniz.
- Kaydırma çubuğu kayboldu mu? Aksi takdirde işlemi tekrarlayın.
Kaydırma rozeti kullanıma sunuldu
Chrome 130'ta, kaydırılabilir öğeleri bulmak için Öğeler panelindeki yeni kaydırma rozetini kullanabilirsiniz.
Örneğin, yeni kaydırma rozetini kullanarak aşağıdaki örnekte kaydırma çubuklarının görünmesine neden olan öğeyi bulmaya çalışın.
Yeni kaydırma rozetinin teknik uygulaması
Uygulama, sahne arkasında iki bölüme ayrılır:
- Kaydırılabilir öğeleri belirleme. Kaydırılabilir veya sayfada yapılan bir değişiklik nedeniyle kaydırılabilir hale gelen öğeleri belirlemek için
Blink’s(Chrome'un oluşturma motoru) sinyallerini kullanın. - Kaydırma rozetini gösterme. Sinyaller alındıktan sonra Öğeler panelindeki kaydırılabilir öğelerin yanına yeni bir rozet (mevcut ızgara rozetlerine benzer) ekleriz.
Kaydırılabilir öğeleri tanımlama
Kaydırılabilir öğeleri belirlemek için Blink'teki IsUserScrollable yöntemini kullandık. Bu yöntem, bir düğümün X veya Y ekseni boyunca taşıp taşmadığını kontrol ederek düğümün kaydırılabilir olup olmadığını belirler. Bu da içeriğin kapsayıcı boyutlarını aştığını ve kaydırılabilir olduğunu gösterir. Kaydırılabilir kapsayıcıları tanımlamak için DevTools'a her yeni öğe yüklendiğinde bu yöntemi çağırırız.
Halihazırda yüklü öğelerin kaydırılabilirlik durumunu dinamik olarak güncellemek için bir düğümün kaydırılabilir alanının nereye eklendiğini veya kaldırıldığını izlemek üzere Blink oluşturma motoru kod tabanına derinlemesine dalmamız gerekiyordu.
Taşmayı işleyen temel mantık, PaintLayerScrollableArea bileşeni tarafından yönetilir. Daha açık belirtmek gerekirse UpdateScrollableAreaSet yöntemi, taşmanın ne zaman gerçekleştiğini veya çözüldüğünü algılamaktan sorumludur.
Bu bilgiler, ScrollableArea değerini değiştiren düğümün referansı gönderilerek DevTools arka ucuna iletilir.
Ardından arka uç, yeni durumunu almak için IsUserScrollable yöntemini kullanarak düğümü yeniden kontrol eder. Kaydırma özelliği doğrulandıktan sonra Chrome DevTools Protocol kullanılarak kullanıcı arayüzüne bir sinyal gönderilir. Bu sinyal, kullanıcı arayüzünün kaydırılabilir içerikteki değişiklikleri doğru yansıtmasını sağlar.
Kaydırma rozetini görüntüleme
Yeni rozeti DevTools kullanıcı arayüzüne eklemek için ElementsTreeOutline içinde, bir etkinlikle kaydırılabilirlik durumunu değiştiren öğenin nodeId değerini alan bir işleyici yöntemi oluşturduk.
Bu işleyicide, nodeId kullanarak ElementsTreeElement nesnesini alır ve kaydırma rozetini güncellemesini talimat veririz.
Kaydırma rozetini güncellemek için öğenin kaydırılabilir olup olmadığını ve kaydırma rozetinin önceden eklenip eklenmediğini kontrol etmeniz gerekir. Bu koşullara bağlı olarak aşağıdaki işlemler yapılır:
- Öğe kaydırılabilir durumdaysa ve henüz kaydırma rozeti yoksa bir rozet eklenir.
- Öğe kaydırılabilir değilse ancak kaydırma rozeti varsa mevcut rozet kaldırılır.
Kaydırılabilir üst düzey dokümanı işlemek için özel mantık
Üst düzey doküman kaydırılabilir olduğunda, #document öğesini ana doküman için değil, yalnızca iframe'ler için gösterdiğimizden özel bir durum söz konusudur. Bu nedenle rozeti doğrudan #document öğelerinde gösteremiyoruz.
document.scrollingElement() öğesinin <body> veya null döndürdüğü Quirks mode içindekiler de dahil olmak üzere kaydırma rozetini </html> öğesinde göstermeye karar verdik. Bu karar, özellikle gövdenin bağımsız olarak kaydırıldığı sayfalarda, kaydırılabilir dokümanlar ile kaydırılabilir gövde öğeleri arasındaki karışıklığı önler.
Geliştiricilere hangi öğelerin kaydırılabilir olduğunu göstermenin en net yolunun bu olduğunu tespit ettik.
Chrome Geliştirici Araçları Protokolü (CDP) değişiklikleri
Yeni kaydırma rozetini entegre etmek için Chrome DevTools Protocol (CDP) öğesinde değişiklik yapılması gerekiyordu. CDP, DevTools ile Chrome arasında bir iletişim protokolü görevi görür.
Protokolü, iki durumu da kapsayacak şekilde değiştirmemiz gerekiyordu:
- Bu düğüm, DevTools'a yüklendiğinde kaydırılabilir mi?
- Bu düğümün kaydırılabilir durumu güncellendi mi?
Bu düğüm, DevTools'a yüklendiğinde kaydırılabilir mi?
DevTools ön ucunda her yeni düğüm yüklendiğinde gönderilen DOM.Node veri türüne isScrollable adlı yeni bir özellik ekledik.
Gereksiz verilerin yüklenmesini önlemek için bu özelliği yalnızca doğru olduğunda doldurmaya karar verdik. Bu nedenle, özellik gönderilmediğinde öğenin kaydırılabilir olmadığı varsayılır.
Bu düğümün kaydırılabilir durumu güncellendi mi?
Bir düğümün kaydırılabilir durumunu güncelleyip güncellemediğini algılamak için CDP'de yeni bir etkinlik scrollableFlagUpdated kullanıma sunduk. Bu etkinlik, bir öğe kaydırılabilir alan kazandığında veya kaybettiğinde tetiklenir. Etkinliğin yapısı aşağıdaki gibidir:
# Fired when a node's scrollability state changes.
experimental event scrollableFlagUpdated
parameters
# The id of the node.
DOM.NodeId nodeId
# If the node is scrollable.
boolean isScrollable
Uzman ipucu: Tarayıcınızda yeni CDP değişikliklerini inceleyin
Chrome'un DevTools ile nasıl iletişim kurduğunu merak ediyorsanız bunu keşfetmenin basit bir yolu vardır.
Protokol İzleyici paneli, Chrome ile DevTools arasında paylaşılan gerçek zamanlı etkinlikleri (Kaydırma rozeti için yeni eklenen etkinlik dahil) görüntülemenizi sağlar. Örneğin, bir öğenin kaydırılabilirliğini etkileyen stilini değiştirdiğinizde, ilgili CDP etkinliklerini gerçekleştiği anda hemen görebilirsiniz.
Daha ayrıntılı bir kılavuz için Protocol monitor: View and send CDP requests bölümüne bakın.
Kaydırmanın ötesinde: Taşma rozeti kullanıma sunuldu
Daha da iyisi, kaydırmanın nedenini belirlemek için yeni bir taşma rozeti üzerinde çalışıyoruz. Bu rozet, kapsayıcılarının dışına taşan öğelerin yanında görünür ve düzen sorunlarını hızlı bir şekilde teşhis etmenize yardımcı olur.
İşleyiş şekli:
- Etkileşimli hata ayıklama. Taşma yapan alt öğeleri tanımlayan bir DevTools Protokolü komutunu tetiklemek için kaydırma rozetini tıklayın.
- Aşırı yüklemeyi görselleştirme. Taşmayı tespit etmek için kaydırılabilir kapsayıcıdaki öğe sınırlarını eşleriz.
- Sorunun kaynağını vurgulama. Taşma rozeti, taşma yapan bu öğeleri işaretler ve tıklandığında doğrudan DOM'da vurgular.
Bu sayede geliştiriciler, taşkın içerikten kaynaklanan düzen sorunlarını anlayıp düzeltmek için güçlü bir yeni araca sahip olacak. Bu daha derin analiz düzeyinin, hata ayıklama iş akışınızı önemli ölçüde kolaylaştıracağına inanıyoruz.