Tout ce dont un développeur a besoin pour reproduire un bug est à l’écran pendant que le bug se produit : la page, la console, les requêtes, le navigateur dans lequel vous êtes. Dix secondes plus tard l’onglet est fermé et tout cela a disparu, et c’est pour cela que les rapports de bug finissent en phrases écrites de mémoire.

Voici comment capturer l’ensemble à la place, avec l’extension que nous construisons. Cela prend environ une minute la première fois et quelques secondes ensuite. Aucun compte n’est nécessaire pour déposer un rapport.

L’installer

Session Replay

Extension Chrome gratuite. Un clic sur la page qui se comporte mal capture la copie d'écran, la console et le journal réseau, et vous rend un lien à coller dans le ticket.

Installer l'extension

Chrome et les navigateurs Chromium, depuis le Web Store. Rien à configurer ensuite.

Capturer le bug

Placez-vous sur la page qui se comporte mal, puis cliquez sur l’icône de l’extension dans la barre d’outils.

Le panneau de l'extension ouvert dans la même fenêtre que la page signalée : la page garde sa place à gauche et le panneau se tient à sa droite, avec la capture d'écran et les commandes d'enregistrement.

Choisissez une capture d’écran ou un enregistrement. Une capture convient à tout ce qui se voit d’un seul coup : une mise en page cassée, un total faux, un message d’erreur. Un enregistrement convient à tout ce qui comporte une séquence ou une durée : le bouton qui ne marche qu’au deuxième clic, le rond de chargement qui ne s’arrête jamais. L’enregistrement s’arrête à dix minutes et conserve tout ce qui précède, si bien qu’un enregistrement long n’est jamais perdu à cause d’une limite dont personne n’avait parlé.

Dessinez sur la capture si cela aide. À main levée, dans la couleur de votre choix. Un cercle autour du mauvais chiffre économise un paragraphe entier pour dire quel chiffre est mauvais.

Ajoutez une description si vous en avez une. Facultatif, et cela vaut les quinze secondes : ce que vous attendiez. C’est la seule chose que la capture ne peut pas deviner.

Ce qui est capturé sans que vous fassiez rien

C’est la partie qui rend le rapport utile à lire, et rien là-dedans ne vous demande d’ouvrir les outils de développement :

  • Le navigateur, sa version, le système d’exploitation et la taille de l’écran, qui décident si un défaut est général ou seulement le vôtre
  • La sortie de la console, y compris l’erreur affichée pendant que personne ne regardait
  • Le journal réseau, avec le statut et le temps de chaque requête faite par la page, et un fichier HAR que vous pouvez télécharger et ouvrir dans les outils de développement
  • Ce que vous avez fait : les clics, les saisies et les changements de page qui y ont mené, dans l’ordre, et c’est ce qui transforme un rapport en étapes de reproduction

Il y a une chose à activer délibérément. Cochez la case des corps de réponse avant d’enregistrer et l’extension attache le débogueur de Chrome : le rapport porte alors ce que le serveur a réellement renvoyé, et pas seulement la ligne de requête. Elle est désactivée tant que vous ne l’activez pas, et Chrome affiche sa propre bannière pendant toute la durée.

Le partager

Vous obtenez un lien. Collez-le là où le travail se passe : le ticket, la pull request, le fil de discussion. Celui qui l’ouvre voit la capture et chaque onglet de contexte à côté, sans compte et sans rien installer.

Le lien ouvre la capture avec la console, le journal réseau et les détails du navigateur sur des onglets à côté.

Un lien de partage est public par défaut. C’est ce qui le rend facile à envoyer, et cela vaut d’être su avant de capturer une page portant les données personnelles de quelqu’un ou un système interne. Si le domaine est le vôtre et que vous êtes sur une formule payante, vous pouvez changer cela : les rapports peuvent démarrer en privé, visibles seulement par leur auteur et par votre équipe, et n’importe quel rapport peut basculer dans un sens ou dans l’autre ensuite.

Créez un compte gratuit si vous voulez que vos rapports restent au même endroit sans limite quotidienne, et voir quand ils ont été ouverts. En déposer un ne l’exige jamais.

La partie que l’outil ne fait pas

Une capture est une preuve. Ce n’est pas un rapport.

Elle ne sait pas ce que vous attendiez, ni si les deux choses bizarres que vous avez remarquées sont un défaut ou deux, ni ce que cela pèse par rapport à tout le reste de la file. Cela relève du jugement, et cela reste avec la personne qui était là, et c’est bien pour cela que la case de description vaut les quinze secondes alors que tout le reste est automatique.

Si vous voulez la forme d’un rapport que l’on corrige au lieu de renvoyer avec des questions, le guide du rapport de bug l’a, et son modèle est un fichier que vous pouvez garder à côté de votre outil de suivi. Les dix erreurs les plus courantes sont la même liste vue de l’autre côté.

La version courte

Installer une fois. Sur la page qui se comporte mal, cliquer sur l’icône, choisir une capture d’écran ou un enregistrement, dire ce que vous attendiez, envoyer le lien. Les détails du navigateur, la console, le journal réseau et la suite de ce que vous avez fait partent avec, et la seule partie qui vous reste est le jugement, qui a toujours été le vôtre.