De Google Chrome-browser biedt twee manieren om schermafbeeldingen van webpagina's op ware grootte te maken. Dit kan voor veel webwerkers nodig of nuttig zijn, of het nu gaat om ontwikkelaars, ontwerpers, redacteuren, managers, schrijvers, analisten of zowat elk ander mogelijk webgebaseerd optreden.

De benaderingen die we bespreken om schermafbeeldingen van webpagina's op volledige grootte te maken met Chrome, vereisen de volledige versie van Chrome voor elk apparaat op desktopniveau, inclusief Mac, Windows, Linux en Chromebook.Er zijn geen plug-ins vereist, omdat we ingebouwde ontwikkelaarstools gebruiken met Chrome.

opmerking dat we het hier hebben over de Chrome-browser voor desktop. U kunt ook paginagrote schermafbeeldingen maken met Firefox, Safari op Mac en Safari voor iPhone en iPad, als u dat wilt of wilt.

Schuivende schermafbeeldingen op volledige grootte vastleggen in Chrome

Klaar om een ​​schermafbeelding op volledige grootte van een webpagina in Chrome te maken? Dit is wat u moet doen:

1. Open Chrome Developer Tools (Bekijk > Developer > Developer Tools)



2. Klik op de knop Responsive Design Mode in de lade met ontwikkelaarstools



3. Scrol omlaag door de hele webpagina zodat alle afbeeldingen worden geladen (dit is belangrijk om lazy-load-afbeeldingen vast te leggen, een veelgebruikte techniek die wordt gebruikt om webpagina's te versnellen)
4. Klik op de drie verticale stippen in de rechterbovenhoek van de Responsive Design-tool en kies "Screenshot op volledige grootte vastleggen"



5. Het screenshot op volledige grootte verschijnt in uw standaard Chrome-downloadmap

Op de Mac vind je de volledige schermafbeelding van de webpagina die beschikbaar is in Gebruikersdownloads, tenzij je dat handmatig hebt gewijzigd.

De afmetingen van het vastgelegde screenshot zijn afhankelijk van het apparaat dat je hebt gekozen in de responsieve modus, bijvoorbeeld als je iPad Air hebt gekozen en een volledig scrollend screenshot hebt gemaakt van de startpagina van osxdaily.com, kan je screenshot zijn ongeveer 2084 × 16439 pixels. Uiteraard de langere stijl van een pagina of

Als je niet door een hele webpagina scrolt, worden eventuele lazy-loaded afbeeldingen niet vastgelegd door de schermafbeelding, waardoor de volledige paginaschermafbeelding onvolledig is en niet representatief is voor wat een gebruiker op de pagina ziet.

Screenshots van een volledige pagina vastleggen in Chrome via console

Een andere manier om schermafbeeldingen van een volledige pagina in Chrome te maken, is door de opdracht 'Uitvoeren' van de ontwikkelaarsconsole te gebruiken, 'screenshot' te typen en vervolgens 'Schermafbeelding op volledige grootte vastleggen' te kiezen uit de opties die verschijnen. Scroll zeker door de hele webpagina voordat je dit ook doet.

Dit is misschien een betere optie voor sommige gebruikers, maar het is een beetje ingewikkelder voor degenen die minder bekend zijn met opdrachtregels.

Zijn deze methoden voor Chrome eenvoudiger dan wat beschikbaar is in Safari voor Mac met Developer Tools? Of de supereenvoudige methode om volledige schermafbeeldingen van webpagina's op de Mac te maken met Firefox? Of de nog eenvoudigere manier om schermafbeeldingen van een volledige pagina te maken met iPhone of iPad? Dat is aan jou om te beslissen, en het hangt waarschijnlijk ook af van welke browser je het vaakst gebruikt, en je vaardigheid met elk van hen.