Prendre des captures d'écran de page à l'aide de Devtools
Il m’est parfois arrivé de devoir montrer à un client ou à un coéquipier une capture d’écran complète de l’état actuel du site Web, ou même d’une partie de celui-ci, j’ai donc utilisé Capture d’écran pleine page et, pour tout autre type de capture d’écran, l’outil Snippet de Windows ou Snaggit. Si je souhaite l’héberger en ligne comme dans cet article Gyazo, qui dispose également d’un créateur de GIF.
Récemment, j’ai découvert que Devtools dispose d’un outil qui permet de réaliser une capture d’écran pleine page, aucune extension n’est nécessaire !
Ce n’est pas une idée nouvelle, elle a été incluse dans la mise à jour de Devtools en avril 2017, mais on dirait que je vis sous un rocher et que je ne l’ai pas découvert jusqu’à maintenant…
Outils de développement
Comme indiqué dans la page officielle des outils de développement :
Chrome DevTools est un ensemble d’outils de développement Web directement intégrés au navigateur Google Chrome. DevTools peut vous aider à modifier des pages à la volée et à diagnostiquer rapidement les problèmes, ce qui vous aide finalement à créer de meilleurs sites Web, plus rapidement.
Exécuter des commandes dans Devtools
Vous savez déjà comment ouvrir Devtools mais au cas où vous l’auriez simplement oublié et pour le bien de cet article, ouvrez-le en utilisant la touche F12 ou le raccourci Ctrl + Shift + I. Ensuite, vous devez ouvrir le Run command dans le menu de Devtools ou utiliser Ctrl + Shift + P.
Outil de capture d’écran
Si vous tapez screenshot, cela filtrera les commandes, il y aura 4 types de méthodes de capture d’écran que vous pourrez utiliser :
- Capture d’écran de la zone
- Capture d’écran en taille réelle
- Capture d’écran du nœud
- Capturer une capture d’écran
Avant de vérifier toutes les méthodes de capture d’écran, une fois que devtools aura fini de traiter l’image, il la téléchargera automatiquement avec le nom de la page Web.
Capture d’écran de la zone
Le area screenshot vous permettra de sélectionner une partie du site Web et de faire une capture d’écran.
Résultat :
Capture d’écran en taille réelle
Le full size screenshot prendra une capture d’écran de la page Web entière, du début à la fin.
Résultat :
Capture d’écran du nœud
Le node screenshot vous permettra de faire une capture d’écran d’un nœud sélectionné dans l’élément inspect.
Résultat :
Capturer une capture d’écran
Le capture screenshot prendra une capture d’écran de la page actuelle sans défilement ni taille du navigateur.
Résultat :
