Hvordan ta skjermbilder på Google Chrome

Google Chrome Developer Tools kan brukes til å ta skjermbilder av websideelementer fra Google Chrome. Du kan ta skjermbilder av spesifikke websideelementer eller hele websiden ved hjelp av Google Chrome Developer Tools.

I denne artikkelen vil vi vise deg hvordan du tar skjermbilder av spesifikke websideelementer eller hele websiden ved hjelp av Google Chrome Developer Tools.

Innholdsemne:

1. Åpne Google Chrome Developer Tools
2. Velge et spesifikt element fra websiden ved hjelp av Google Chrome Developer Tools
3. Tar skjermbilder av websideelementene ved hjelp av Google Chrome Developer Tools
4. Tar skjermbilder av hele websiden ved hjelp av Google Chrome Developer Tools
5. Konklusjon
6. Referanser

Åpne Google Chrome Developer Tools

For å åpne Google Chrome Developer Tools, kjør Google Chrome, besøk websiden du vil ta skjermbilder av og trykk + + Jeg.

Hvis du trenger hjelp til å åpne Google Chrome Developer Tools, kan du lese artikkelen om hvordan du åpner Google Chrome Developer Tools.

Velge et spesifikt element fra websiden ved hjelp av Google Chrome Developer Tools

Hvis du vil ta skjermbilder av et spesifikt element fra websiden ved hjelp av Google Chrome Developer Tools, må du kunne velge elementet du vil ta skjermbilder av fra websiden.

Du kan velge et element fra websiden fra "Elements" -fanen i Google Chrome Developer Tools.

Du kan også bruke "inspisere" verktøyet til Google Chrome Developer Tools for å velge et element fra websiden.

For å bruke inspiseringsverktøyet, klikk på

Fra øverste venstre hjørne av Google Chrome Developer Tools.

Velg elementet du vil ta et skjermbilde av fra websiden. Når elementet er valgt, skal HTML -kodeseksjonen også automatisk velges i fanen "Elements".

Tar skjermbilder av websideelementene ved hjelp av Google Chrome Developer Tools

For å ta et skjermbilde av det valgte websidenelementet, høyreklikk (RMB) på det valgte HTML-overordnede elementet fra fanen “Elements” og klikk på “Capture Node Screenshot”.

Et skjermbilde av det valgte websidenelementet skal tas og lagres på datamaskinen din.

Som du kan se, blir et skjermbilde av det valgte websidenelementet tatt med hell.

La oss prøve å ta et skjermbilde av et annet websideelement ved hjelp av Google Chrome Developer Tools.

Velg innholdsfortegnelsen i en av Linuxhint-artiklene, høyreklikk (RMB) på den, og klikk på "Capture Node-skjermbildet" for å ta et skjermbilde akkurat som vi nylig gjorde.

Et skjermbilde er nå tatt og lagret.

Som du kan se, er et skjermbilde av bare innholdsfortegnelsen tatt.

Tar skjermbilder av hele websiden ved hjelp av Google Chrome Developer Tools

For å ta et skjermbilde av hele websiden, navigerer du til "Elements" -fanen i Google Chrome Developer Tools. Bla helt opp og velg HTML -taggen. Dette velger hele websiden.

Nå, høyreklikk (RMB) på HTML-taggen og klikk på “Capture Node Screenshot”.

Et skjermbilde av hele websiden skal tas og lagres på datamaskinen din.

Som du ser er skjermdumpen på hele websiden tatt med hell.

Konklusjon

Vi viste deg hvordan du åpner Google Chrome Developer Tools. Vi viste deg også hvordan du velger spesifikke websideelementer ved å bruke Inspect -verktøyet til Google Chrome Developer Tools og hvordan du tar skjermbilder av spesifikke websideelementer og hele websiden ved hjelp av Google Chrome Developer Tools.

Referanser:

• https: // utvikler.krom.com/blogg/new-in-devtools-62/#node-screenshots