Men-debug masalah terkait scroll kini menjadi lebih mudah dengan badge scroll baru DevTools. Postingan ini menjelaskan apa yang dimaksud dengan elemen yang dapat di-scroll, alasan elemen tersebut sulit ditemukan, dan cara fitur baru ini membantu Anda menemukannya dengan cepat. Kami juga akan mengajak Anda melihat proses di balik layar untuk melihat cara kami mengembangkan badge scroll.
Apa yang dimaksud dengan elemen yang dapat di-scroll?
Jika Anda dapat men-scroll konten di dalam elemen, berarti elemen tersebut dapat di-scroll (atau penampung scroll). Tidak masalah apakah halaman tersebut memiliki scroll bar atau tidak.
Mengapa sulit menemukan elemen yang dapat di-scroll?
Men-debug masalah scroll sulit dilakukan. Tanpa alat untuk menampilkan elemen yang dapat di-scroll dengan jelas, pengguna akan mudah tersesat, terutama di halaman yang kompleks jika tidak ada scrollbar.
Menemukan elemen yang di-scroll secara manual bisa menjadi proses coba-coba yang membosankan:
- Anda memilih elemen dan mengubah gayanya.
- Apakah scrollbar menghilang? Jika tidak, Anda harus mengulangi prosesnya.
Memperkenalkan badge scroll
Di Chrome 130, Anda dapat menggunakan badge scroll baru di Panel Elemen untuk menemukan elemen yang dapat di-scroll.
Misalnya, coba temukan elemen mana yang menyebabkan scrollbar muncul pada contoh berikut menggunakan badge scroll baru.
Penerapan teknis badge scroll baru
Di balik layar, implementasi ini dibagi menjadi dua bagian:
- Mengidentifikasi elemen yang dapat di-scroll. Gunakan sinyal
Blink’s(mesin render Chrome) untuk mengidentifikasi elemen yang dapat di-scroll atau telah dapat di-scroll karena perubahan pada halaman. - Menampilkan badge scroll. Setelah menerima sinyal, kami akan menyertakan badge baru (mirip dengan badge petak yang ada) di samping elemen yang dapat di-scroll di panel Elemen.
Mengidentifikasi elemen yang dapat di-scroll
Untuk mengidentifikasi elemen yang dapat di-scroll, kami menggunakan metode IsUserScrollable di Blink. Metode ini menentukan apakah node dapat di-scroll dengan memeriksa apakah node tersebut meluap di sepanjang sumbu X atau Y, yang menunjukkan bahwa konten melebihi dimensi penampung dan dapat di-scroll. Kami memanggil metode ini setiap kali elemen baru dimuat di DevTools untuk mengidentifikasi penampung yang dapat di-scroll.
Untuk memperbarui status kemampuan scroll elemen yang sudah dimuat secara dinamis, kami harus mendalami codebase mesin rendering Blink untuk melacak di mana area yang dapat di-scroll untuk node ditambahkan atau dihapus.
Logika inti yang menangani overflow dikelola oleh komponen PaintLayerScrollableArea. Secara khusus, metode UpdateScrollableAreaSet bertanggung jawab untuk mendeteksi kapan overflow terjadi atau telah diselesaikan.
Informasi ini disampaikan ke backend DevTools dengan mengirimkan referensi node yang mengubah ScrollableArea-nya.
Backend kemudian memeriksa ulang node menggunakan metode IsUserScrollable untuk mendapatkan status barunya. Setelah memverifikasi kemampuan scroll, sinyal akan dikirim ke frontend menggunakan Chrome DevTools Protocol, yang memastikan bahwa UI secara akurat mencerminkan perubahan pada konten yang dapat di-scroll.
Menampilkan badge scroll
Untuk menambahkan badge baru di frontend DevTools, kami membuat metode pengendali di ElementsTreeOutline yang menerima nodeId elemen yang mengubah status scroll-nya oleh Peristiwa.
Dalam pengendali tersebut, kita mengambil objek ElementsTreeElement menggunakan nodeId dan menginstruksikannya untuk memperbarui badge scroll-nya.
Memperbarui badge scroll melibatkan pemeriksaan apakah elemen dapat di-scroll dan apakah sudah memiliki badge scroll. Berdasarkan kondisi tersebut, tindakan berikut akan dilakukan:
- Jika elemen dapat di-scroll dan belum memiliki badge scroll, badge akan ditambahkan.
- Jika elemen tidak dapat di-scroll, tetapi memiliki badge scroll, badge yang ada akan dihapus.
Logika khusus untuk menangani dokumen tingkat atas yang dapat di-scroll
Jika dokumen tingkat atas dapat di-scroll, kita memiliki kasus khusus karena kita tidak menampilkan elemen #document untuk dokumen utama—hanya untuk iframe. Akibatnya, kita tidak dapat menampilkan badge langsung di elemen #document
Kami memutuskan untuk menampilkan badge scroll pada elemen </html>, termasuk yang ada di Quirks mode dengan document.scrollingElement() menampilkan <body> atau null. Keputusan ini mencegah kebingungan antara dokumen yang dapat di-scroll dan elemen isi yang dapat di-scroll, terutama di halaman tempat isi dapat di-scroll secara independen.
Kami menganggap ini sebagai cara paling jelas untuk menunjukkan kepada developer elemen mana yang dapat di-scroll.
Perubahan Chrome DevTools Protocol (CDP)
Untuk mengintegrasikan badge scroll baru, perubahan pada Chrome DevTools Protocol (CDP) diperlukan. CDP berfungsi sebagai protokol komunikasi antara DevTools dan Chrome.
Kami harus mengubah protokol untuk mencakup kedua kasus tersebut:
- Apakah node ini dapat di-scroll saat dimuat di DevTools?
- Apakah node ini memperbarui status dapat di-scroll?
Apakah node ini dapat di-scroll saat dimuat di DevTools?
Kami menambahkan properti baru bernama isScrollable ke jenis data DOM.Node yang dikirim setiap kali node baru dimuat di frontend DevTools.
Kami memutuskan untuk mengisi properti ini hanya jika propertinya benar, untuk menghindari pemuatan data yang tidak perlu. Oleh karena itu, saat properti tidak dikirim, kami menganggap bahwa elemen tidak dapat di-scroll.
Apakah node ini memperbarui status dapat di-scroll?
Untuk mendeteksi apakah node telah memperbarui status yang dapat di-scroll, kami memperkenalkan peristiwa baru scrollableFlagUpdated di CDP, yang dipicu setiap kali elemen mendapatkan atau kehilangan area yang dapat di-scroll. Peristiwa memiliki struktur berikut:
# 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
Tips pro: Periksa perubahan CDP baru di browser Anda
Jika Anda ingin tahu cara Chrome berkomunikasi dengan DevTools, ada cara mudah untuk mempelajarinya.
Panel Protocol Monitor memungkinkan Anda melihat peristiwa real-time yang dipertukarkan antara Chrome dan DevTools, termasuk peristiwa yang baru ditambahkan untuk badge Scroll. Misalnya, saat mengubah gaya elemen yang memengaruhi kemampuan scroll-nya, Anda dapat langsung melihat peristiwa CDP terkait saat peristiwa tersebut terjadi.
Untuk panduan yang lebih mendetail, lihat Protocol monitor: View and send CDP requests.
Lebih dari Scrolling: Memperkenalkan badge tambahan
Selain itu, kami sedang sedang mengerjakan badge tambahan baru untuk menemukan penyebab scroll tersebut. Badge ini akan muncul di samping elemen yang melebihi penampung, sehingga membantu Anda mendiagnosis masalah tata letak dengan cepat.
Berikut cara kerjanya:
- Proses debug interaktif. Klik badge scroll untuk memicu perintah DevTools Protocol yang mengidentifikasi elemen turunan yang meluap.
- Memvisualisasikan overflow. Kita akan memetakan batas elemen dalam penampung yang dapat di-scroll untuk mendeteksi overflow.
- Menyoroti pelakunya. Badge overflow akan menandai elemen yang meluap ini, dan mengkliknya akan menandainya langsung di DOM.
Hal ini akan memberi developer alat baru yang canggih untuk memahami dan memperbaiki masalah tata letak yang disebabkan oleh konten yang meluap. Kami yakin tingkat analisis yang lebih mendalam ini akan menyederhanakan alur kerja proses debug Anda secara signifikan.