Il debug dei problemi relativi allo scorrimento è diventato più facile con il nuovo badge di scorrimento di DevTools. Questo post spiega che cosa sono gli elementi scorrevoli, perché possono essere difficili da trovare e in che modo questa nuova funzionalità ti aiuta a individuarli rapidamente. Inoltre, ti mostreremo il dietro le quinte del nostro sviluppo del badge di scorrimento.
Che cos'è un elemento scorrevole?
Se puoi scorrere i contenuti all'interno di un elemento, si tratta di un elemento scorrevole (o contenitore scorrevole). Non importa se contiene o meno le barre di scorrimento.
Perché è difficile trovare l'elemento scorrevole?
Il debug dei problemi di scorrimento è difficile. Senza uno strumento che mostri chiaramente l'elemento scorrevole, è facile perdersi, soprattutto in pagine complesse in cui non sono presenti barre di scorrimento.
Trovare manualmente l'elemento che scorre può essere un processo tedioso di tentativi ed errori:
- Scegli un elemento e modificane lo stile.
- La barra di scorrimento è scomparsa? In caso contrario, la procedura viene ripetuta.
Introduzione al badge di scorrimento
In Chrome 130, puoi utilizzare il nuovo badge di scorrimento nel riquadro Elementi per individuare gli elementi scorrevoli.
Ad esempio, nell'esempio che segue puoi cercare di individuare l'elemento che attiva la visualizzazione delle barre di scorrimento utilizzando il nuovo badge di scorrimento.
Implementazione tecnica del nuovo badge di scorrimento
Dietro le quinte, l'implementazione è suddivisa in due parti:
- Identificazione degli elementi scorrevoli. Utilizza gli indicatori di
Blink’s(il motore di rendering di Chrome) per identificare gli elementi scorrevoli o che sono diventati scorrevoli a causa di una modifica nella pagina. - Visualizzazione del badge di scorrimento. Una volta ricevuti gli indicatori, incorporiamo un nuovo badge (simile ai badge griglia esistenti) accanto agli elementi scorrevoli nel riquadro Elementi.
Identificazione degli elementi scorrevoli
Per identificare gli elementi scorrevoli, abbiamo utilizzato il metodo IsUserScrollable in Blink. Questo metodo determina se un nodo è scorrevole controllando se esce dall'area visibile lungo l'asse X o Y, a indicare che i contenuti superano le dimensioni del contenitore e possono essere scorrevoli. Chiamiamo questo metodo ogni volta che viene caricato un nuovo elemento in DevTools per identificare i contenitori scorrevoli.
Per aggiornare dinamicamente lo stato di scorrevolezza degli elementi già caricati, abbiamo dovuto esaminare in dettaglio la base di codice del motore di rendering Blink per monitorare dove viene aggiunta o rimossa l'area scorrevole per un nodo.
L'overflow della gestione della logica di base è gestito dal componente PaintLayerScrollableArea. Nello specifico, il metodo UpdateScrollableAreaSet è responsabile del rilevamento di quando si è verificato un overflow o se è stato risolto.
Queste informazioni vengono trasmesse al backend di DevTools inviando il riferimento del nodo che ha modificato il proprio ScrollableArea.
Il backend controlla di nuovo il nodo utilizzando il metodo IsUserScrollable per ottenere il nuovo stato. Dopo aver verificato la scorrevolezza, viene inviato un indicatore al frontend utilizzando Chrome DevTools Protocol, in modo che l'interfaccia utente rifletta con precisione le modifiche ai contenuti scorrevoli.
Visualizzazione del badge di scorrimento
Per aggiungere il nuovo badge nel frontend di DevTools, abbiamo creato un metodo di gestore nella ElementsTreeOutline che ha ricevuto il nodeId dell'elemento che ne ha modificato lo stato di scorrimento da un evento.
In questo gestore, recuperiamo l'oggetto ElementsTreeElement utilizzando nodeId e gli dichiariamo di aggiornare il badge di scorrimento.
L'aggiornamento del badge di scorrimento comporta il controllo se l'elemento è scorrevole e se ha già un badge di scorrimento. In base a queste condizioni, vengono intraprese le seguenti azioni:
- Se l'elemento è scorrevole e non ha ancora un badge di scorrimento, ne viene aggiunto uno.
- Se l'elemento non è scorrevole, ma ha un badge di scorrimento, il badge esistente viene rimosso.
La logica speciale per gestire il documento di primo livello scorrevole
Quando il documento di primo livello è scorrevole, si tratta di un caso speciale perché non mostriamo l'elemento #document per il documento principale, ma solo per gli iframe. Di conseguenza, non possiamo mostrare il badge direttamente negli elementi #document
Abbiamo deciso di mostrare il badge di scorrimento sull'elemento </html>, inclusi quelli in Quirks mode in cui document.scrollingElement() restituisce <body> o null. Questa decisione evita confusione tra i documenti scorrevoli e gli elementi del corpo scorrevoli, in particolare nelle pagine in cui il corpo può essere scorrere in modo indipendente.
Abbiamo riscontrato che questo è il modo più chiaro per mostrare agli sviluppatori quali elementi possono essere scorrevoli.
Modifiche al protocollo Chrome DevTools (CDP)
Per integrare il nuovo badge di scorrimento, erano necessarie modifiche a Chrome DevTools Protocol (CDP). CDP funge da protocollo di comunicazione tra DevTools e Chrome.
Abbiamo dovuto modificare il protocollo per coprire i due casi:
- Questo nodo è scorrevole quando viene caricato in DevTools?
- Questo nodo ha aggiornato lo stato scorrevole?
Questo nodo è scorrevole quando viene caricato in DevTools?
Abbiamo aggiunto una nuova proprietà denominata isScrollable al tipo di dati DOM.Node che viene inviata ogni volta che viene caricato un nuovo nodo nel frontend di DevTools.
Abbiamo deciso di compilare questa proprietà solo quando è true, per evitare di caricare dati non necessari. Pertanto, quando la proprietà non viene inviata, presupponiamo che l'elemento non sia scorrevole.
Questo nodo ha aggiornato il proprio stato di scorrimento?
Per rilevare se un nodo ha aggiornato il proprio stato di scorrimento, abbiamo introdotto un nuovo evento scrollableFlagUpdated in CDP, che viene attivato ogni volta che un elemento acquisisce o perde un'area scorrevole. L'evento ha la seguente struttura:
# 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
Suggerimento avanzato: esamina le nuove modifiche CDP nel tuo browser
Se ti incuriosisce sapere come Chrome comunica con DevTools, esiste un modo semplice per scoprirlo.
Il riquadro Protocol Monitor ti consente di visualizzare gli eventi in tempo reale scambiati tra Chrome e DevTools, incluso l'evento appena aggiunto per il badge di scorrimento. Ad esempio, se modifichi lo stile di un elemento che influisce sulla sua scorrevolezza, puoi vedere immediatamente gli eventi CDP correlati non appena si verificano.
Per una guida più dettagliata, consulta Protocol monitor: View and send CDP requests.
Oltre lo scorrimento: ti presentiamo il badge di overflow
Inoltre, stiamo lavorando a un nuovo badge extra per individuare la causa dello scorrimento. Questo badge verrà visualizzato accanto agli elementi che riempiono il contenitore per aiutarti a diagnosticare rapidamente i problemi di layout.
Ecco come funzionerà:
- Debug interattivo. Fai clic sul badge di scorrimento per attivare un comando del protocollo DevTools che identifica gli elementi secondari in overflow.
- Visualizzazione dell'overflow. I confini degli elementi all'interno del contenitore scorrevole verranno mappati per rilevare eventuali overflow.
- Evidenziazione del colpevole. Il badge di overflow segnala questi elementi in overflow e, se fai clic su di esso, li evidenzierà direttamente nel DOM.
In questo modo, gli sviluppatori avranno a disposizione un nuovo strumento efficace per comprendere e risolvere i problemi di layout causati dal superamento dei limiti di spazio dei contenuti. Riteniamo che questo livello di analisi più approfondito semplificherà notevolmente il flusso di lavoro di debug.