Maak een screenshot van webpagina met apparaatframe in Chrome

Een minder bekende functie van Google Chrome op desktopbesturingssystemen is de mogelijkheid om een ​​schermafbeelding van een geopende pagina te maken alsof de schermafbeelding van de browser op een mobiel apparaat is. Het kan zelfs een kader rond de schermafbeelding toevoegen, zodat het eruitziet als een realistische foto van een smartphone. Hier is hoe het kan.

Er is een speciale tool in Chrome Developer Tools waarmee je een mobiel apparaat kunt emuleren. Het is erg handig voor ontwikkelaars om te controleren hoe hun websites eruitzien op smartphones en apparaten met een klein scherm. Hiermee kunt u een aangepast schermformaat opgeven of vooraf gedefinieerde apparaatformaten gebruiken, zoals iPhone, iPad, Nexus of Samsung Galaxy. Zodra de geopende pagina wordt weergegeven in de apparaatemulator, kan de gebruiker een screenshot van de pagina maken. Het is ook mogelijk om een ​​apparaatframe rond de pagina in te schakelen, zodat het eruitziet als een realistische foto.

Je kunt het als volgt doen.

1. Open de gewenste pagina in Chrome en druk op F12. Dit opent Developer Tools:
2. Klik op de emulatorknop voor mobiele apparaten om de modus Developer Tools te wijzigen:
3. Selecteer een apparaat onder de apparaatkiezer. Ik zal bijvoorbeeld iPhone 6 selecteren:
4. Klik nu op het menu met 3 stippen rechts van de apparaatkiezer en vink de optie "Toon apparaatframe" aan:
5. Voila, nu wordt uw webpagina weergegeven in een mooi apparaatframe:
   
   Klik nu opnieuw op het menu met de drie stippen en selecteer "Screenshot vastleggen":

Het resultaat zal als volgt zijn:

Je bent klaar.