← Terug naar functies
Free

Schermafbeelding

Screenshot legt afbeeldingen van hoge kwaliteit van elke webpagina vast in twee modi: zichtbare gebied (precies wat je in het browservenster ziet) of volledige pagina (de gehele pagina van boven naar beneden, inclusief inhoud onder de vouw). Schermafbeeldingen worden opgeslagen als afbeeldingen met hoge resolutie PNG en onmiddellijk naar je apparaat gedownload — geen cloud-uploads, geen accounts, geen wachten.

Browser-native schermafbeeldingen (met OS-niveau tools zoals Cmd+Shift+4 of Snipping Tool) leggen je hele scherm vast, inclusief browser chrome, werkbalken en andere vensters. Ze kunnen inhoud onder de vouw niet vastleggen. Het Screenshot-gereedschap van DevSuite lost beide problemen op — het legt alleen de webpagina-inhoud vast (geen browser-UI) en kan door de gehele pagina scrollen om een naadloze afbeelding van de volledige pagina te maken. De modus voor zichtbare gebieden gebruikt de native capture API van Chrome voor pixelperfecte nauwkeurigheid. De modus Volledige pagina schuift de pagina automatisch door, legt elke viewport-tegel vast en naait deze samen in één continue afbeelding. De uitvoer is een afbeelding met volledige resolutie PNG (die overeenkomt met de pixelverhouding van je scherm), dus schermafbeeldingen zijn helder op Retina en high-DPI displays.

Live voorvertoning
example.com/landing-page
Zichtbaar gebied
Volledige pagina PNG · Volledige resolutie
Gebied vastleggen
Vastleggingsinfo
Breedte1440px
Hoogte900px
FormatterenPNG
2x
Downloaden
Belangrijkste kenmerken

Vastlegging zichtbare gebied

Leg precies vast wat zichtbaar is in de browserviewport — de precieze rechthoek van inhoud die de gebruiker ziet. Geen browser chrome, geen werkbalken, geen schuifbalken. Alleen de zuivere webpagina-inhoud zoals deze op het scherm verschijnt. Eén klik, onmiddellijke vastlegging.

Schermafbeelding volledige pagina

Leg de gehele pagina van helemaal boven naar beneden vast, inclusief alle inhoud onder de vouw. Het gereedschap schuift automatisch door de pagina, legt elke sectie vast en naait de tegels in één naadloze, continue afbeelding. Werkt op pagina's van elke lengte.

Retina / High-DPI-kwaliteit

Schermafbeeldingen worden vastgelegd met de native pixelverhouding van je display (2x op Retina, 1,5x op sommige Windows-displays). Het resultaat is een heldere, afbeelding met hoge resolutie die scherp uitziet, zelfs indien ingezoomed — niet de vage opschaling die je van OS-schermafbeeldingen krijgt.

Onmiddellijke PNG-download

De vastgelegde afbeelding wordt als lossless PNG-bestand opgeslagen en onmiddellijk naar je apparaat gedownload. Geen cloud-upload, geen wachten op verwerking, geen account vereist. Het bestand verschijnt binnen seconden in je downloadmap.

Schone inhoud alleen

De vastlegging bevat alleen de webpagina-inhoud — geen browsertabbladen, adresbalk, bladwijzerbalk of extensiewerkbalk. De uitvoer ziet er precies zo uit als de pagina eruit zou zien als de browser-UI niet bestond.

Werkt op elke pagina

Leg elke webpagina vast, ongeacht hoe deze is opgebouwd — statische HTML, SPA's (React, Vue), pagina's met lui geladen afbeeldingen, oneindig scrollen, vaste kopteksten en elementen met vaste positie. De modus Volledige pagina verwerkt ze allemaal.

Veelvoorkomende scenario's

Portfolio & case studiedocumentatie

Maak schermafbeeldingen van volledige pagina's van websites die je hebt ontworpen of ontwikkeld voor je portfolio. De modus Volledige pagina geeft je een volledige, naadloze afbeelding van het volledige pagina-ontwerp — perfect voor Behance, Dribbble of portfoliocase studies.

Bugmeldingen met visuele context

Bij het melden van een fout is een schermafbeelding duizend woorden waard. Leg de exacte viewport vast met het probleem, of een schermafbeelding van de volledige pagina met de impact van de fout op de gehele indeling. Voeg het toe aan je GitHub-issue of Jira-ticket.

Ontwerp beoordeling en goedkeuring

Maak schermafbeeldingen van de huidige status van een staging-site voor beoordeling door belanghebbenden. Schermafbeeldingen van volledige pagina's laten clients het volledige ontwerp zien zonder de site zelf te hoeven bezoeken — handig voor beoordelingen met niet-technische belanghebbenden.

Voor/na-vergelijkingen

Maak een schermafbeelding voordat je wijzigingen aanbrengt, maak er daarna nog een. Vergelijk de twee afbeeldingen naast elkaar om te controleren of je CSS- of lay-outwijzigingen er op de hele pagina correct uitzien, niet alleen in het gedeelte waar je je op concentreerde.

Inhoud voor sociale media en blog

Maak schone, professionele afbeeldingen van webpagina's voor blogberichten, tweets of presentaties. De toolbar-vrije, browser-chrome-vrije uitvoer ziet er verzorgd en professioneel uit — geen noodzaak om browser-UI uit te snijden.

Hoe te gebruiken
1

Activeer het Screenshot-gereedschap

Open het DevSuite Pro dock of pop-up en klik op het Screenshot-pictogram. Een moduskiezer verschijnt met twee opties: "Zichtbare gebied" en "Volledige pagina".

2

Kies je capturemodus

Klik op "Zichtbare gebied" om de huidige viewport vast te leggen (wat je nu ziet), of "Volledige pagina" om de gehele pagina van boven naar beneden vast te leggen.

3

Wacht op vastlegging

Zichtbare gebiedvastleggingen zijn onmiddellijk (onder 1 seconde). Volledige paginavastleggingen nemen een paar seconden in beslag terwijl het gereedschap door scrolt en tegels naait. Een voortgangsindicator toont de vastleggingsstatus.

4

Download de PNG

De vastgelegde afbeelding wordt automatisch als PNG-bestand gedownload. Controleer je browserdownloadmap voor het bestand, benoemd met de paginatitel en timestamp.

5

Meer schermafbeeldingen maken

Het gereedschap blijft actief na elke vastlegging. Maak aanvullende schermafbeeldingen van dezelfde of andere pagina's zonder opnieuw te activeren. Scroll, maak wijzigingen en leg opnieuw vast.

Klaar om te proberen?

Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.

Toevoegen aan Chrome Toevoegen aan Edge Toevoegen aan FireFox