Strumenti per sviluppatori del browser

Gli strumenti per sviluppatori del browser, o DevTools, sono funzioni integrate in Chrome, Firefox, Edge e Safari per ispezionare pagine, simulare dispositivi, acquisire screenshot e correggere problemi di layout senza installare estensioni.

Related workflow terms: Screenshot del viewport.

Che cosa possono fare per gli screenshot

I DevTools nascono per il debug, ma includono diverse funzioni utili per acquisizioni e test visivi.

I comandi dedicati permettono di acquisire la viewport visibile, l'intera pagina scorrevole o un singolo elemento DOM. Non servono estensioni né strumenti esterni. Il risultato è un PNG con l'attuale rapporto tra pixel fisici e CSS, quindi su un display Retina si ottengono immagini a risoluzione 2x.

L'ispettore DOM permette di modificare la pagina prima dello screenshot. Puoi nascondere banner dei cookie, rimuovere sovrapposizioni, cambiare un testo o regolare temporaneamente gli stili. Le modifiche sono locali e scompaiono al ricaricamento, senza toccare la pagina pubblica.

La limitazione della rete simula connessioni lente e permette di acquisire stati di caricamento, schermate scheletro o errori di timeout. È utile per documentare il comportamento della pagina in condizioni di rete difficili.

Modalità responsive e simulazione dei dispositivi

La modalità responsive, disponibile nella barra dei dispositivi, simula viewport e caratteristiche diverse senza usare dispositivi fisici. Si attiva con Cmd+Maiusc+M su Mac o Ctrl+Maiusc+M su Windows.

Puoi scegliere profili predefiniti come iPhone, iPad, Pixel e Galaxy, oppure inserire larghezza, altezza e densità personalizzate. Il browser ridimensiona la viewport e adatta lo user agent, attivando breakpoint responsive e CSS specifico.

È un modo rapido per acquisire la stessa pagina in più dimensioni. In una sola sessione puoi passare da una viewport all'altra, invece di mantenere molti dispositivi fisici. Per marketing e documentazione offre una buona anteprima, ma per la precisione finale è comunque consigliabile verificare su dispositivi reali.

Come acquisire screenshot con i DevTools

Chrome DevTools offre più modalità tramite il menu dei comandi:

1. Apri DevTools: Cmd+Opzione+I su Mac oppure Ctrl+Maiusc+I su Windows
2. Apri il menu dei comandi: Cmd+Maiusc+P su Mac oppure Ctrl+Maiusc+P su Windows
3. Digita uno dei seguenti comandi:
   • "Capture screenshot" — acquisisce la viewport visibile
   • "Capture full size screenshot" — acquisisce l'intera pagina scorrevole
   • "Capture node screenshot" — acquisisce l'elemento DOM selezionato
   • "Capture area screenshot" — permette di trascinare un'area

Firefox offre funzioni simili con lo strumento integrato, accessibile dal menu con i tre puntini o digitando :screenshot nella console. In Safari, Web Inspector permette l'acquisizione dal menu contestuale della scheda Elements.

Per le operazioni ripetute si può automatizzare il processo con DevTools Protocol o un browser headless. Per una singola immagine, invece, il menu dei comandi è il percorso più rapido dal browser al file.

Nei flussi reali i DevTools servono spesso a controllare inquadratura, breakpoint e modifiche temporanee prima di automatizzare una procedura. Si verificano così la viewport, gli elementi da nascondere e l'effettiva utilità della pagina per una pipeline headless ripetibile.

Errori comuni

• Dimenticare la densità dei pixel. In modalità responsive, DevTools usa in genere DPR 1x. Per immagini Retina, imposta manualmente 2 o 3 nella barra dei dispositivi.
• Considerare la simulazione equivalente a un dispositivo reale. Viewport e DPR vengono emulati, ma non motore, resa dei font e gesti touch. Usa la simulazione per anteprime, non come verifica finale.
• Acquisire con i pannelli aperti. L'ispettore riduce lo spazio e cambia la larghezza effettiva della viewport. Spostalo in una finestra separata o chiudilo prima di acquisire.
• Ignorare la posizione di scorrimento. "Capture screenshot" include soltanto ciò che è visibile. Per i contenuti più in basso, scorri oppure usa "Capture full size screenshot".