Faire une capture d'écran de la page Web avec le cadre de l'appareil dans Chrome

Une fonctionnalité moins connue de Google Chrome sur les systèmes d'exploitation de bureau est la possibilité de capturer une capture d'écran d'une page ouverte comme si la capture d'écran était celle du navigateur exécuté sur un appareil mobile. Il peut même ajouter un cadre autour de la capture d'écran pour qu'elle ressemble à une photo réaliste d'un smartphone. Voici comment cela peut être fait.

Il existe un outil spécial dans les outils de développement Chrome qui vous permet d'émuler un appareil mobile. Il est très utile pour les développeurs de vérifier à quoi ressemblent leurs sites Web sur les smartphones et les appareils à petit écran. Il permet de spécifier une taille d'écran personnalisée ou d'utiliser des tailles d'appareils prédéfinies comme l'iPhone, l'iPad, le Nexus ou le Galaxy de Samsung. Une fois la page ouverte affichée dans l'émulateur de périphérique, l'utilisateur peut capturer une capture d'écran de la page. Il est également possible d'activer un cadre de périphérique autour de la page pour qu'elle ressemble à une photo réaliste.

Vous pouvez le faire comme suit.

1. Ouvrez la page souhaitée dans Chrome et appuyez sur F12. Cela ouvrira les outils de développement :
2. Cliquez sur le bouton de l'émulateur d'appareil mobile pour basculer en mode Outils de développement :
3. Sous le sélecteur de périphérique, sélectionnez un périphérique. Par exemple, je sélectionnerai l'iPhone 6 :
4. Maintenant, cliquez sur le menu à 3 points à droite du sélecteur d'appareil et cochez l'option « Afficher le cadre de l'appareil » :
5. Voila, maintenant votre page Web s'affiche dans un joli cadre d'appareil :
   
   Maintenant, cliquez à nouveau sur le menu à trois points et sélectionnez "Capturer une capture d'écran":

Le résultat sera le suivant :

Vous avez terminé.