Vorrei condividere con voi un fantastico trucco per Mozilla Firefox che può aumentare la vostra produttività e farvi risparmiare tempo. Mentre navighi sul Web, a volte desideri condividere qualcosa con i tuoi amici scattandone uno screenshot. Ma sono necessari diversi passaggi per acquisire 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.
Pubblicità
Quando viene caricata una pagina Web, il browser Web crea un modello a oggetti documento 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 nel tuo screenshot.
Per fare uno screenshot di uno specifico elemento di una pagina web in Firefox , effettua le seguenti operazioni:
- Apri la pagina desiderata in Firefox e fai clic con il pulsante destro del mouse sull'elemento che desideri acquisire.
- Dal menu contestuale, seleziona 'Ispeziona elemento':
- Lo strumento di ispezione verrà aperto. Si noti che ha un controllo breadcrumb per i nodi dell'albero DOM:
- Lì, puoi fare clic con il pulsante destro del mouse su qualsiasi elemento e scegliere Screenshot Node dal menu contestuale:
Questo è esattamente ciò di cui abbiamo bisogno.
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, puoi utilizzare il file immagine dello schermo comando. In precedenza, ho scritto Come acquisire uno screenshot della pagina aperta in Firefox . Nell'articolo citato, abbiamo utilizzato il comando 'screenshot' integrato in Firefox per acquisire l'intera pagina. La stessa funzionalità può essere utilizzata per catturare uno screenshot di un elemento specifico nella pagina aperta.
- Apri Firefox e premi Maiusc + F2 sulla tastiera. Firefox aprirà una console / riga di comando nella parte inferiore dello schermo.
- Digita il seguente comando al suo interno:
screenshot --selector 'name'
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 il percorso esatto dell'elemento DOM. L'utente medio ovviamente preferirà il primo metodo per acquisire lo screenshot di uno specifico elemento della pagina web.
