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

Je voudrais partager avec vous une astuce intéressante pour Mozilla Firefox qui peut augmenter votre productivité et 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 la page entière, la sauvegarder, la recadrer, etc. Dans cet article, nous allons voir comment prendre directement une capture d'écran d'un élément spécifique sur une page Web sans utiliser d'add-ons.

Publicité

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 cliquez avec le bouton droit sur l'élément que vous souhaitez capturer.
2. Dans le menu contextuel, sélectionnez «Inspecter l'élément»:
3. L'outil inspecteur s'ouvrira. Notez qu'il a 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:

Vous pouvez également utiliser la fonction intégrée 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 intégrée de Firefox 'screenshot' 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 - sélecteur 'nom'

   Remplacez le nom «portion» par le nom du 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.