Blog

Revue de code : utiliser des captures d’écran

Publié le · revue de code, pull request, captures d’écran, flux de travail

Revue de code : utiliser des captures d’écran

Un diff seul juge mal les changements d’interface. Un petit jeu de captures — avant / après, annotées, avec l’état qui compte — rend une pull request lisible et vérifiable.

Une pull request qui change le comportement d’un bouton, la validation d’un formulaire ou un état de chargement est difficile à juger à partir d’un diff. Les relecteurs finissent par récupérer la branche, recompiler et chercher l’écran dont vous parlez. Un petit jeu de captures bien fait supprime ce travail.

Capturez avant et après

Pour tout changement visible, capturez le même écran deux fois :

  1. Sur la branche de base, capturez la zone concernée.
  2. Sur votre branche, capturez la zone identique à la même taille de fenêtre et au même zoom.
  3. Gardez les deux captures ; ne recadrez pas l’une plus que l’autre.

Aligner la fenêtre d’affichage, le zoom du navigateur et la taille de fenêtre rend la comparaison pertinente. Si la mise en page est responsive, capturez les largeurs qui comptent (par exemple 1280 et 390) et étiquetez-les.

N’annotez que la différence

Le relecteur doit savoir où regarder, pas faire le tour complet :

  • Des numéros pour plusieurs changements sur une même capture : 1 est le nouvel état vide, 2 le message d’erreur.
  • Des formes pour entourer la zone qui a changé.
  • Du texte pour le comportement attendu, court.
  • Mosaïque ou flou pour tout ce qui est privé : noms de clients, e-mails, jetons, URL internes.

N’annotez pas tout l’écran. Si le changement tient à un contrôle, une flèche et une phrase suffisent.

Entourer la zone modifiée
ANNOTATIONS NUMÉROTÉES SUR UNE CAPTURE · 1280 × 800

Enregistrez l’interaction quand une image fixe ne suffit pas

Certains changements n’ont de sens qu’en mouvement : un menu déroulant qui se fermait trop tôt, un indicateur de chargement qui se résout désormais, une interaction par glisser. Enregistrez 10 à 20 secondes avec Enregistrement rapide, puis joignez le MP4 ou, pour une revue lisible en ligne, un GIF (Pro).

  • Montrez d’abord le comportement défaillant, puis le comportement corrigé, dans un seul clip si possible.
  • Coupez le microphone sauf si une voix ajoute quelque chose ; un clip silencieux se lance sans risque.
  • Gardez le clip assez court pour être regardé deux fois.

Mettez les preuves dans la pull request

Une structure prévisible fait gagner du temps au relecteur :

  1. Ce qui a changé en une phrase.
  2. Les images avant / après, côte à côte ou empilées, toujours dans le même ordre.
  3. Comment reproduire l’état de la capture, si ce n’est pas l’écran par défaut.
  4. Ce qu’il faut vérifier — la ou les deux choses qui pourraient régresser.
  5. L’environnement, s’il compte : OS, navigateur, échelle d’affichage.

Joignez les images directement à la pull request plutôt que de renvoyer vers un drive personnel. Si vous utilisez un lien de partage, rappelez-vous qu’il peut expirer ou demander un mot de passe ; pour une revue de code, une pièce jointe est généralement préférable.

Gardez le jeu de captures petit

Les relecteurs survolent. Trois captures ciblées sont lues ; quinze défilent sans être vues.

  • Une paire par changement visible.
  • Recadrez la barre du navigateur et les panneaux sans rapport.
  • Compressez ou redimensionnez les images qui ne servent qu’au contexte ; gardez la résolution complète pour les changements au pixel près.
  • Supprimez les captures qui répètent le même état sous un angle légèrement différent.

Une liste de contrôle avant de soumettre

VérificationPourquoi
Même fenêtre d’affichage et même zoom avant / aprèsSinon la comparaison est invalide
Un changement par imagePlus facile à discuter et à résoudre
Les annotations pointent vers le changementPas de chasse au trésor
Les données privées sont masquéesLes pull requests sont souvent visibles par plus de monde que prévu
Un clip seulement là où le mouvement compteCourt et regardable
Des pièces jointes, pas des liens personnelsLes relecteurs ne devraient pas avoir besoin d’un compte

Questions fréquentes

Faut-il joindre des captures ou un enregistrement d’écran ?

Des images fixes pour les états, un court clip pour les interactions. Un enregistrement de 10 à 20 secondes suffit à montrer une transition ; au-delà, on saute généralement.

Comment masquer les données clients dans une capture de revue ?

Utilisez la Mosaïque avec un réglage fort pour les noms et les identifiants, un cache plein pour les secrets, ou recadrez la zone. Le flou est plus faible que la mosaïque et ne doit pas servir pour quoi que ce soit de sensible.

Faut-il Pro pour faire des captures de revue ?

Non pour la capture, l’annotation, la numérotation, la mosaïque et l’enregistrement MP4 de base. L’export GIF, l’Effacement intelligent et les effets de l’éditeur vidéo sont des fonctions Pro, mais un jeu d’images fixes plus un MP4 couvre la plupart des revues gratuitement.

Votre prochaine capture est à un raccourci de vous.

macOS 14.4+ (Apple Silicon et Intel) · Windows 10+ (64 bits)