Capture d'écran pleine page dans Chrome : 3 méthodes

Le moyen le plus rapide de capturer toute une longue page dans Chrome ne demande aucune extension : ouvrez DevTools avec F12, appuyez sur Ctrl + Shift + P (Cmd + Shift + P sur Mac), tapez « screenshot » et choisissez l’option pleine taille. Chrome enregistre un seul grand PNG de toute la page. Pour de nombreuses pages ou pour la CI, un script fait la même chose avec une option. Quand le résultat est coupé, vide ou affiche des en-têtes répétés, la cause est presque toujours le chargement différé, une limite de hauteur ou un élément fixe, et chacune a sa solution plus bas.

Méthode 1 : DevTools, sans rien installer

1. Ouvrez la page et attendez qu’elle soit entièrement chargée.
2. Appuyez sur F12 pour ouvrir DevTools.
3. Ouvrez le menu de commandes avec Ctrl + Shift + P (Cmd + Shift + P sur Mac) et tapez « screenshot ».
4. Choisissez Capture full size screenshot. Chrome télécharge un PNG.

Le même menu de commandes propose la zone visible et un élément sélectionné. La documentation de Chrome confirme que le menu s’ouvre avec ces raccourcis et qu’il contient la commande « Capture area screenshot », et les conseils DevTools sur les captures d’écran couvrent la capture d’une page entière, d’un nœud et d’une zone.

Méthode 2 : capture pleine page en largeur téléphone

Choisissez d’abord un appareil dans l’aperçu ci-dessus pour vérifier la mise en page. Pour capturer toute la page comme la rend un téléphone, utilisez le mode appareil : affichez la barre d’appareils avec Ctrl + Shift + M (Cmd + Shift + M sur Mac), choisissez un appareil, ouvrez le menu More options et sélectionnez Capture full size screenshot. La documentation du mode appareil de Chrome liste la même option, ainsi que Show device frame pour une capture avec le contour d’un téléphone. La version pas à pas, avec des conseils sur le ratio de pixels et le nom des fichiers, est dans comment faire une capture d’écran mobile d’un site.

Méthode 3 : un script, pour beaucoup de pages ou la CI

Si vous avez besoin de la même capture pour des dizaines de pages, automatisez-la. Dans Playwright, c’est une seule option :

await page.screenshot({ path: 'page.png', fullPage: true });

Définissez d’abord le viewport (par exemple { width: 390, height: 844 } pour une capture à la taille d’un téléphone) et le script produit une image par page à chaque exécution. L’option fullPage est documentée dans le guide des captures d’écran de Playwright.

Pourquoi la capture est coupée, vide ou répétée

Ces problèmes viennent du fonctionnement d’une capture pleine page : le navigateur étend le viewport à la hauteur totale et dessine la page une seule fois, sans défiler. Un article sur les captures pleine page avec Puppeteer en liste les causes et les solutions, valables pour toute capture basée sur Chrome :

• Les images en chargement différé restent des espaces réservés, car elles se chargent quand elles entrent dans la zone visible et la capture ne défile jamais. Faites défiler la page jusqu’en bas puis remontez avant de capturer, et attendez la fin du chargement des images.
• Les pages très hautes sont tronquées. L’auteur signale une limite par défaut de 16 384 pixels dans Puppeteer, et certaines configurations vont jusqu’à 32 768. Au-delà, capturez la page par sections et assemblez-les.
• Les éléments fixes et sticky se répètent ou se placent mal. Passez-les en position: absolute ou masquez-les avant la capture.

Quelle méthode pour quelle tâche

Questions fréquentes

Comment capturer toute une page dans Chrome sans extension ?

Ouvrez DevTools, ouvrez le menu de commandes avec Ctrl + Shift + P, tapez « screenshot » et choisissez Capture full size screenshot.

Pourquoi les images manquent-elles dans ma capture pleine page ?

Elles sont chargées en différé et n’ont jamais été dans la zone visible. Faites défiler toute la page, attendez le chargement des images, puis recommencez la capture.

Peut-on faire une capture pleine page à la taille d’un téléphone ?

Oui. Utilisez le mode appareil de DevTools, choisissez un appareil et sélectionnez Capture full size screenshot dans le menu More options.

Sources : Chrome DevTools, menu de commandes, mode appareil et conseils sur les captures ; captures d’écran Playwright ; captures pleine page avec Puppeteer, DEV Community, toutes consultées le 28 octobre 2026.