Cet article est né d'un post sur le forum interne de notre bureau, d'une petite discussion, d'un petit ajout, puis j'ai décidé de le mettre sous la forme finale ici pour le rendre plus pratique à lier.
Oui, le message est capitaine, c'est le comportement attendu :) Je veux juste qu'il soit collecté, ordonné et généralement disponible.
Introduction: trouver un chat
Il y a des bugs dans les produits que nous développons.
On les trouve parfois. Parfois, nous l'écrivons même.
Afin d'aider nos collègues à améliorer leur produit.
Et nous sommes très offensés lorsque nos collègues nous écrivent - «Je ne comprends pas le nichrome», «ça ne joue pas pour moi», «venez montrer.
Parfois je dis ça.
Parce que très souvent, les insectes ressemblent à l'image «trouver un chat».
Celui qui a écrit le bug sait exactement où se trouve le chat. Il l'a déjà trouvé. Il ne peut plus le voir.
Et je dois m'asseoir, creuser dans le moniteur et chercher un putain de chat.
Souvent, une vidéo est associée à un bug. Après tout, la vidéo montre tout!
Tout est pareil là-bas, seule l'herbe oscille toujours (la souris bouge) et les portes s'ouvrent (ouvrent des dialogues non pertinents).
À ce stade, je parle des règles d'enregistrement des bogues, que j'essaie de suivre par moi-même et que je recommande aux autres.
Mes règles personnelles pour l'enregistrement des bugs
1) Mots clés dans l'en-tête du bogue
Pour que vous puissiez rapidement comprendre à quelle compétence appartient un bug.
2) Étapes pour jouer
Et c'est très très important. Et oui, leur compilation prend le plus de temps lors de l'enregistrement.
Parce que très souvent, en commençant, en notant les étapes et en supprimant les "supplémentaires", vous comprenez que le bogue n'est pas toujours reproduit du tout.
3) « comportement attendu » vs « comportement observé » dans ces étapes où, en fait, un bug.
C'est critique. Parce que ce n'est pas toujours ce qu'une personne attend de voir, correspond à ce que c'est vraiment. Ensuite, vous pouvez rechercher le chat à l'infini.
4) Les captures d'écran sont bonnes
Les images fournissent un contexte visuel, montrent les parties du développeur du produit présentant des problèmes et il comprend immédiatement le domaine de connaissances nécessaire. L'image à cet égard fonctionne en tandem avec les mots-clés (voir paragraphe 1)
5) La vidéo est bonne, mais uniquement lorsque nous montrons un bug d'animation
Et - la vidéo est quelque chose que vous pouvez vivre avec quand l'auteur du bogue ne peut pas écrire les étapes de lecture.
Ou l'erreur n'est pas déterministe et une preuve est nécessaire.
Dans d'autres cas, la vidéo est redondante.
La vidéo pour le bug devrait être pour le bug. 10 secondes, sans ouvrir les fenêtres de gauche.
6) Empiler les erreurs de trace / console avec une exécution explicite
Eh bien, presque tout le monde comprend cela et l'applique, je n'écris que pour l'exhaustivité de la liste.
7) Un exemple de lecture .
Si nous parlons d'une sorte de système de bureau, nous avons besoin d'une archive sur laquelle le problème est reproduit.
Sur le Web, c'est plus facile - vous pouvez souvent donner un lien vers une démo en ligne (ou vers un environnement de mise en scène étendu).
C'est tout dans une première approximation.
Je partage cela avec d'autres personnes - et souvent ils me croient et commencent à faire de même.
D'autres exemples et 20% des détails, qui occupent 80% de l'article :)
Des exemples
Un exemple de bug est la façon dont je les écris, et qui est plus ou moins :)
dxTreeView crée des indicateurs de chargement redondants en mode virtuel
Plus de billets (juste une sélection aléatoire de la liste des billets publics enregistrés par notre équipe)- Tableau de bord Web - Les boutons Réinitialiser et Soumettre disparaissent dans l'élément personnalisé Paramètre après avoir soumis la valeur du paramètre
Pour reproduire le problème, exécutez le projet joint, modifiez la valeur du paramètre dans l'élément personnalisé Parameter et cliquez sur le bouton Submit.
Résultat réel: les boutons Réinitialiser et Soumettre disparaissent.
Résultat attendu: les boutons Réinitialiser et Soumettre doivent être affichés.
- Visionneuse de tableau de bord Web - Les boutons de la barre d'outils s'affichent lorsque vous cliquez sur une partie du contrôle sur un moniteur tactile et les légendes des éléments sont masquées
Exécutez le projet et cliquez sur n'importe quelle partie de la visionneuse pour reproduire le problème.
Résultat réel: les boutons de la barre d'outils sont affichés.
Résultat attendu: les boutons de la barre d'outils ne doivent être affichés que lorsque vous les survolez.
Pour contourner ce problème, exécutez le code (interne) suivant dans le gestionnaire d'événements OnInit:
function onInit(s, e) { DevExpress.Dashboard.Internal.DashboardLayoutModeHelper.isTouch = false; }
- ASPxDashboardViewer / MVCxDashboardViewer - Une exception est déclenchée si vous ouvrez des tableaux de bord avec des onglets (ce n'est pas prévu, mais cela est évident d'après le titre du bogue. Cela se produit, d'accord.)
L'ancien contrôle ASPxDashboardViewer et l'extension MVCxDashboardViewer ne prennent pas en charge l'élément de tableau de bord du conteneur Tab par rapport à ASPxDashboard / MVCxDashboard. Lorsque ASPxDashboardViewer / MVCxDashboardViewer ouvre un tableau de bord avec un conteneur d'onglets, une exception côté client se produit. Il est nécessaire d'afficher à la place le message contextuel correspondant dans une interface utilisateur de tableau de bord.
- Dashboard Web - Le panneau de liaison reste transparent dans certains cas (voici la vidéo, car c'est un très mauvais bug, nous avons essayé de l'attraper pendant un an et demi)
Étapes à reproduire:
- Créez un tableau de bord avec un élément. Assurez-vous que le panneau de reliure chevauchera l'élément lors de son ouverture.
- Sélectionnez l'élément.
- Ouvrez le panneau de reliure (par exemple, cliquez sur le bouton «Options») et déplacez un curseur sur le panneau jusqu'au moment où le curseur est placé sur l'élément. Le panneau de reliure devient transparent (attendu)
- Cliquez sur l'élément du tableau de bord. Panneau de reliure fermé.
- Cliquez à nouveau sur le bouton «Options».
Résultat réel:
Le panneau de reliure est transparent.
Résultat attendu:
Le panneau de reliure n'est pas transparent.
L'étape principale consiste à fermer le panneau de reliure en cliquant sur l'élément alors qu'il est transparent.
Un screencast est joint.
- Tableau de bord Web - Élément plein écran - Le pivot ne fonctionne pas correctement dans l'état maximisé
- Ouvrez la démo RevenueAnalysis.
- Développez la colonne "Vélos" du Pivot.
- Réduisez la colonne "Vélos" du Pivot.
- Maximisez l'élément de tableau de bord Pivot.
Résultat attendu: la colonne "Vélos" du pivot doit être réduite à l'état maximisé.
Résultat: la colonne "Vélos" du pivot est développée dans l'élément agrandi.
- L'info-bulle du graphique peut être tronquée si un conteneur personnalisé est utilisé
Étapes à reproduire:
- Utilisez le conteneur du graphique comme conteneur d'infobulle;
- Afficher une info-bulle sur certains points proches du bord du graphique;
- FAUX. L'info-bulle est affichée à l'extérieur du conteneur ou peut être coupée en fonction du paramètre de débordement du conteneur.
ATTENDU. L'infobulle doit être affichée à l'intérieur de son conteneur jusqu'à ce qu'elle corresponde à la taille du conteneur.
Et d'autres
Philosophies et détails de définition mineurs
Préparation de capture d'écran
Les images doivent être avec de grosses flèches rouges ou même avec des légendes.
La capture d'écran doit faire partie du corps du bogue, directement dans le texte.
Si le bogue est signalé dans la plupart des systèmes modernes, cela se fait simplement en collant l'image du presse-papiers par Ctrl + V
Pourquoi ne pouvez-vous pas simplement donner un lien vers l'image? Parce qu'il y a une perte de contexte. Si vous regardez l'image, vous ne voyez pas le texte. Si vous voyez le texte, alors vous ne voyez pas l'image. Si vous voyez à la fois ceci et cela - la probabilité que quelque chose clique dans le cerveau est beaucoup plus élevée.
Une minute de déformation professionnelle
C'est pourquoi les tableaux de bord en tant que phénomène d'analyse de données deviennent populaires :)
Lorsqu'une personne voit les mêmes données dans différents formats et sous différents angles, une idée peut lui venir.
Voir Steven Few et d'autres auteurs pour plus de détails.
La taille de la capture d'écran est toujours un compromis.
Lorsqu'il est petit, le problème est mieux perçu et prend peu de place. Mais on ne sait pas toujours d'où vient cette pièce.
Ils ont capturé un peu plus la zone de l'écran - des détails superflus s'intègrent. L'écran à partir duquel le popup a été ouvert, sur lequel l'erreur. Le navigateur dans lequel l'erreur. Bouton Démarrer pour Windows sur lequel l'erreur. Le DPI du moniteur sur lequel l'erreur ... oh, mais l'erreur elle-même n'est plus visible. Le chat est devenu à deux pixels et indéfinissable même à l'intérieur du cercle rouge.
Où arrêter de recadrer une capture d'écran est toujours un art)
Exemples de captures d'écran, de petite à grande:
rapport de bogue dans le Code criminel, la balustrade est cassée
Le problème est clairement visible, mais le contexte est perdu. S'il n'y avait aucune inscription dans les mots indiquant qu'il était près de l'entrée principale, le soudeur se promènerait dans le site avec un masque, chercherait.
en communication personnelle, une question sur l'implémentation de TreeView
Il est montré à quel élément j'ai en tête (signe plus ... eh bien, allez mieux traduire le bouton d'extension :)), le contexte est visible (nouvel écran de l'assistant)
- Le problème avec la mise à l'échelle des démos de tableaux de bord à DPI = 125%
On peut voir quel type d'URL de navigateur et de site
Les onglets sont flous inutilement, afin de ne pas distraire. Un article a été laissé sur la mise à jour des créateurs de Windows 10 (dans laquelle 125% DPI est devenu une valeur par défaut sur les ordinateurs portables de 15,6 pouces) afin que, en regardant cette capture d'écran, je m'en souvienne et puisse me montrer et en parler.
Soulignons à nouveau. Avec des outils normaux, le temps de préparation de chacune de ces captures d'écran est de 5 à 30 secondes.
Ce n'est pas le fruit d'une longue œuvre d'art. C'est rapide et efficace. Vous pouvez vous arrêter et amener chacun d'eux à la perfection ... mais en règle générale, cela n'est pas nécessaire.
Programmes pour prendre des captures d'écran
- Yandex.Disk, j'aime beaucoup sa capture d'écran . Eh bien, le voici. Pour une raison quelconque, il s'est avéré être le meilleur de ce que j'ai essayé de faire des flèches, encercler avec un petit carré et ajouter des inscriptions lisibles. Tous les exemples de l'article y sont faits.
- Monosnap (gratuit, avec un forfait payant). En principe, très rien, mais (subjectivité!) Les flèches sont moches;
- ShareX (entièrement gratuit);
- Jing a été largement utilisé par nos ingénieurs de support technique; laissant lentement, car il écrit une vidéo dans un flash méchant.
- Sous Windows 10 - combinaison intégrée Win + Shift + S # Commentaire de l'auteur: vraiment très bon
- screenshoter intégré sur Mac # ,
- GreenShot - Gagnez # , #
- LightShot - Mac / Win #
- Capture FastStone #
- FlameShot (Linux, sur le github discuter de la possibilité de Windows)
- Outil de capture - Windows intégré #
- gooncam #
- PicPick (Windows) #
- Spectacle et KSnapshot (Linux) #
- Enregistreur des étapes du problème - intégré à Windows, lancé via PSR à partir de la ligne de commande
Nous écrivons le problème, pas la solution
Ce point est né de la discussion interne. De manière très inattendue, ce n'était pas clair pour tout le monde, par conséquent - un exemple.
Par exemple, je teste un concepteur de tableau de bord et je vois une telle chose:
Et j'écris un bug:
"Il n'y a pas de défilement horizontal"
Je peux même l'écrire avec des étapes et le résultat attendu: smiley:
Résultat attendu : le nom de la règle doit défiler horizontalement.
résultat réel : le nom de la règle ne défile pas
Le bug est cadré normalement, mais cela n'empêche pas le développeur de me considérer comme un crétin. Et il aura raison :)
Il y a des problèmes: "le texte n'est pas visible dans son intégralité; le texte est superposé à l'icône"
Mais au lieu d'enregistrer ce problème, j'ai enregistré ma solution à ce problème. L'un des nombreux et certainement pas le meilleur.
Et une telle substitution ne se produit pas si rarement. Même moi-même, je comprends parfois cela.
Après tout, je sais exactement comment y remédier. Alors je vais l'écrire!
(Eh bien, parfois je sais vraiment. Et j'essaie d'écrire mes suggestions dans le corps du bogue, après avoir effectivement décrit le problème. Mais pas comme la seule solution possible)
Exemple Pro pour la lecture
Dans le développement de bureau, cet élément est discutable. D'une part, l'utilité d'exécuter du code d'exemple qui reproduit le problème est claire pour tout le monde.
D'un autre côté, créer un exemple augmente déjà considérablement le temps nécessaire pour écrire un bogue, jusqu'à une commande.
En général, dans ma tête de cette façon: pour les cas complexes c'est nécessaire, dans les cas simples ça peut être redondant.
On m'a appris à l'université que si le système de sécurité devient trop complexe et apporte des dommages et des inconvénients, ils cessent simplement de l'utiliser.
Si vous obligez à faire un exemple pour chaque bogue, alors dans un mois, ils marqueront même des exemples pour des bogues complexes)
En revanche, sur de simples bugs vous pouvez vous entraîner à faire des exemples ...
Bref, la question est discutable.
Je vais ajouter un article CTO de notre bureau à la tirelire il y a dix ans, où il explique pourquoi nous demandons des exemples à nos clients.
Une demande d'exemples de programmes simples 10 par Julian
Et il y a un tel moment avec des exemples simplifiés, citez:
Un exemple très simplifié est certes bon, mais aussi mauvais. Il y a eu des cas répétés qu'un exemple simplifié:
- ne couvre pas tous les scénarios d'un bug;
- ne reflète pas le scénario réel, ce qui peut conduire à une solution incorrecte.
Idéalement, il est préférable d'avoir à la fois un échantillon simplifié et original.
Vous savez maintenant que:
- préparer des exemples est très utile;
- c'est difficile;
- l'essentiel n'est pas d'en faire trop.
Temps record de bug
Il s'est avéré que beaucoup de lettres. Cela peut sembler une procédure bureaucratique compliquée, longue et fastidieuse.
Donc, cela ne devrait pas être difficile et long.
La médiane de la durée d'enregistrement d'un bogue qui satisfait à la nappe des exigences ci-dessus est d'environ une minute.
Oui, dans les cas où il s'avère que les étapes ne reproduisent pas le bogue; ou qu'ils ne sont pas tous importants et voulaient éliminer l'excédent; ou une nouvelle étape a été révélée dans le processus - puis le temps augmente.
Mais la probabilité que votre bug soit corrigé et non fermé avec le commentaire "ne peut pas être reproduit" augmente de manière significative.
Opposition
Ce qu'ils me disent quand je partage ma vision:
le bug est évident
C'est évident pour quelqu'un qui a déjà trouvé un chat.
Sans une description et des étapes détaillées, tout le monde devra le chercher. Temps non déterministe.
Oui, ma femme et VYudachev ont trouvé le chat dans les trois premières secondes. Deux de mon échantillon.
Et le reste des gens (environ une douzaine), dont j'ai regardé les moniteurs, ont cherché un chat pendant cinq minutes maximum.
Mais en général, j'ai craché et ouvert immédiatement une supposition.
Et avec des bugs mal écrits la même chose.
la vidéo suffit, tout y est visible
Tout d'abord, pour le lecteur du bug, c'est long. Bien plus long que la lecture de la liste des étapes, l'exploration des mots clés.
Deuxièmement, afin de découvrir les moindres détails, il est nécessaire de le réviser plusieurs fois, en essayant de s'arrêter, de prendre une pause précisément aux moments critiques.
Troisièmement, souvent sur les vidéos mal préparées, il y a beaucoup de détails supplémentaires. Et vous ne savez pas ce qui est vraiment superflu et ce qui ne l'est pas. Est-il nécessaire de fermer la notification de VKontakte pour la reproductibilité du bug? .. Y a-t-il une interaction avec le système d'exploitation à l'origine du bug de rendu? .. Puis-je utiliser un télégramme à la place de VKontakte? ...
(En toute honnêteté, il est arrivé dans ma pratique que l'auteur de la fonctionnalité ait trouvé d' autres bugs sur la vidéo ci-jointe)
écrire des bugs comme ça depuis très longtemps
Il faut plus de temps pour écrire un bug avec des étapes, c'est vrai.
Souvent parce qu'en écrivant les étapes exactes, vous commencez involontairement à effectuer le débogage.
Vous essayez de rejeter une étape, ou est-ce critique.
Oui, vous passez votre temps et enregistrez celui de quelqu'un d'autre.
Les références
La liste des exigences pour l'enregistrement des bugs est née sur ma base:
si vous jetez les spécificités forum-maillist-open-source, alors presque tout est précieux. Y compris mon préféré «Décrivez les symptômes du problème, pas vos suppositions» et «Soyez explicite sur votre question»;
La fin
J'ai partagé cette opinion sur l'enregistrement de bugs avec mes équipes. Maintenant, j'ai décidé de toucher un public plus large.
Merci d'avoir lu.
Voici un indice sur la photo du chat ( prise ici ).
Soit dit en passant, l'image n'est pas la mienne, mais bien préparée - il y a une flèche et il y a une augmentation de la zone avec un bug chat.
UPD 28/06/2019
Captures d'écran des commentaires ajoutés à la liste générale
Corrections de fautes, provoquant même des discussions dans les commentaires