Gör en skärmdump av webbsidan med enhetsram i Chrome
En mindre känd funktion hos Google Chrome på operativsystem för datorer är möjligheten att ta en skärmdump av en öppnad sida som om skärmdumpen som togs var av webbläsaren som körs på en mobil enhet. Det kan till och med lägga till en ram runt skärmdumpen så att det ser ut som ett realistiskt foto av en smartphone. Här är hur det kan göras.
Det finns ett specialverktyg i Chrome Developer Tools som låter dig emulera en mobil enhet. Det är mycket användbart för utvecklare att kontrollera hur deras webbplatser ser ut på smartphones och små skärmar. Det gör det möjligt att ange en anpassad skärmstorlek eller använda fördefinierade enhetsstorlekar som iPhone, iPad, Nexus eller Samsungs Galaxy. När den öppnade sidan visas i enhetsemulatorn kan användaren ta en skärmdump av sidan. Det är också möjligt att aktivera en enhetsram runt sidan så att den ser ut som ett realistiskt foto.
Du kan göra det enligt följande.
- Öppna önskad sida i Chrome och tryck F12. Detta öppnar utvecklarverktyg:
- Klicka på emulatorknappen för mobila enheter för att växla läget för utvecklarverktyg:
- Välj någon enhet under enhetsväljaren. Till exempel kommer jag att välja iPhone 6:
- Klicka nu på menyn med tre punkter till höger om enhetsväljaren och markera alternativet "Visa enhetsram":
- Voila, nu visas din webbsida i en snygg enhetsram:
Klicka nu på menyn med tre punkter igen och välj "Ta skärmdump":
Resultatet blir som följer:
Du är färdig.