Ta en skärmdump av ett specifikt webbsideselement i Firefox

Jag skulle vilja dela med mig av 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 du direkt tar en skärmdump av ett specifikt element på en webbsida utan att använda tillägg.

När en webbsida laddas skapar din webbläsare en dokumentobjektmodell av 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 specifikt element i din skärmdump.

Till ta en skärmdump av ett specifikt webbsideselement i Firefox, gör följande steg:

1. Öppna önskad sida i Firefox och högerklicka på elementet du vill fånga.
2. Välj "Inspektera element" från snabbmenyn:
3. Inspektörsverktyget kommer att öppnas. Lägg märke till att den har en brödsmulekontroll för DOM-trädnoderna:
4. Där kan du högerklicka på valfritt element och välja Skärmdump Node från snabbmenyn:Det är precis vad vi behöver.

Det fina 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, så här ser skärmdumpen 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 specifikt element på den öppnade sidan.

1. Öppna Firefox och tryck Skift + F2 på tangentbordet. Firefox öppnar en konsol/kommandorad längst ner på skärmen.
2. Skriv följande kommando i den:

   skärmdump --väljare "namn"

   Ersätt namnet "portion" med lämpligt väljarnamn. I mitt fall borde det vara det

   skärmdump --selector "#widget-apps > .iconlist > .iconlist-content > ul"

Den andra metoden är användbar för webbutvecklare som känner till den exakta DOM-elementsökvägen. Den genomsnittliga användaren kommer uppenbarligen att föredra den första metoden att ta skärmdumpen av ett specifikt webbsideelement.