Fai uno screenshot di un elemento specifico della pagina web in Firefox

Vorrei condividere con te un fantastico trucco per Mozilla Firefox che può aumentare la tua produttività e farti risparmiare tempo. Durante la navigazione sul Web, a volte desideri condividere qualcosa con i tuoi amici facendone uno screenshot. Ma ci vogliono diversi passaggi per fare uno screenshot dell'intera pagina, salvarlo, ritagliarlo ecc. In questo articolo vedremo come acquisire direttamente uno screenshot di un elemento specifico su una pagina web senza utilizzare componenti aggiuntivi.

Quando viene caricata una pagina Web, il browser Web crea un Document Object Model della pagina. Il DOM è costruito come una struttura ad albero in cui ogni nodo è un oggetto che rappresenta una parte del documento.

Vediamo come puoi usarlo per catturare solo un elemento specifico nello screenshot.

Per fare uno screenshot di un elemento specifico della pagina web in Firefox, eseguire i seguenti passaggi:

1. Apri la pagina desiderata in Firefox e fai clic con il pulsante destro del mouse sull'elemento che desideri acquisire.
2. Dal menu contestuale, seleziona "Ispeziona elemento":
3. Verrà aperto lo strumento di ispezione. Si noti che ha un controllo breadcrumb per i nodi dell'albero DOM:
4. Lì, puoi fare clic con il pulsante destro del mouse su qualsiasi elemento e scegliere Nodo screenshot dal menu contestuale:Questo è esattamente ciò di cui abbiamo bisogno.

La cosa grandiosa di questa funzione è che cattura anche elementi lunghi, inclusa la maggior parte degli elementi che richiedono lo scorrimento. Nel mio caso, ecco come appare lo screenshot:

In alternativa, è possibile utilizzare il built-in immagine dello schermo comando. Prima ho scritto Come fare uno screenshot della pagina aperta in Firefox. Nell'articolo menzionato, abbiamo utilizzato il comando integrato di Firefox "screenshot" per catturare l'intera pagina. La stessa funzionalità può essere utilizzata per eseguire lo screenshot di un elemento specifico nella pagina aperta.

1. Apri Firefox e premi Maiusc + F2 sulla tastiera. Firefox aprirà una console/riga di comando nella parte inferiore dello schermo.
2. Digita al suo interno il seguente comando:

   screenshot --selector "nome"

   Sostituisci il nome "porzione" con il nome del selettore appropriato. Nel mio caso, dovrebbe essere

   screenshot --selector "#widget-apps > .iconlist > .iconlist-content > ul"

Il secondo metodo è utile per gli sviluppatori web che conoscono l'esatto percorso dell'elemento DOM. L'utente medio preferirà ovviamente il primo metodo per acquisire lo screenshot di un elemento specifico della pagina web.