Fermer

janvier 8, 2021

Comment faire une capture d'écran d'un site Web avec des dimensions spécifiques à l'aide de Google Chrome


Temps de lecture: 3 minutes

Si vous êtes une agence ou une entreprise qui possède un portefeuille de sites ou de pages que vous souhaitez partager en ligne, vous avez probablement souffert de essayant de capturer des captures d'écran uniformes de chacun des sites.

L'un des clients avec lesquels nous travaillons est hébergé Solutions Intranet pouvant être hébergées en interne dans entreprise. Les intranets sont extrêmement utiles aux entreprises pour communiquer les actualités de leur entreprise, diffuser des informations marketing, fournir des informations sur les avantages, etc.

Nous avons aidé OnSemble à migrer sa solution intranet hors du site Web de sa société mère. Il s'agissait d'un vaste projet qui intégrait tout, de la création de nouveaux profils sociaux à la mise à jour de Marketo, puis au démontage d'une partie du développement personnalisé qu'ils avaient fait dans le passé pour combiner leurs sites.

Captures d'écran client avec Google Chrome

Vous ne le réalisez peut-être pas, mais vous pouvez capturer des captures d'écran parfaites avec l'ensemble intégré d'outils de développement robustes de Google Chrome. Il est intéressant de noter que ce n'est pas une fonctionnalité très connue malgré sa flexibilité incroyable.

Voici un rapide didacticiel vidéo sur la façon de prendre une capture d'écran parfaite, de taille spécifique, d'une page Web à l'aide de Google Chrome:

Steps To Take A Capture d'écran avec Google Chrome

Les outils de développement de Google Chrome ont la possibilité de prévisualiser un site à l'aide de la barre d'outils de l'appareil. L'outil a été conçu pour que les développeurs puissent voir à quoi ressemblait le site dans différentes tailles de fenêtres sur différents appareils … mais il se trouve que c'est aussi un moyen idéal pour obtenir une capture d'écran parfaitement dimensionnée d'une page Web.

Dans ce cas, nous voulons chacun des principaux clients d'OnSemble dans les industries qui ont construit de magnifiques sites intranet pour prendre une capture d'écran afin que nous puissions tous les afficher dans un portefeuille sur leur site Web. Nous voulons que les pages mesurent 1 200 pixels de large sur 800 pixels de haut. Pour ce faire:

  1. Dans le bouton de navigation à l'extrême droite (3 points verticaux), sélectionnez le Menu Personnaliser et contrôler .
 Menu Outils de développement avec Google Chrome
  1. Sélectionnez Plus d'outils> Outils de développement
 Outils de développement avec Google Chrome
  1. Basculez la Barre d'outils de l'appareil pour afficher les options et les dimensions de l'appareil.
 Activer / désactiver la barre d'outils de l'appareil avec Google Chrome
  1. Définissez la première option sur Responsive puis définissez les dimensions sur 1200 x 800 et appuyez sur Entrée. La page s'affichera maintenant avec ces dimensions.
 Barre d'outils de l'appareil réactif Google Chrome
  1. Sur le côté droit de la barre d'outils de l'appareil, cliquez sur le bouton de navigation (3 points verticaux) et sélectionnez Capture d'écran .
 Capture d'écran avec Google Chrome
  1. Google Chrome prendra une capture d'écran parfaite et la déposera dans votre dossier Downloads où vous pourrez la joindre et envoyez-le dans un e-mail. Assurez-vous de ne pas sélectionner une capture d'écran en taille réelle, car cela prendra toute la longueur de la page et ignorera votre limite de hauteur.

Raccourcis clavier de Google Chrome pour les captures d'écran

Si vous êtes un maître des raccourcis clavier, vous pouvez également simplement prendre une capture d'écran pleine page avec ces raccourcis. Je n'aime pas cette approche car je ne peux pas définir la hauteur maximale de la fenêtre d'affichage … mais elle est utile si jamais vous avez besoin d'une capture d'écran d'une page entière.

Raccourcis clavier sur un Mac:

 1. Alt + Commande + I
2. Commande + Maj + P 

Raccourcis clavier sous Windows ou Linux:

 1. Ctrl + Maj + I
2. Ctrl + Maj + P 




Source link