Prendre une capture d'écran d'un élément de page Web spécifique dans Firefox

J'aimerais partager avec vous une astuce intéressante pour Mozilla Firefox qui peut augmenter votre productivité et vous faire gagner du temps. En surfant sur le Web, vous souhaitez parfois partager quelque chose avec vos amis en prenant une capture d'écran. Mais il faut plusieurs étapes pour prendre une capture d'écran de toute la page, l'enregistrer, la recadrer, etc. Dans cet article, nous verrons comment faire directement une capture d'écran d'un élément spécifique sur une page web sans utiliser de modules complémentaires.

Lorsqu'une page Web est chargée, votre navigateur Web crée un modèle objet de document de la page. Le DOM est construit comme une structure arborescente dans laquelle chaque nœud est un objet représentant une partie du document.

Voyons comment vous pouvez l'utiliser pour capturer uniquement un élément spécifique dans votre capture d'écran.

À prendre une capture d'écran d'un élément de page Web spécifique dans Firefox, procédez comme suit :

1. Ouvrez la page souhaitée dans Firefox et faites un clic droit sur l'élément que vous souhaitez capturer.
2. Dans le menu contextuel, sélectionnez « Inspecter l'élément » :
3. L'outil d'inspection s'ouvrira. Notez qu'il dispose d'un contrôle de fil d'Ariane pour les nœuds de l'arborescence DOM :
4. Là, vous pouvez faire un clic droit sur n'importe quel élément et choisir Nœud de capture d'écran depuis le menu contextuel :C'est exactement ce dont nous avons besoin.

L'avantage de cette fonctionnalité est qu'elle capture également des éléments longs, y compris la plupart des éléments qui nécessitent un défilement. Dans mon cas, voici à quoi ressemble la capture d'écran :

Alternativement, vous pouvez utiliser le capture d'écran commander. Plus tôt, j'ai écrit Comment faire une capture d'écran de la page ouverte dans Firefox. Dans l'article mentionné, nous avons utilisé la commande Firefox "capture d'écran" intégrée pour capturer la page entière. La même fonctionnalité peut être utilisée pour capturer un élément spécifique sur la page ouverte.

1. Ouvrez Firefox et appuyez sur Maj + F2 sur le clavier. Firefox ouvrira une console/ligne de commande en bas de l'écran.
2. Tapez la commande suivante à l'intérieur:

   capture d'écran --selector "nom"

   Remplacez le nom « portion » par le nom de sélecteur approprié. Dans mon cas, ça devrait être

   capture d'écran --selector "#widget-apps > .iconlist > .iconlist-content > ul"

La deuxième méthode est utile pour les développeurs Web qui connaissent le chemin exact de l'élément DOM. L'utilisateur moyen préférera évidemment la première méthode pour prendre la capture d'écran d'un élément de page Web spécifique.