Hur man tar en skärmdump på Google Chrome med hjälp av utvecklingsverktyg

Innehållsförteckning:

Hur man tar en skärmdump på Google Chrome med hjälp av utvecklingsverktyg
Hur man tar en skärmdump på Google Chrome med hjälp av utvecklingsverktyg
Anonim

Vad att veta

  • På en PC: Tryck Ctrl + Shift + I sedan Ctrl + Shift P.
  • Mac: Tryck Command + Option + I sedan Command + Shift P.
  • Skriv sedan "skärmdump" för att se de fyra skärmdumps alternativen.

Den här artikeln förklarar hur du tar skärmdumpar i Chrome med hjälp av utvecklarverktyg.

Hur man använder Chromes utvecklarverktyg för att ta skärmdumpar

Skillnaden mellan att använda Print Screen-tangenten och Chrome-verktyget är att Chrome-skärmdumpsverktyget inte inkluderar kanterna i Chrome-webbläsarfönstret, bara webbsidans innehåll. Om du bara vill fånga sidinnehållet utan att redigera dina skärmdumpar kan utvecklarverktygen spara dig ett steg.

Du kan använda menyer eller kortkommandon för att komma åt utvecklarverktygen.

  1. Tryck Ctrl + Shift + I på en PC, eller Command + Option + I på en Mac. Alternativt, klicka på menyikonen med tre punkter och välj Fler verktyg > Utvecklarverktyg Om du gör detta öppnas Element Inspector-utvecklarmenyn, som visar webbsidans HTML-kodning.

    Image
    Image
  2. Tryck sedan Ctrl + Shift P (PC) eller Command + Shift P (Mac) eller klicka på menyn med tre punkter för Customize And Control DevTools och välj Kör kommando.

    Image
    Image

    För endast en vanlig eller fullstor skärmdump, klicka på menyikonen med tre punkter högst upp på sidan du vill ta och välj Capture screenshot eller Ta en skärmdump i full storlek.

  3. Skriv "skärmdump" för att se skärmdump alternativen, som är:

    • Skärmdump för fånga område
    • Fånga skärmdump i full storlek
    • Capture node screenshot
    • Capture screenshot
    Image
    Image
  4. Bläddra nedåt för att välja vilken skärmbildstyp du vill ta med musen eller piltangenterna på tangentbordet.

Chrome Developer Screenshot Options

Välj Capture area screenshot för att ta del av skärmen. Använd musen för att dra en ruta runt området du vill ta en skärmdump.

För att få en skärmdump av en hel webbsida, välj Capture full size screenshot. Det här alternativet låter dig få en bild av en webbsida som inte passar bra på en skärm.

Det här alternativet gav blandade resultat i våra tester, beroende på webbplatsen.

Om du vill ha en standardskärmdump, välj Capture screenshot, som tar tag i det som är synligt på din skärm.

Slutligen kan du få en skärmdump av ett HTML-element genom att välja Capture node screenshot.

När du har tagit en skärmdump får du en Spara-dialogruta. Välj en mapp och ge din skärmdump ett filnamn. Alla skärmdumpar som tagits med hjälp av utvecklarverktyg är också tillgängliga i Chromes nedladdningshanterare.

Rekommenderad: