Jag skulle vilja dela med dig ett coolt trick för Mozilla Firefox som kan öka din produktivitet och spara tid. När du surfar på nätet vill du ibland dela något med dina vänner genom att ta en skärmdump av det. Men det krävs flera steg för att ta en skärmdump av hela sidan, spara den, beskära den etc. I den här artikeln kommer vi att se hur man tar en skärmdump av ett specifikt element direkt på en webbsida utan att använda tillägg.
Annons
När en webbsida laddas skapar din webbläsare en dokumentobjektmodell för sidan. DOM är konstruerad som en trädstruktur där varje nod är ett objekt som representerar en del av dokumentet.
Låt oss se hur du kan använda detta för att bara fånga ett visst element i din skärmdump.
Till ta en skärmdump av ett specifikt webbsideelement i Firefox , gör följande steg:
- Öppna önskad sida i Firefox och högerklicka på det element du vill fånga.
- Från snabbmenyn väljer du 'Inspektera element':
- Inspektörverktyget öppnas. Observera att den har en brödsmulskontroll för DOM-trädnoderna:
- Där kan du högerklicka på vilket element som helst och välja Skärmdumpnod från snabbmenyn:
Det är precis vad vi behöver.
Det är precis vad vi behöver.Det fantastiska med den här funktionen är att den också fångar långa element, inklusive de flesta element som kräver rullning. I mitt fall är här hur skärmdumpen ser ut:
Alternativt kan du använda den inbyggda skärmdump kommando. Tidigare skrev jag Hur man tar en skärmdump av den öppnade sidan i Firefox . I den nämnda artikeln använde vi det inbyggda Firefox-kommandot 'skärmdump' för att fånga hela sidan. Samma funktionalitet kan användas för att skärmdumpa ett visst element på den öppnade sidan.
- Öppna Firefox och tryck på Skift + F2 på tangentbordet. Firefox öppnar en konsol / kommandorad längst ner på skärmen.
- Skriv in följande kommando inuti det:
skärmdump - väljarens namn
Byt ut namnet 'del' med lämpligt väljarnamn. I mitt fall borde det vara
skärmdump --selector '# widget-apps> .iconlist> .iconlist-content> ul'
Den andra metoden är användbar för webbutvecklare som känner till den exakta sökvägen för DOM-element. Den genomsnittliga användaren föredrar uppenbarligen den första metoden för att ta skärmdumpen av ett specifikt webbsideelement.
