DevTools

Rendering E Dispositivi

Stampa WhatsApp Email

Rendering, responsive e sensori: Device mode, viewport, DPR, touch, network throttling, Rendering drawer, media queries, sensors.

Prestazioni | Rendering E Dispositivi
Competenze: riconoscere gli strumenti trattati, interpretarli correttamente e applicarli durante un’analisi del browser.

Rendering, responsive e sensori

Durata: 50 minuti · Chrome o browser Chromium compatibile

Device mode, viewport, DPR, touch, network throttling, Rendering drawer, media queries, sensors. Gli strumenti di sviluppo permettono di osservare ciò che accade nel browser. Le opzioni possono variare tra versioni: se una scheda non compare, cercala nel menu » oppure More tools.

Che cosa osservare e perché

Usa gli strumenti solo su pagine che sei autorizzato a esaminare. La modifica di HTML, CSS o JavaScript in DevTools è in genere locale e temporanea: non equivale a modificare i file del sito. Una richiesta o un dato non presente non è necessariamente un errore.

LABORATORIO

Esplorare rendering, responsive e sensori con Chrome DevTools

Procedura guidata, circa 20 minuti

Obiettivo: applicare le funzioni studiate su una pagina già disponibile nel browser. Occorrente: Chrome, DevTools e una pagina dimostrativa o del corso.

  1. Attiva la barra dei dispositivi con Ctrl+Shift+M.
  2. Prova viewport stretto e largo, osservando il layout.
  3. Cambia orientamento e dimensioni manualmente.
  4. Apri More tools → Rendering e individua Paint flashing, se presente.
  5. Attiva temporaneamente Paint flashing e interagisci con la pagina.
  6. Esplora More tools → Sensors e verifica le opzioni disponibili.
  7. Disattiva tutte le simulazioni e torna alla modalità desktop.
Output atteso: La pagina reagisce ai cambi di viewport; gli strumenti di rendering evidenziano attività grafiche quando supportati.
Se non trovi il comando: verifica il nome della scheda e usa », More tools o il Command Menu. Se un risultato non compare, annota ciò che osservi e confrontalo con il docente; non modificare impostazioni del server.

Esercizio autonomo: ripeti l’analisi su una seconda pagina e produci una tabella con azione, scheda usata, dato osservato e interpretazione.

Verifica dei concetti

Che cosa consente di osservare questa lezione?
Device mode, viewport, DPR, touch, network throttling, Rendering drawer, media queries, sensors.
Le modifiche effettuate in DevTools vengono pubblicate sul sito?
No: salvo strumenti e procedure specifiche di sviluppo locale, le modifiche al DOM o agli stili sono temporanee e riguardano il browser.
Perché un pannello può apparire vuoto?
Perché la pagina non utilizza la funzione, non ci sono eventi o risorse pertinenti oppure la registrazione non era attiva.
Come si recupera una scheda non visibile?
Dal menu » della barra delle schede, More tools o Command Menu; le etichette dipendono dalla versione.
Che cosa va annotato nel rapporto finale?
Azione effettuata, strumento utilizzato, evidenza osservata e interpretazione, distinguendo fatti e ipotesi.

Rendering: repaint, layout shift e preferenze utente

Visualizzare il lavoro di rendering e simulare preferenze di accessibilità e aspetto.

Concetti e strumenti

  • Rendering: pannello apribile dal menu dei comandi o da More tools → Rendering, secondo la versione.
  • Paint flashing: evidenzia le aree ridisegnate; non ogni repaint indica un problema.
  • Layout Shift Regions: evidenzia spostamenti del layout, utile per indagare il CLS.
  • Emulate CSS media feature: consente di simulare prefers-color-scheme e prefers-reduced-motion, quando disponibili.
  • Device Mode: simula dimensioni e alcune condizioni del dispositivo, ma non equivale a un test su hardware reale.
LABORATORIO

Rendering: repaint, layout shift e preferenze utente

Procedura guidata con osservazioni verificabili

Obiettivo: Visualizzare il lavoro di rendering e simulare preferenze di accessibilità e aspetto.

  1. Apri DevTools, poi More tools → Rendering (oppure cerca Rendering dal menu dei comandi).
  2. Attiva Paint flashing e scorri la pagina; osserva le aree che vengono ridisegnate.
  3. Attiva Layout Shift Regions, se disponibile, e provoca un cambiamento di layout su una pagina di prova.
  4. Emula prefers-color-scheme: dark e confronta gli stili di una pagina che supporta il tema scuro.
  5. Emula prefers-reduced-motion: reduce e verifica se le animazioni rispettano la preferenza.
  6. Ripristina le impostazioni di emulazione prima di terminare il laboratorio.

Risultato atteso: Una tabella con funzione attivata, effetto osservato e limite dell’emulazione.

Se non funziona: controlla di aver selezionato la scheda corretta, ricarica la pagina e verifica che la funzione sia disponibile nella tua versione di Chrome. Non tutte le pagine espongono le stesse risorse.

Esercizio autonomo: Spiega perché una pagina con animazioni dovrebbe prevedere una variante a movimento ridotto.

Verifica dei concetti

Paint flashing misura la velocità di rete?
No: evidenzia le regioni ridisegnate.
Che cosa indicano le layout shift regions?
Aree coinvolte in spostamenti del layout.
Come si simula il tema scuro?
Con la media feature prefers-color-scheme nel pannello Rendering.
A cosa serve prefers-reduced-motion?
A rispettare la preferenza dell’utente di ridurre il movimento.
Device Mode sostituisce un telefono reale?
No: non riproduce fedelmente hardware, browser e tutte le condizioni reali.