Lag skjermbilde av nettside med enhetsramme i Chrome

En mindre kjent funksjon ved Google Chrome på skrivebordsoperativsystemer er muligheten til å ta et skjermbilde av en åpnet side som om skjermbildet som ble tatt var av nettleseren som kjører på en mobilenhet. Den kan til og med legge til en ramme rundt skjermbildet slik at det ser ut som et realistisk bilde av en smarttelefon. Her er hvordan det kan gjøres.

Det er et spesialverktøy i Chrome Developer Tools som lar deg emulere en mobilenhet. Det er veldig nyttig for utviklere å sjekke hvordan nettsidene deres ser ut på smarttelefoner og enheter med små skjermer. Den lar deg spesifisere en egendefinert skjermstørrelse eller bruke forhåndsdefinerte enhetsstørrelser som iPhone, iPad, Nexus eller Samsungs Galaxy. Når den åpnede siden vises i enhetsemulatoren, kan brukeren ta et skjermbilde av siden. Det er også mulig å aktivere en enhetsramme rundt siden slik at den ser ut som et realistisk bilde.

Du kan gjøre det som følger.

1. Åpne ønsket side i Chrome og trykk F12. Dette åpner utviklerverktøy:
2. Klikk på emulatorknappen for mobilenheter for å bytte utviklerverktøy-modus:
3. Velg en enhet under enhetsvelgeren. For eksempel vil jeg velge iPhone 6:
4. Klikk nå på menyen med 3 prikker til høyre for enhetsvelgeren og merk av for alternativet "Vis enhetsramme":
5. Voila, nå vises nettsiden din i en fin enhetsramme:
   
   Klikk nå på menyen med tre prikker igjen og velg "Ta skjermbilde":

Resultatet blir som følger:

Du er ferdig.