Strumenti per sviluppatori del browser
Cosa sono gli strumenti per sviluppatori del browser, come usarli per screenshot e test responsive e le funzioni più comuni.
Gli strumenti per sviluppatori del browser sono gli strumenti di sviluppo integrati nei browser web: Chrome DevTools, Firefox Developer Tools e Web Inspector di Safari. Mostrano la struttura e gli stili della pagina, registrano l'output di JavaScript, registrano le richieste di rete e profilano le prestazioni.
La maggior parte di questi strumenti include l'emulazione dei dispositivi. Imposta larghezza e altezza del viewport, il device pixel ratio e la stringa user agent, così un browser desktop renderizza una pagina come la renderizzerebbe un telefono. L'emulazione non riproduce il motore del browser, i font o il comportamento tattile di un dispositivo reale.
In Chrome su Mac, Option+Command+I apre DevTools. In Safari, il menu Sviluppo deve essere attivato in Impostazioni prima che Web Inspector sia disponibile.
Cosa possono fare gli strumenti per gli screenshot
- Catturare il viewport visibile, la pagina intera scorrevole, un'area selezionata o un singolo elemento.
- Impostare una dimensione esatta del viewport e un device pixel ratio prima della cattura.
- Nascondere o modificare elementi, come un banner dei cookie o un widget della chat, prima della cattura.
- Limitare la rete per verificare l'aspetto di una pagina durante il caricamento.
Modalità responsive ed emulazione dei dispositivi
La modalità responsive, chiamata barra degli strumenti dei dispositivi in Chrome, ridimensiona l'area della pagina a una larghezza e un'altezza scelte. I preset coprono telefoni e tablet comuni, e sono ammesse dimensioni personalizzate. L'impostazione del device pixel ratio controlla quanti pixel dell'immagine produce ogni pixel CSS, quindi un viewport largo 390 pixel con rapporto 3 produce uno screenshot largo 1170 pixel.
Come catturare screenshot con gli strumenti
- Apri DevTools e attiva la barra degli strumenti dei dispositivi se ti serve una dimensione specifica.
- Apri il Command Menu con Shift+Command+P.
- Digita "screenshot" e scegli il comando per viewport, dimensione completa, area o nodo.
- Il browser scarica un PNG.
Errori comuni
- Lasciare DevTools agganciato dentro la finestra, che riduce il viewport in una cattura normale.
- Dimenticare di reimpostare l'emulazione, così le catture successive usano una dimensione da telefono.
- Catturare prima che compaiano le immagini caricate in modo differito.
- Considerare l'emulazione una prova che una pagina funziona su un dispositivo reale.
Ripeti gli stessi screenshot più volte?
Temposhot Website Capture ripete la stessa cattura per un elenco di URL con Desktop 1920×1080, Tablet 768×1024 o Mobile 390×844. Vedi automazione degli screenshot di siti web.
Domande frequenti
Gli strumenti possono catturare una pagina intera in un'unica immagine?
Il comando di Chrome "Capture full size screenshot" renderizza l'intera altezza della pagina. Le pagine molto lunghe o con lazy loading possono comunque risultare incomplete.
Esiste un'opzione più semplice per una sola pagina?
La estensione Temposhot Full Page Screenshot per Chrome 116 o successivo scorre la pagina attiva e scarica un unico PNG.
Fonti
Risorse correlate
- Opzioni di Website Capture: impostazioni di dispositivo, area e attesa.
- Automatizzare gli screenshot di siti web senza codice: una guida passo passo.
- Screenshot Resolution Checker: verifica la dimensione in pixel di una cattura.
Ripeti sempre gli stessi screenshot?
Temposhot cattura a intervalli di tempo una schermata, una finestra o un'area e esporta il set come PDF, immagini, ZIP o MP4. Gli strumenti gratuiti online gestiscono le singole immagini.
Risorse correlate
Termini correlati
- Browser headlessCos'è un browser headless, come si usa per gli screenshot automatici ed errori comuni da evitare.
- Screenshot a pagina interaCos'è uno screenshot a pagina intera, in cosa differisce dalle catture di viewport e di scorrimento e quando usarlo.
- Screenshot del viewportCos'è uno screenshot del viewport, in cosa differisce dalla cattura a pagina intera e quando è la scelta giusta.
- Screenshot responsiveCosa sono gli screenshot responsive, le dimensioni del viewport più usate ed errori da evitare quando si cattura su più dispositivi.