Outils de développement du navigateur
Ce que sont les outils de développement du navigateur, comment les utiliser pour les captures et les tests adaptatifs, et leurs fonctions courantes.
Les outils de développement du navigateur sont les outils intégrés aux navigateurs web : Chrome DevTools, les outils de développement de Firefox et l'inspecteur web de Safari. Ils affichent la structure et les styles de la page, journalisent la sortie JavaScript, enregistrent les requêtes réseau et analysent les performances.
La plupart de ces outils incluent l'émulation d'appareil. Elle définit la largeur et la hauteur de la fenêtre d'affichage, le ratio de pixels de l'appareil et la chaîne user agent, si bien qu'un navigateur de bureau affiche une page comme le ferait un téléphone. L'émulation ne reproduit pas le moteur de rendu, les polices ni le comportement tactile d'un appareil réel.
Dans Chrome sur Mac, Option+Command+I ouvre les outils de développement. Dans Safari, le menu Développement doit être activé dans les réglages avant que l'inspecteur web soit disponible.
Ce que les outils de développement permettent pour les captures
- Capturer la fenêtre d'affichage visible, la page entière défilante, une zone sélectionnée ou un seul élément.
- Régler une taille de fenêtre d'affichage et un ratio de pixels précis avant la capture.
- Masquer ou modifier des éléments, comme une bannière de cookies ou un widget de chat, avant la capture.
- Limiter le débit réseau pour voir l'apparence d'une page pendant son chargement.
Mode adaptatif et émulation d'appareil
Le mode adaptatif, appelé barre d'outils d'appareil dans Chrome, redimensionne la zone de la page à une largeur et une hauteur choisies. Des préréglages couvrent les téléphones et tablettes courants, et les tailles personnalisées sont acceptées. Le réglage du ratio de pixels détermine le nombre de pixels de l'image produit par chaque pixel CSS : une fenêtre de 390 pixels de large à un ratio de 3 donne une capture de 1170 pixels de large.
Réaliser une capture avec les outils de développement
- Ouvrez les outils de développement et activez la barre d'outils d'appareil si vous avez besoin d'une taille précise.
- Ouvrez le menu de commandes avec Shift+Command+P.
- Tapez « screenshot » et choisissez la commande de fenêtre d'affichage, de taille complète, de zone ou de nœud.
- Le navigateur télécharge un PNG.
Erreurs courantes
- Laisser les outils de développement ancrés dans la fenêtre, ce qui réduit la fenêtre d'affichage pendant une capture normale.
- Oublier de réinitialiser l'émulation, si bien que les captures suivantes utilisent une taille de téléphone.
- Capturer avant l'apparition des images chargées en différé.
- Considérer l'émulation comme une preuve qu'une page fonctionne sur un appareil réel.
Vous refaites les mêmes captures encore et encore ?
Website Capture de Temposhot répète la même capture pour une liste d'URL, en Desktop 1920×1080, Tablet 768×1024 ou Mobile 390×844. Consultez l'automatisation des captures de sites web.
Questions fréquentes
Les outils de développement peuvent-ils capturer une page entière en une seule image ?
La commande « Capture full size screenshot » de Chrome rend la hauteur complète de la page. Les pages très longues ou à chargement différé peuvent tout de même être incomplètes.
Existe-t-il une option plus simple pour une seule page ?
L'extension Temposhot Full Page Screenshot pour Chrome 116 et versions ultérieures fait défiler la page active et télécharge un seul PNG.
Sources
Ressources associées
- Options de Website Capture : réglages d'appareil, de zone et d'attente.
- Automatiser les captures de sites web sans code : un guide pas à pas.
- Screenshot Resolution Checker : vérifier la taille en pixels d'une capture.
Vous prenez toujours les mêmes captures d'écran ?
Temposhot capture un écran, une fenêtre ou une zone à intervalles programmés et exporte l'ensemble en PDF, en images, en ZIP ou en MP4. Les outils gratuits du navigateur ne permettent de traiter qu'une image à la fois.
Ressources associées
Termes associés
- Navigateur sans interfaceCe qu'est un navigateur sans interface, comment il sert aux captures automatisées et les pièges courants.
- Capture de page entièreCe qu'est une capture de page entière, en quoi elle diffère des captures de fenêtre d'affichage et de défilement, et quand l'utiliser.
- Capture de fenêtre d'affichageCe qu'est une capture de fenêtre d'affichage, en quoi elle diffère de la capture de page entière et quand elle est le bon choix.
- Capture responsiveCe qu'est une capture responsive, les tailles de fenêtre d'affichage courantes et les erreurs à éviter lors des captures sur plusieurs appareils.