Sådan tager du skærmbilleder i Google Chrome

I denne artikel viser vi dig, hvordan du tager skærmbilleder af specifikke websideelementer eller hele websiden ved hjælp af Google Chrome Developer Tools.

Emne for indhold:

1. Åbning af Google Chrome Developer Tools
2. Valg af et specifikt element fra websiden ved hjælp af Google Chrome Developer Tools
3. Tage skærmbilleder af websidens elementer ved hjælp af Google Chrome Developer Tools
4. Tage skærmbilleder af hele websiden ved hjælp af Google Chrome Developer Tools
5. Konklusion
6. Referencer

Åbning af Google Chrome Developer Tools

For at åbne Google Chrome Developer Tools skal du køre Google Chrome, besøge den webside, du vil tage skærmbilleder af, og trykke på + + jeg .

Hvis du har brug for hjælp til at åbne Google Chrome Developer Tools, kan du læse artiklen om Sådan åbner du Google Chrome Developer Tools .

Valg af et specifikt element fra websiden ved hjælp af Google Chrome Developer Tools

Hvis du vil tage skærmbilleder af et bestemt element fra websiden ved hjælp af Google Chrome Developer Tools, skal du kunne vælge det element, du vil tage skærmbilleder af fra websiden.

Du kan vælge et element fra websiden fra fanen 'Elementer' i Google Chrome Developer Tools.

Du kan også bruge 'Inspicer'-værktøjet i Google Chrome Developer Tools til at vælge et element fra websiden.

Klik på for at bruge inspektionsværktøjet

fra øverste venstre hjørne af Google Chrome Developer Tools.

Vælg det element, du vil tage et skærmbillede af fra websiden. Når elementet er valgt, skal HTML-kodeafsnittet også automatisk vælges på fanen 'Elementer'.

Tage skærmbilleder af websidens elementer ved hjælp af Google Chrome Developer Tools

For at tage et skærmbillede af det valgte websideelement skal du højreklikke (RMB) på det valgte HTML-overordnede element fra fanen 'Elementer' og klikke på 'Capture node screenshot'.

Et skærmbillede af det valgte websideelement skal tages og gemmes på din computer.

Som du kan se, er der taget et skærmbillede af det valgte websideelement.

Lad os prøve at tage et skærmbillede af et andet websideelement ved hjælp af Google Chrome Developer Tools.

Vælg indholdsfortegnelsen i en af ​​LinuxHint-artiklerne, højreklik (RMB) på den, og klik på 'Capture node screenshot' for at tage et skærmbillede, ligesom vi for nylig gjorde.

Et skærmbillede er nu taget og gemt.

Som du kan se, tages der kun et skærmbillede af indholdsfortegnelsen.

Tage skærmbilleder af hele websiden ved hjælp af Google Chrome Developer Tools

For at tage et skærmbillede af hele websiden skal du navigere til fanen 'Elementer' i Google Chrome Developer Tools. Rul hele vejen op og vælg html-tagget. Dette vælger hele websiden.

Højreklik nu (RMB) på html-tagget og klik på 'Capture node screenshot'.

Et skærmbillede af hele websiden skal tages og gemmes på din computer.

Som du kan se, er skærmbilledet af hele websiden taget med succes.

Konklusion

Vi viste dig, hvordan du åbner Google Chrome Developer Tools. Vi viste dig også, hvordan du vælger specifikke websideelementer ved hjælp af inspektionsværktøjet i Google Chrome Developer Tools, og hvordan du tager skærmbilleder af specifikke websideelementer og hele websiden ved hjælp af Google Chrome Developer Tools.

Referencer:

• https://developer.chrome.com/blog/new-in-devtools-62/#node-screenshots