Faire une capture d'écran d'un site en version mobile depuis un ordinateur

Le moyen le plus rapide de faire une capture d’écran mobile d’un site depuis un ordinateur est d’ouvrir la page en vue mobile, puis de la capturer : dans le mode appareil des DevTools de Chrome, utilisez Capture screenshot ou Capture full size screenshot dans le menu de la barre d’appareils ; dans une extension de vue mobile, cliquez sur son bouton de capture. Les deux produisent une image de la page telle qu’un téléphone l’affiche, sans toucher à un téléphone.

Le choix de la méthode dépend de ce qu’il vous faut, l’écran visible ou la page entière, et de la présence ou non d’un cadre de téléphone sur l’image.

Zone visible ou page entière ?

Décidez-le d’abord, car les outils diffèrent.

Une capture de la zone visible montre ce qu’une personne voit sur l’écran du téléphone sans faire défiler. Elle sert pour les rapports de bug (« le bouton est caché derrière le bandeau cookies »), les visuels marketing façon store d’applications et la revue du premier écran d’une maquette.

Une capture de la page entière assemble toute la page défilante en une seule image très haute. Elle sert pour relire le contenu, valider une landing page ou archiver une page avant une refonte. Attention : les en-têtes fixes, les images en lazy loading et les animations au défilement peuvent paraître étranges sur ces captures, car le navigateur rend toute la page d’un coup.

Méthode 1 : le mode appareil des DevTools de Chrome

1. Ouvrez les DevTools (F12) et activez la barre d’appareils (Ctrl + Shift + M, ou Cmd + Shift + M sur Mac).
2. Choisissez un appareil et rechargez la page.
3. Ouvrez le menu à trois points en haut à droite de la barre d’appareils.
4. Choisissez Capture screenshot pour la zone visible ou Capture full size screenshot pour la page entière.

Pour inclure le contour du téléphone, choisissez un appareil nommé et activez Show device frame dans le même menu avant de capturer. Chrome enregistre un PNG dans votre dossier de téléchargements.

Les mêmes commandes existent dans le menu de commandes : appuyez sur Ctrl + Shift + P (Cmd + Shift + P sur Mac) et tapez « screenshot ». Ce menu propose en plus Capture node screenshot, qui capture un seul élément sélectionné, pratique pour documenter un composant.

Méthode 2 : une extension de vue mobile

Si vous faites souvent des captures mobiles, le passage par les DevTools devient répétitif. Mobile View Extension place un bouton de capture dans sa barre d’outils flottante. Choisissez un préréglage de téléphone ou de tablette, et l’extension enregistre un PNG de la zone visible encadrée, exactement ce que montre l’aperçu. Comme la vue mobile reste active pendant la navigation, vous pouvez parcourir un site et capturer chaque page en quelques secondes.

On obtient ainsi des captures de la zone visible. Pour une capture de la page entière, les DevTools sont plus adaptés.

Méthode 3 : un vrai téléphone

Les captures faites sur un vrai téléphone sont les plus fidèles : elles incluent la barre d’adresse du navigateur, l’encoche ou la Dynamic Island et le vrai rendu des polices. Sur la plupart des téléphones, une option de capture défilante ou « page entière » apparaît après une capture normale. Sur iPhone, Safari propose un onglet Pleine page dans l’éditeur de capture, qui enregistre la page en PDF.

Utilisez des captures sur appareil réel pour tout ce qu’un client ou un décideur examinera au pixel près.

Obtenir des images nettes et fidèles

Quelques détails rendent les captures mobiles plus utiles :

• Le ratio de pixels détermine la netteté. Une zone d’affichage d’iPhone de 390 px de large avec un ratio de 3 donne une image de 1 170 px de large. Si la capture est floue, vérifiez que l’appareil émulé a le bon ratio. Le tableau des tailles d’écran d’iPhone donne les ratios des modèles actuels.
• Attendez les polices et les images. Capturez une fois les polices web et les images en lazy loading chargées, sinon vous livrerez une capture avec des polices de secours et des rectangles gris.
• Gérez les surcouches en connaissance de cause. Bandeaux cookies et widgets de chat couvrent une grande partie d’un petit écran. Décidez si la capture doit les montrer ; pour un rapport de bug, c’est généralement oui.
• Indiquez ce que vous avez émulé. Ajoutez l’appareil, le navigateur et la date au nom du fichier ou au ticket, par exemple pricing_iphone-16_chrome-emulated_2026-10-21.png. Les outils intégrés au navigateur utilisent le moteur de Chrome : une capture étiquetée « iPhone » peut différer légèrement du vrai Safari.

Utiliser les captures mobiles au quotidien

Les captures mobiles servent surtout à trois endroits. En recette, joignez-les aux tickets pour que les développeurs voient la largeur exacte où quelque chose casse ; indiquez cette largeur, lisible dans la barre d’appareils. En revue de design, placez les captures mobile et desktop côte à côte pour vérifier que l’ordre du contenu tient toujours. En marketing, utilisez des captures encadrées sur les landing pages et les fiches d’application, mais prises sur un vrai appareil ou clairement présentées comme une émulation.

Pour le processus de test plus large auquel ces captures contribuent, voir la checklist de test de site mobile.

Questions fréquentes

Comment faire une capture d’écran de page web entière en version mobile dans Chrome ?

Ouvrez les DevTools, activez la barre d’appareils, choisissez un appareil, rechargez, puis sélectionnez Capture full size screenshot dans le menu à trois points de la barre d’appareils.

Peut-on faire une capture mobile sans les DevTools ?

Oui. Une extension de vue mobile dotée d’un bouton de capture, comme Mobile View Extension, capture la vue au format téléphone depuis une barre d’outils flottante.

Pourquoi ma capture mobile est-elle si large en pixels ?

Les captures sont enregistrées au ratio de pixels de l’appareil. Une zone d’affichage de 390 px à 3x donne une image de 1 170 px de large. C’est normal et cela garde l’image nette sur les écrans haute densité.