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, kaydırılabilir bir öğedir (veya kaydırma kapsayıcısıdır). Kaydırma çubuklarının olup olmadığı önemli değildir.
Kaydırılabilir öğeyi bulmak neden zor?
Kaydırma sorunlarında hata 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ştirebilirsiniz.
- Kaydırma çubuğu kayboldu mu? Bağlanmazsa işlemi tekrarlayın.
Kaydırma rozeti kullanıma sunuldu
Chrome 130'da 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 ekseninde taşıp taşmadığını kontrol ederek kaydırılabilir olup olmadığını belirler. Bu, 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. Özellikle UpdateScrollableAreaSet yöntemi, taşmanın ne zaman gerçekleştiğini veya çözüldüğünü tespit etmekten sorumludur.
Bu bilgiler, ScrollableArea değerini değiştiren düğümün referansı gönderilerek DevTools arka ucuna iletilir.
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 öğesini kullanarak ElementsTreeElement nesnesini alırız ve kaydırma rozetini güncellemesini isteriz.
Kaydırma rozetinin güncellenmesi, öğenin kaydırılabilir olup olmadığını ve halihazırda bir kaydırma rozetine sahip olup olmadığını kontrol etmeyi içerir. 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ılamıyorsa ancak kaydırma rozeti varsa mevcut rozet kaldırılır.
Kaydırılabilir üst düzey dokümanları 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 durumla karşılaşırız. 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, Geliştirici Araçları'na yüklendiğinde kaydırılabilir mi?
- Bu düğüm, kaydırılabilir durumunu güncelledi 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 mülkü 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şan alt öğeleri tanımlayan bir Geliştirici Araçları Protokolü komutu tetiklemek için kaydırma rozetini tıklayın.
- Aşırı yüklemeyi görselleştirme. Taşma olup olmadığını tespit etmek için kaydırılabilir kapsayıcı içindeki öğe sınırlarını eşleyeceğiz.
- Sorunun kaynağını vurgulama. Taşma rozeti, taşma yapan bu öğeleri işaretler ve tıklandığında doğrudan DOM'da vurgular.
Bu, geliştiricilere taşan içeriğin neden olduğu düzen sorunlarını anlayıp düzeltmeleri için yeni ve güçlü bir araç sunacaktır. Bu ayrıntılı analizin, hata ayıklama iş akışınızı önemli ölçüde kolaylaştıracağına inanıyoruz.