Il riquadro Livelli ti aiuta a comprendere la composizione del tuo sito web e il modo in cui il browser esegue il rendering dei contenuti. Analizza un diagramma 3D del tuo sito web per identificare i problemi di rendering, correggere i bug di scorrimento e ottimizzare le animazioni.
Panoramica
Utilizza il riquadro Livelli per:
- Visualizza i livelli del documento.
- Controlla i livelli del documento.
- Imposta i punti di interruzione per le modifiche al DOM.
- Visualizza le informazioni di Paint Profiler.
- Identifica gli elementi con scorrimento lento.
Apri il riquadro Livelli
Per aprire il riquadro Livelli:
- Apri DevTools.
- Apri il menu Comando premendo:
- macOS: Comando+Maiusc+P
- Windows, Linux, ChromeOS: Ctrl+Maiusc+P
- Inizia a digitare
Layers, seleziona Mostra riquadro Livelli e premi Invio.
In alternativa, nell'angolo in alto a destra, seleziona more_vert Altre opzioni > Altri strumenti > Riquadro Livelli.
Inoltre, il riquadro Rendimento ti consente di visualizzare i livelli di ogni fotogramma di una registrazione in una scheda Livelli. Per scoprire di più, consulta Visualizzare le informazioni sui livelli.
Visualizza livelli documento
La sezione più a sinistra del riquadro Livelli elenca tutti i livelli visualizzati del documento in un albero espandibile. Questo albero si aggiorna man mano che navighi nella pagina. I livelli vengono identificati dal relativo selettore CSS o da un numero, seguito dalle dimensioni del livello in pixel.
Passa il mouse sopra un livello per evidenziarlo nella pagina web e nel diagramma. Nella pagina viene visualizzata una descrizione comando con le seguenti informazioni:
- I selettori del livello.
- Le dimensioni del livello, in pixel.
- Un'icona che rappresenta CSS grid o flex, se pertinente.
Controllare i livelli del documento
Fai clic su un livello per visualizzare ulteriori informazioni nel riquadro Dettagli.
A seconda del livello, vengono visualizzate le seguenti informazioni:
- Dimensioni
- Motivi di composizione
- Stima memoria
- Numero di colori
- Aree di scorrimento lento
- Vincolo posizione fissa
Il diagramma mostra come i livelli sono sovrapposti e disposti per questa pagina, inclusi gli elementi posizionati all'esterno dell'area visibile.
Per spostare il diagramma:
- Usa i tasti WASD per spostare il diagramma. Premi W per eseguire la panoramica verso l'alto, A per eseguire la panoramica a sinistra, S per eseguire la panoramica verso il basso e D per eseguire la panoramica verso destra.
- Fai clic su Modalità panoramica drag_pan o premi X e trascina per spostarti lungo gli assi X e Y.
- Fai clic su Modalità di rotazione 360 o premi V e trascina per ruotare lungo l'asse Z.
- Fai clic su Reimposta trasformazione zoom_in_map o premi 0 per ripristinare la posizione originale del diagramma.
- Aumenta lo zoom premendo Maiusc + + o la rotellina del mouse verso l'alto.
- Diminuisci lo zoom premendo Maiusc + - o la rotellina del mouse verso il basso.
Per visualizzare l'elemento DOM corrispondente di un livello nel riquadro Elementi, fai clic con il tasto destro del mouse su un livello nel diagramma o nella struttura ad albero dei livelli e poi su Mostra nel riquadro Elementi.
Inoltre, il riquadro Livelli nasconde alcuni livelli che non ospitano o disegnano contenuti. Per visualizzare questi livelli, fai clic con il tasto destro del mouse sull'albero dei livelli e seleziona Mostra livelli interni.
Impostare i punti di interruzione per le modifiche al DOM
Il riquadro Livelli ti consente di impostare i punti di interruzione per le modifiche del DOM.
Per impostare un punto di interruzione di modifica del DOM:
- Fai clic con il tasto destro del mouse su un livello nell'albero dei livelli.
- Passa il mouse sopra Interrompi su e seleziona Modifiche al sottoalbero, Modifiche agli attributi o Rimozione dei nodi.
Puoi trovare un elenco dei punti di interruzione per le modifiche al DOM in:
- Scheda Elementi > Punti di interruzione DOM.
- Sezione comprimibile Origini > Punti di interruzione DOM.
Per scoprire di più sui tipi di punti di interruzione, consulta Tipi di punti di interruzione per le modifiche al DOM.
Visualizza informazioni su Paint Profiler
Il riquadro Livelli ti consente di visualizzare informazioni dettagliate sulla pittura di un livello e di eseguire il rendering dei contenuti della pagina web nel diagramma 3D.
Per attivare Paint Profiler, segui questi passaggi:
- Seleziona la casella di controllo check_box Pitture nella barra delle azioni.
- Seleziona un livello dalla struttura ad albero dei livelli.
- Fai clic su Paint Profiler nella parte inferiore del riquadro Dettagli. Tieni presente che non tutti i livelli avranno questa opzione.
Si aprirà la scheda Profiler con i record di colorazione e un istogramma che rappresenta la distribuzione dei costi di colorazione.
L'attivazione di Colori comporterà anche il rendering della maggior parte dei contenuti della pagina web nel diagramma.
Identificare gli elementi con scorrimento lento
Alcuni siti web utilizzano JavaScript per rilevare eventi di scorrimento o tocco sugli elementi in un modo che potrebbe influire negativamente sulla velocità di scorrimento. Per identificare i livelli che contengono ascoltatori di eventi relativi allo scorrimento che potrebbero ostacolare il rendimento, fai clic sulla casella di controllo check_box Rettangoli di scorrimento lento.
I livelli che potrebbero causare uno scorrimento lento sono evidenziati in rosa.