Hoe maak je een screenshot in Google Chrome met behulp van Dev Tools

Inhoudsopgave:

Hoe maak je een screenshot in Google Chrome met behulp van Dev Tools
Hoe maak je een screenshot in Google Chrome met behulp van Dev Tools
Anonim

Wat te weten

  • Op een pc: Druk op Ctrl + Shift + I en vervolgens op Ctrl + Shift P.
  • Mac: Druk op Command + Option + I en vervolgens op Command + Shift P.
  • Typ vervolgens "screenshot" om de vier screenshot-opties te zien.

Dit artikel legt uit hoe je screenshots kunt maken in Chrome met behulp van ontwikkelaarstools.

De ontwikkelaarstools van Chrome gebruiken om screenshots te maken

Het verschil tussen het gebruik van de toets Print Screen en de Chrome-tool is dat de Chrome-screenshottool niet de randen van het Chrome-browservenster bevat, alleen de inhoud van de webpagina. Als u alleen de pagina-inhoud wilt vastleggen zonder uw schermafbeeldingen te bewerken, kunnen de ontwikkelaarstools u een stap besparen.

U kunt menu's of sneltoetsen gebruiken om toegang te krijgen tot de ontwikkelaarstools.

  1. Druk op Ctrl + Shift + I op een pc, of Command + Option + I op een Mac. U kunt ook op het menupictogram met drie stippen klikken en More tools > Developer tools selecteren. Hierdoor wordt het ontwikkelaarsmenu van Element Inspector geopend, waarin de webpagina's worden weergegeven. HTML-codering.

    Image
    Image
  2. Druk vervolgens op Ctrl + Shift P (pc) of Command + Shift P (Mac) of klik op het menu met drie stippen voor DevTools aanpassen en beheren en selecteer Opdracht uitvoeren.

    Image
    Image

    Voor alleen een normale of volledige schermafbeelding, klik op het menupictogram met drie stippen bovenaan de pagina die u wilt vastleggen en selecteer Screenshot vastleggen of Maak een screenshot op volledige grootte.

  3. Typ "screenshot" om de screenshot-opties te zien, namelijk:

    • Capture area screenshot
    • Capture full size screenshot
    • Capture node screenshot
    • Screenshot maken
    Image
    Image
  4. Scroll naar beneden om het type schermafbeelding te selecteren dat u wilt vastleggen met uw muis of de pijltoetsen op uw toetsenbord.

Chrome Developer Screenshot-opties

Selecteer Capture area screenshot om een deel van het scherm te pakken. Gebruik je muis om een kader rond het gebied te slepen waarvan je een screenshot wilt maken.

Om een screenshot van een hele webpagina te krijgen, selecteer Capture full size screenshot. Met deze optie krijgt u een afbeelding van een webpagina die niet comfortabel op één scherm past.

Deze optie had gemengde resultaten in onze tests, afhankelijk van de website.

Als je een standaard screenshot wilt, kies dan Capture screenshot, dat pakt wat zichtbaar is op je scherm.

Ten slotte kunt u een screenshot van een HTML-element krijgen door Capture node screenshot. te kiezen

Nadat je een screenshot hebt gemaakt, krijg je een dialoogvenster Opslaan. Kies een map en geef je screenshot een bestandsnaam. Alle schermafbeeldingen die zijn gemaakt met hulpprogramma's voor ontwikkelaars zijn ook beschikbaar in de downloadmanager van Chrome.

Aanbevolen: