Crea uno screenshot della pagina web con il frame del dispositivo in Chrome

Una caratteristica meno nota di Google Chrome sui sistemi operativi desktop è la capacità di acquisire uno screenshot di una pagina aperta come se lo screenshot acquisito fosse del browser in esecuzione su un dispositivo mobile. Può persino aggiungere una cornice attorno allo screenshot in modo che sembri una foto realistica di uno smartphone. Ecco come si può fare.

C'è uno strumento speciale negli Strumenti per sviluppatori di Chrome che ti consente di emulare un dispositivo mobile. È molto utile per gli sviluppatori controllare l'aspetto dei loro siti Web su smartphone e dispositivi con schermo piccolo. Consente di specificare una dimensione dello schermo personalizzata o di utilizzare dimensioni di dispositivo predefinite come iPhone, iPad, Nexus o Samsung Galaxy. Una volta che la pagina aperta viene visualizzata nell'emulatore del dispositivo, l'utente può acquisire uno screenshot della pagina. È anche possibile abilitare una cornice del dispositivo attorno alla pagina in modo che appaia come una foto realistica.

Puoi farlo come segue.

1. Apri la pagina desiderata in Chrome e premi F12. Questo aprirà Strumenti per sviluppatori:
2. Fare clic sul pulsante dell'emulatore del dispositivo mobile per cambiare la modalità Strumenti per sviluppatori:
3. Sotto il selettore del dispositivo, seleziona un dispositivo. Ad esempio, selezionerò iPhone 6:
4. Ora, fai clic sul menu a 3 punti a destra del selettore del dispositivo e seleziona l'opzione 'Mostra frame dispositivo':
5. Voilà, ora la tua pagina web viene visualizzata all'interno di una bella cornice del dispositivo:
   
   Ora, fai di nuovo clic sul menu dei tre punti e seleziona 'Cattura screenshot':

Il risultato sarà il seguente:

Hai fatto.