10 sätt att skärmdumpa hela webbsidan på Mac eller Windows

Om du letar efter hur man tar en hel webbsida skärmdump på Mac eller PC, det här inlägget för dig. Jag har provat en handfull verktyg och tekniker som påstår sig kunna skärmdumpa en hel webbsida, men bara ett fåtal fungerar fortfarande när detta skrivs.

Du vill få detta gjort snabbt, så jag ska visa dig hur du gör det steg för steg. Jag kommer också att peka på fördelarna och nackdelarna med varje metod, ville bara spara tid på att ta reda på vilken metod som är bäst för dig.

Den här guiden är för dig som vill ta en hel skärmdump av hela eller långa webbsidan – vilket innebär att det finns avsnitt som inte är helt synliga på din skärm.

Om du bara vill fånga ett statiskt fönster eller en hel skrivbordsskärm, är den här guiden inte till dig. Du kan använda de inbyggda verktygen på din dator eller telefon för att få det gjort snabbt: shift + Kommando + 4 (macOS) eller ctrl + PrtScn (Windows).

Sammanfattning:

• Vill du inte ladda ner någon programvara eller tillägg? Prova Förfarande 1 or Förfarande 7.
• Om du använder webbläsaren Mozilla Firefox, försök Förfarande 2.
• Om du vill ta skärmdumparna och göra enkla redigeringar, försök Metod 3, 5, 6.

Snabb uppdatering: För Mac-användare är det till och med möjligt att ta en skärmdump i full storlek utan webbläsartillägg.

1. Öppna DevTools i Chrome (kommando + alternativ + I)

2. Öppna kommandomenyn (kommando + skift + P) och skriv ‘skärmdump’

3. Välj ett av de två alternativen ‘Fånga skärmdump i full storlek’ av ‘Fånga skärmdump’.

4. Den tagna bilden kommer att laddas ner till din dator.

– Tips bidragit av vår läsare, Hans Kuijpers.

1. Skriv ut och spara en hel webbsida som PDF

Anta att du vill extrahera, säg, ett resultaträkningsblad från Yahoo Finance. Öppna först sidan i en webbläsare. Här använder jag Chrome på min Mac som exempel.

Steg 1: På Chrome-menyn, klicka på Arkiv > Skriv ut.

Steg 2: Klicka på knappen ‘Spara’ för att exportera sidan till en PDF-fil.

Steg 3: Om du vill bädda in ekonomibladet i ett PowerPoint-projekt kan du behöva konvertera PDF-filen till en bild i PNG- eller JPEG-format först och sedan beskära bilden endast för att inkludera datadelen.

Fördelar:

• Det går snabbt.
• Du behöver inte ladda ner programvara från tredje part.
• Skärmbildskvaliteten är bra.

Nackdelar:

• Det kan behövas extra tid för att konvertera PDF-filen till en bild.
• Det är svårt att direkt anpassa skärmdumparna.

2. Firefox-skärmdumpar (för Firefox-användare)

Firefox Screenshots är en ny funktion utvecklad av Mozilla-teamet för att hjälpa dig att ta, ladda ner, samla in och dela skärmdumpar. Du kan använda den här funktionen för att snabbt spara en skärmdump av en hel webbsida.

Steg 1: Klicka på menyn Sidåtgärder i adressfältet.

Steg 2: Välj alternativet ‘Spara hela sidan’.

Steg 3: Nu kan du välja att ladda ner bilden direkt till din dators skrivbord.

Sidnot: Jag såg att den här funktionen fortfarande är i BETA, så det är inte garanterat att Firefox kommer att behålla den. Men när det här inlägget senast uppdaterades är den här funktionen fortfarande tillgänglig. Den mest populära webbläsaren som Apple Safari eller Google Chrome erbjuder inte heller den här funktionen ännu.

3. Parallels Toolbox för Mac (Safari)

Om du vill ta en rullande skärmdump på Mac kommer du att älska den här funktionen som heter ‘Skärmdumpsida’ i Parallels Verktygslåda som inkluderar en handfull små verktyg.

Obs: Parallels Toolbox är inget gratisprogram, men det erbjuder en 7-dagars provperiod utan några funktionella begränsningar.

Steg 1: ladda ner Parallels Toolbox och installera appen på din Mac. Öppna den och hitta Ta skärmdumpar > Skärmdumpsida.

Steg 2: Klicka på Skärmdumpsida och det tar dig till ett annat fönster där du uppmanas att lägga till ett tillägg till Safari. När du har aktiverat det kommer du att se den här ikonen i din Safari-webbläsare.

Steg 3: Välj sidan du vill ta en skärmdump och klicka på Parallels Screenshot-ikonen, den kommer sedan automatiskt att rulla din sida och ta en skärmdump och spara som en PDF-fil på skrivbordet.

Fördelar:

• Kvaliteten på den utgående PDF-filen är mycket bra.
• Du behöver inte scrolla manuellt eftersom appen gör det åt dig.
• Förutom att ta en skärmdump av en webbsida kan du också fånga ett område eller ett fönster.

Nackdelar:

• Det tar lite tid att installera appen.
• Det är inte gratisprogram, även om en 7-dagars provperiod utan begränsning tillhandahålls.

4. Awesome Screenshot Plugin (för Chrome, Firefox, Safari)

Awesome Screenshot har ett plugin som kan fånga hela eller delar av vilken webbsida som helst. Det låter dig också redigera skärmdumparna: Du kan kommentera, lägga till kommentarer, sudda ut känslig information, etc. Plugin-programmet är kompatibelt med stora webbläsare inklusive Chrome, Firefox och Safari.

Här är länkarna för att lägga till plugin:

• krom
• firefox (Obs: eftersom Firefox-skärmdumparna nu är tillgängliga rekommenderar jag inte detta plugin längre. Se metod 2 för mer.)
• Safari

Jag har testat plugin-programmet på Chrome, Firefox och Safari, och de fungerar alla bra. För att göra det enklare använder jag Google Chrome som exempel. Stegen för att använda Awesome Screenshot för Firefox och Safari är ganska lika.

Steg 1: Öppna Chrome-länken ovan och klicka på ‘LÄGG TILL I CHROME.’

Steg 2: Klicka på ‘Lägg till tillägg.’

Steg 3: När tilläggsikonen dyker upp i Chrome-fältet klickar du på den och väljer alternativet ‘Fånga hela sidan’.

Steg 4: Inom några sekunder rullar den webbsidan nedåt automatiskt. En ny sida öppnas (se nedan), som visar dig skärmdumpen med en redigeringspanel som låter dig beskära, kommentera, lägga till bilder etc. Klicka på ‘Klar’ när du är klar.

Steg 5: Tryck på ‘ladda ner’-ikonen för att spara skärmdumpsbilden. Det är allt!

Fördelar:

• Mycket lätt att använda.
• Bildredigeringsfunktioner är fantastiska.
• Den är kompatibel med stora webbläsare.

Nackdelar:

• Tillägget kan stöta på vissa driftsproblem, enligt dess utvecklare. Jag har inte upplevt några sådana problem än.

5. Fånga ett rullningsfönster eller en hel sida med Snagit

jag gillar verkligen SnagIt (översyn). Det är en kraftfull skärmfångst- och redigeringsapp som låter dig göra nästan allt som har med skärmdumpning att göra. För att ta en fullständig skärmdump av en webbsida, följ stegen nedan (jag använder Snagit för Windows som ett exempel):

Observera: Snagit är inte gratisprogram, men det har en 15-dagars gratis provperiod.

Steg 1: Skaffa Snagit och installera den på din PC eller Mac. Öppna huvudfångstfönstret. Under Bild > Urval, se till att du väljer ‘Rullningsfönster.’ Tryck på den röda fånga-knappen för att fortsätta.

Steg 2: Leta reda på webbsidan du vill ta en skärmdump och flytta sedan markören till det området. Nu kommer Snagit att aktiveras och du kommer att se tre gula pilknappar röra sig. Den nedre pilen representerar ‘Fånga vertikalt rullningsområde’, högerpilen representerar ‘Fånga horisontellt rullningsområde’ och pilen i det nedre högra hörnet representerar ‘Fånga hela rullningsområdet.’ Jag klickade på alternativet ‘Fånga vertikalt rullningsområde’.

Steg 3: Nu rullar Snagit sidan automatiskt och fångar delarna utanför skärmen. Snart kommer ett Snagit Editor-panelfönster att dyka upp med skärmdumpen den precis tog. Se de tillgängliga redigeringsfunktionerna listade där? Det är därför Snagit sticker ut från mängden: Du kan göra så många ändringar du vill, med massor av alternativ.

Fördelar:

• Det kan fånga en rullande webbsida såväl som ett fönster.
• Kraftfulla bildredigeringsfunktioner.
• Mycket intuitivt och lätt att använda.

Nackdelar:

• Det tar tid att ladda ner och installera appen (~90MB i storlek).
• Det är inte gratis, även om det kommer med en 15-dagars provperiod.

6. Capto-appen (endast för Mac)

Capto är en produktivitetsapp för många Mac-användare, inklusive mig själv. Kärnvärdet för appen är att spela in skärmvideor på din Mac, men den låter dig också ta skärmdumpar och spara bilderna i dess bibliotek. Du kan sedan enkelt redigera, organisera och dela dem.

Notera: I likhet med Snagit är Capto inte heller gratisprogram men det erbjuder en testversion som du kan dra nytta av.

Så här tar du en hel skärmdump med Capto:

Steg 1: Öppna appen och klicka på ikonen ‘Webb’ högst upp i menyn. Där kan du välja att knäppa webbadressen till en webbsida på olika sätt. Om du till exempel redan är på sidan klickar du bara på ‘Snap Active Browser URL’

Steg 2: Du kan också redigera skärmdumpen, t.ex. markera ett område, lägga till en pil eller text, etc. med hjälp av verktygen på den vänstra panelen.

Steg 3: Nu kommer Capto att extrahera sidelementen och spara en bild i sitt bibliotek. Du väljer sedan Arkiv > Exportera för att spara den lokalt.

Obs: om du väljer att låta Capto snappa en webbsida från den aktiva webbläsaren kan detta ta lite tid om det blir en längre webbsida.

Andra metoder

Under min utforskning hittade jag även några andra arbetssätt. Jag vill inte presentera dem ovan eftersom de inte är lika bra med tanke på den tid och ansträngning du behöver för att investera och kvaliteten på resultatet. Ändå fungerar de, så testa gärna några av dem.

7. Ta en skärmdump i full storlek på Chrome utan webbläsartillägg

Detta tips delades vänligt av en av våra läsare, Hans Kuijpers.

• Öppna DevTools i Chrome (OPTION + CMD + I)
• Öppna kommandomenyn (CMD + SHIFT + P) och skriv in ‘skärmdump’
• Välj ett av de två alternativen ‘Fånga skärmdump i full storlek’ av ‘Fånga skärmdump’.
• Den tagna bilden kommer att laddas ner till din dator.

8. Web-Capture.Net

Det är en onlinetjänst för skärmdumpar på webbplatsen i full längd. Du först öppna webbplatsen, kopiera webbadressen till en webbsida som du vill ta en skärmdump och klistra in den här (se nedan). Du kan också välja vilket filformat som ska exporteras. Tryck på ‘Enter’ på ditt tangentbord för att fortsätta.

Ha tålamod. Det tog mig ungefär två minuter innan jag såg meddelandet ‘Din länk har bearbetats! Du kan ladda ner fil eller ZIP-arkiv.’ Nu kan du ladda ner skärmdumpen.

Fördelar:

• Det fungerar.
• Inget behov av att installera någon programvara.

Nackdelar:

• Massor av annonser på sin hemsida.
• Skärmdumpningsprocessen är långsam.
• Inga bildredigeringsfunktioner.

9. Helsidesskärmdump (Chrome-tillägg)

I likhet med Awesome Screenshot är Full Page Screen Capture ett Chrome-plugin som är otroligt lätt att använda. Installera det bara (här är länken till dess tilläggssida) i din Chrome-webbläsare, leta reda på webbsidan du vill fånga och tryck på tilläggsikonen. En skärmdump görs nästan omedelbart. Jag tyckte dock att det var mindre tilltalande eftersom det inte har de bildredigeringsfunktioner som Awesome Screenshot har.

10. Paparazzi (endast Mac)

Uppdatering: den här appen har inte uppdaterats på ganska länge, det kan finnas kompatibilitetsproblem med den senaste macOS. Därför rekommenderar jag det inte längre.

Paparazzi! är ett Mac-verktyg designat och utvecklat av Nate Weaver speciellt för att göra skärmdumpar av webbsidor. Det är ganska intuitivt. Bara kopiera och klistra in webbsideslänken, definiera bildstorleken eller fördröjningstiden, så kommer appen att returnera resultatet åt dig. När det är gjort klickar du på nedladdningsikonen i det nedre högra hörnet för att exportera skärmdumpen.

Den största oro jag har är att appen senast uppdaterades för ganska många år sedan, så jag är inte säker på om den kommer att vara kompatibel med framtida macOS-versioner.

Det här är de olika sätten att ta skärmdumpar för en hel eller rullande webbsida. Som jag sa i den snabba sammanfattningen, olika metoder har sina egna fördelar och nackdelar, så se till att välja den som bäst passar dina behov. Jag överlåter åt dig att välja vilken/vilka du vill använda.

Som alltid, om du har några frågor eller förslag, lämna gärna en kommentar nedan.