Hem Firefox hem de Chrome, bir davranışla ilgili komut dosyaları hakkında daha fazla bilgi edinmenize yardımcı olacak yararlı hata ayıklama araçlarına sahiptir. Varsayılan hata ayıklama araçları daha kapsamlı olduğundan çoğunlukla Chrome'da açıklayacağım
Başlangıç olarak, bir öğe hakkında bilgi edinmek için genellikle Sağ Tıklama->Inspect Öğesini kullanabilirsiniz hızlı bir şekilde. Ancak bu, Facebook'un ticker'ında işe yaramıyor gibi görünüyor - bunu yapmak, kaydırma çubuğunun arkasındaki "Ticker News" u şu şekilde seçecektir:
Çünkü öğenin varlığını göremiyoruz değiştirildi, bazı tahminlerde bulunmamız gerekecek. Kayan yazıların kendileri, kaydırma çubuklarıyla ilgili hiçbir şeye sahip görünmüyor. Ebeveyne gidip <div class = "tickerActivityStories" > 'i katladıktan sonra, her şeyi net bir şekilde görmeye başlayabiliriz
Fareyle üzerine gelip (ve kaydırma çubuklarının "görünme" kodunu çağırarak) sayfanın DOM'unu gözlemleyebilir ve farklılıkları not edebiliriz.
Dolayısıyla, buna göre yanıt verirken <div class = "uiScrollableAreaTrack" > fare her girdiğinde / çıktığında. İsim de mantıklıdır (bunun kaydırma çubuğunun izleri olduğu anlamına gelir). Bu div 'i açarak, kaydırma çubuğu için bir "kıskaç" olduğunu bile fark edeceğiz!
Javascript'in ne olduğunu öğrenmek için kaydırma çubuklarıyla ilgilidir, <div class = "uiScrollableAreaGripper" öğesini tıklayın ve sağ bölmede Olay Dinleyicileri sekmesini açın. Odaklanmaya yanıt verdiğini varsayabiliriz ve Odak bölümünde, Javascript dosyalarına birkaç referans olduğunu fark edeceksiniz. Dosya adlarının üzerine gelin, Chrome size Javascript dosyalarının bağlantısını gösterecektir.
Şansınız varsa, dosyaların tanınabilir bir adı olabilir ( typeahead.min.js veya google'dan alabileceğiniz benzeri gibi). Maalesef bizimki de dahil olmak üzere çoğu durumda özel koda veya küçültülmüş koda bakıyoruz. (Küçültülmüş kod, sayfaların daha hızlı yüklenmesi için dosya boyutlarını küçültmek için son derece yaygındır)