Comment faire une capture d'écran qui inclut un élément défilant dans une page web dans Firefox ?

Ma suggestion est d'utiliser le La fonction intégrée de Firefox qui vous permet de faire des captures d'écran d'un seul élément DOM.

Il suffit d'ouvrir les outils de développement → Trouver l'élément → Clic droit et prendre une capture d'écran.

Cela n'a pas fonctionné sur l'un de mes sites internes et je ne peux donc pas dire que cela fonctionnera pour tous.

Mise à jour après l'édition de l'OP :

Si vous avez l'intention d'enregistrer une page complète avec tout le contenu de l'élément DOM, comme indiqué ci-dessous, vous devez modifier en direct la hauteur de l'élément DOM. mais ...

Cela va pousser beaucoup d'éléments DOM en dehors de la fenêtre de visualisation et la capture d'écran ou tout autre outil AFAIK ne les capturera pas, ce qui va à l'encontre de votre objectif je pense.

Lire ci-dessous le texte de https://en.wikipedia.org/wiki/Screenshot

Une capture d'écran, une capture d'écran, un capuchon d'écran, un capuchon, un vidage d'écran, etc. screengrab est une image prise par une personne pour enregistrer les éléments visibles suivants visibles affichés sur le moniteur, le téléviseur ou tout autre dispositif de sortie visuelle utilisé. dispositif de sortie visuelle utilisé.

Si je devais vraiment le faire à votre façon, je créerais un GIF ou je ferais deux captures d'écran, l'une de la page entière et l'autre de l'élément DOM, pour les fusionner en une seule.

2021 Edit

La barre d'outils a été supprimée de FF. Mais vous pouvez toujours accéder aux commandes en les tapant dans la console préfixée d'un signe : . Ainsi, pour les captures d'écran, utilisez

:screenshot --fullpage fullpage.png

ou

:screenshot --selector #hot-network-questions fullpage.png

Ancienne réponse

Vous pouvez utiliser la commande de capture d'écran de la barre d'outils du développeur :

1. Appuyez sur Shift + F2 pour ouvrir la barre d'outils ou la sélectionner dans le menu Outils du développeur Web.

2. Dans la barre d'outils, tapez la commande screenshot --fullpage fullpage.png .

Pour capturer un seul élément, vous pouvez utiliser son sélecteur css avec le drapeau --selector, par exemple.

screenshot --selector #hot-network-questions

vous obtiendrez l'image ci-dessous

En utilisant la fonction Mode de conception réactive Dans le cas d'un site Web, définissez la largeur à une valeur normale et la hauteur à une valeur suffisante pour englober toute la page. Cliquez ensuite sur le bouton de capture d'écran (l'icône de l'appareil photo).

Il existe un logiciel appelé Snagit qui pourrait résoudre votre problème. Ce logiciel peut réaliser des captures d'écran de différents types, comme une fenêtre défilante, et peut également enregistrer une vidéo.

Il s'agit d'une application payante, mais une version d'essai est également disponible.

J'utilise Screenpresso . Il vous permet de faire une capture d'écran défilante. En gros, vous faites une capture d'écran, vous la faites défiler vers le bas et vous en faites une autre, et ainsi de suite, puis Screenpresso les assemble. Screenpresso est également gratuit.

Pour info, le raccourci clavier pour faire défiler les captures d'écran est WindowsKey+Shift+PrintScreen. Vous devez ensuite cliquer sur la fenêtre que vous souhaitez faire défiler. Lorsque vous arrivez à la partie suivante de la capture d'écran, faites un clic droit, faites défiler vers le bas, faites un clic droit et ainsi de suite. Lorsque vous avez terminé, faites un clic gauche et elles seront assemblées. Veillez à ce qu'il y ait un certain chevauchement sur chaque capture d'écran afin que le processus d'assemblage fonctionne mieux.