Hvordan ta et nettstedsskjermbilde med spesifikke dimensjoner ved hjelp av Google Chrome

Hvordan ta et skjermbilde med Google Chrome

Hvis du er et byrå eller et selskap som har en portefølje av nettsteder eller sider du vil dele på nettet, har du sannsynligvis gått gjennom smerten ved å prøve å fange uniform skjermbilder av hvert av nettstedene.

En av klientene som vi jobber med bygger vert Intranettløsninger som kan være internt vert innenfor rammen av et selskap. Intranett er utrolig nyttig for bedrifter å kommunisere bedriftsnyheter, distribuere markedsføringsinformasjon, gi fordelerinformasjon osv.

Vi hjalp OnSemble med å migrere deres intranettløsning fra morselskapets nettsted. Det var et omfattende prosjekt som inkluderte alt fra å bygge ut nye sosiale profiler, oppdatere Marketo, og deretter demontere noen av den tilpassede utviklingen de hadde gjort tidligere for å kombinere nettstedene sine.

Klientskjermbilder med Google Chrome

Du skjønner kanskje ikke dette, men du kan ta perfekte skjermbilder med Google Chromes innebygde sett med robuste utviklerverktøy. Interessant, det er ikke en veldig kjent funksjon til tross for at den har utrolig fleksibilitet.

Her er en rask videoopplæring om hvordan du tar et perfekt skjermbilde av en webside med Google Chrome:

Fremgangsmåte for å ta et skjermbilde med Google Chrome

Google Chromes utviklerverktøy har muligheten til å forhåndsvise et nettsted ved hjelp av enhetsverktøylinjen. Verktøyet ble bygget slik at utviklere kunne se hvordan nettstedet så ut i forskjellige visningsstørrelser på forskjellige enheter ... men det er tilfeldigvis også en perfekt måte å få et perfekt skjermbilde av en webside.

I dette tilfellet vil vi at hver av OnSembles viktigste klienter på tvers av bransjer som har bygget vakre intranettsteder, skal ta et skjermbilde slik at vi kan vise dem alle i en portefølje på deres nettside. Vi vil at sidene skal være 1200px brede og 800px høye. For å oppnå dette:

  1. Velg navigeringsknappen helt til høyre (3 vertikale prikker) Tilpass og kontroll-menyen.

Meny for utviklerverktøy med Google Chrome

  1. Plukke ut Flere verktøy> Utviklerverktøy

Utviklerverktøy med Google Chrome

  1. Bytt Enhetsverktøylinje for å få frem enhetsalternativene og dimensjonene.

Bytt enhetsverktøylinje med Google Chrome

  1. Sett det første alternativet til Responsive, sett deretter dimensjonene til 1200 x 800 og trykk enter. Siden vises nå med disse dimensjonene.

Responsive Device Toolbar Google Chrome

  1. På høyre side av enhetsverktøylinjen klikker du på navigeringsknappen (3 vertikale prikker) og velger Skjermbilde for fangst.

Ta skjermbilde med Google Chrome

  1. Google Chrome tar et perfekt skjermbilde og slipper det i ditt Nedlastinger mappen der du kan legge ved og sende den i en e-post. Pass på at du ikke velger skjermbilde i full størrelse, siden det tar hele lengden på siden og ignorerer høydegrensen.

Google Chrome hurtigtaster for skjermbilder

Hvis du er en hurtigtastmester, kan du også bare ta et helsides skjermbilde med disse snarveiene. Jeg liker ikke denne tilnærmingen, da jeg ikke kan angi maksimal høyde på visningsområdet ... men det er nyttig hvis du noen gang trengte et skjermbilde av en hel side.

Tastatursnarveier på en Mac:

1. Alt + Command + I 
2. Command + Shift + P

Tastatursnarveier på i Windows eller Linux:

1. Ctrl + Shift + I 
2. Ctrl + Shift + P

Hva tror du?

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.