Débarrassez-vous rapidement des bogues en utilisant BugReplay

En tant que développeur web, vous rencontrerez forcément des clients peu au fait des technologies. Certains clients peuvent souhaiter que vous créiez un nouveau site Web pour eux, tandis que d'autres peuvent souhaiter uniquement modifier des sections spécifiques ou ajouter de nouvelles fonctionnalités. Voici comment se présente généralement la situation:

  1. Vous mettez à jour une section du site Web, vérifiez que tout fonctionne bien, puis vous allez au lit.
  2. Le lendemain, vous ne vous réveillez que pour trouver un courriel ou un message de votre client indiquant que le site Web ne fonctionne pas comme prévu..
  3. Vous commencez à vous demander ce qui ne fonctionne pas et ouvrez le site Web sur votre propre appareil. À ce stade, vous pourrez peut-être reproduire le problème dont parle le client et le résoudre. Cependant, dans certains cas regrettables, le site Web semble fonctionner correctement et vous ne pourrez pas voir ce dont le client se plaint..
  4. C'est à ce moment que le problème commence. Le site Web ne fonctionne peut-être pas pour votre client ainsi que pour beaucoup d'autres personnes, mais vous ne savez pas ce qui ne va pas et comment résoudre le problème..
  5. Vous commencez à demander au client ce qui ne fonctionne pas, le navigateur qu’il utilise, exactement ce qu’il faisait, etc., dans l’espoir de pouvoir reproduire le problème de votre côté. Parfois, vous pouvez reproduire le problème, mais parfois, vous ne pouvez pas.

L'ensemble du processus est très frustrant pour vous et vos clients. Dans de telles situations, j'aimerais pouvoir m'asseoir juste à côté du client et tout voir moi-même. 

BugReplay vous aide à faire quelque chose de très similaire. Vous n'avez plus besoin de poser à vos utilisateurs des tonnes de questions sur leurs navigateurs, leurs cookies, leurs plugins, etc. Il vous suffit de leur donner un lien sur lequel ils peuvent cliquer pour démarrer l'enregistrement du navigateur..

Vous pouvez également utiliser BugReplay pour les tests internes. Dans cet article, nous allons passer en revue toutes les fonctionnalités de ce logiciel qui peuvent faciliter les tests internes d'un site Web ou fournir un support client impressionnant..

BugReplay enregistre tout ce qui est visible dans l'onglet Navigateur

Chaque fois que vous demandez à vos utilisateurs les étapes qu’ils ont suivies pour reproduire un bogue, vous ne pouvez jamais être sûr que les utilisateurs n’ont manqué aucune étape. BugReplay vous aide à surmonter ce problème très courant en enregistrant tout ce que les utilisateurs ont fait en essayant de reproduire le bogue. Ceci est non seulement utile pour résoudre les plaintes des clients, mais cela accélère également les tests internes et rend le processus très efficace..

Comme vous pouvez le voir dans cette vidéo, BugReplay enregistre toutes les actions entreprises par l'utilisateur, des clics sur les boutons au défilement de la fenêtre du navigateur..

Bien qu'il soit utile de voir ce que l'utilisateur a fait lorsqu'il a eu des problèmes avec votre site Web, il est toujours difficile de savoir si un plug-in installé par l'utilisateur a interféré avec un script ou si l'utilisateur a désactivé les cookies, etc. Tout en regardant la vidéo ci-dessus , vous pouvez en conclure que les images ne s'affichent pas car l'appel à les récupérer a échoué. 

Il est également possible que les images aient été récupérées sans erreur, mais elles ne sont pas affichées en raison d'un problème lié au code qui était censé les disposer dans deux colonnes différentes..

À ce stade, tout ce que vous pouvez faire est de deviner et d’espérer qu’il existe un moyen de voir tous les appels réseau ainsi que la console JS afin de déterminer ce qui ne va pas. Heureusement, BugReplay enregistre également toutes les requêtes et réponses du réseau.. 

Ces appels sont tous synchronisés avec l'enregistrement d'écran pour vous aider à savoir exactement quand un appel réseau a été déclenché. Les appels peuvent être filtrés en fonction de divers facteurs tels que le domaine, le type MIME et le statut HTTP de la demande, etc. La vidéo suivante montre comment BugReplay peut vous aider à déterminer rapidement si l'un des appels réseau a provoqué le bogue.

Dans la vidéo, essayez d’observer comment cliquer sur le bouton Réglages L’icône à droite et l’application de différents filtres modifient la liste des requêtes affichées dans Trafic réseau Languette. Seuls les filtres en surbrillance sont appliqués à un moment donné. Vous devriez aussi voir que le Trafic réseau L'onglet ne montre aucun appel au début. En effet, un appel est ajouté à l'onglet uniquement après qu'une demande a été faite. Savoir quand un appel a été déclenché aide beaucoup à comprendre ce qui ne va pas avec l'application ou le site Web.

Les filtres peuvent s'avérer très utiles lorsque vous traitez avec des sites Web pouvant effectuer un grand nombre de requêtes avec des codes de statut HTTP et des types MIME différents. Dans l'image suivante, j'ai montré le résultat du filtrage des requêtes par domaine et sélectionné localhost. Comme vous pouvez le constater, notre appel réseau a été déclenché comme prévu..

Vous pouvez également cliquer sur n'importe quel appel réseau pour en savoir plus, comme la durée de la demande. Vous pouvez également vérifier les en-têtes de demande et de réponse.. 

La capture d'écran suivante montre les détails de notre deuxième demande. Comme vous pouvez le constater, nous récupérons la réponse JSON. Cela signifie que quelque chose ne va pas avec le code qui était censé placer les images dans deux colonnes différentes.


Tout comme le filtrage des requêtes réseau, vous pouvez également filtrer tous les messages de la console sous le symbole. Journaux JavaScript onglet basé sur leur domaine, niveau, ou la source. Dans ce cas, nous recherchons un message d’erreur, c’est pourquoi nous avons défini le paramètre niveau filtrer vers Erreur. Une fois que vous avez cliqué sur l'erreur que vous souhaitez inspecter, vous verrez plus de détails à ce sujet. Voici une capture d'écran de l'erreur qui empêchait l'affichage des images dans notre cas..

Grâce à BugReplay, nous connaissons maintenant la bibliothèque ainsi que la fonction exacte qui empêchait l'affichage de nos images. Vous pouvez voir à quel point le logiciel permet aux développeurs de déboguer leurs sites Web..

Tests internes et support client

Peu importe si vous utilisez BugReplay pour les tests internes ou le support client. Le logiciel enregistre tous les appels réseau et les journaux de la console de la même manière. Cependant, gardez à l'esprit que vous (ou vos utilisateurs) devez utiliser des extensions de navigateur différentes à ces fins, et le processus est également légèrement différent..

Voici les étapes à suivre lors de l'utilisation de BugReplay pour des tests internes:

  1. La première chose à faire est de vous inscrire et de créer un compte. Vous pouvez utiliser le logiciel gratuitement pendant les 30 premiers jours.. 
  2. À l'étape suivante, vous pouvez télécharger l'extension BugReplay pour Chrome. Si vous utilisez principalement Firefox pour votre travail, vous pouvez télécharger l'extension BugReplay Firefox à la place..
  3. Une fois que vous avez installé l’extension, il vous suffit de cliquer sur le bouton Commencer l'enregistrement bouton à l'intérieur pour enregistrer un bug. 
  4. BugReplay vous permet également de rejouer la vidéo avant de l'enregistrer afin de vous assurer que la vidéo capture correctement tous les détails nécessaires. Vous pouvez attribuer à chaque enregistrement un titre et une description facultatifs afin de l'identifier ultérieurement.

Au lieu d’enregistrer une vidéo, vous pouvez également prendre une ou plusieurs captures d’écran afin de signaler un bogue sur le site Web..

Si vos utilisateurs veulent signaler un bogue sur votre site Web, ils devront télécharger une autre extension appelée Feedback by BugReplay. Tout d'abord, vous devrez générer un lien à partir duquel les utilisateurs peuvent télécharger l'extension. Le lien peut être généré en cliquant sur le bouton Demander un rapport de feedback onglet dans votre compte. 

Vous pouvez également donner au lien un titre et une date d'expiration. Une fois l'installation réussie, l'extension fournit aux utilisateurs des instructions faciles à suivre pour pouvoir enregistrer facilement le bogue. Les utilisateurs peuvent également éventuellement fournir un titre et une description du bogue, ainsi qu'une adresse électronique pour toute communication ultérieure..

Puisque BugReplay enregistre tout, des démarches effectuées par un utilisateur aux appels réseau et aux journaux de la console, il devient beaucoup plus facile pour vos utilisateurs de soumettre des rapports de bogues détaillés sans se frustrer de tonnes de questions. J'aimerais également souligner que l'extension Feedback by BugReplay ne permet pas aux utilisateurs d'accéder à vos autres vidéos ou au tableau de bord.. 

Plus de fonctionnalités de BugReplay et d’intégrations

Si vous décidez d'utiliser BugReplay pour des tests internes, vous travaillerez probablement avec une équipe. Tous les membres d'une équipe peuvent accéder aux rapports des autres, ce qui leur permet de collaborer facilement pour résoudre les problèmes. Vous pouvez inviter d'autres personnes à rejoindre votre équipe en cliquant sur votre nom dans le coin supérieur droit de la page de votre compte BugReplay, puis en saisissant les noms et adresses électroniques des personnes que vous souhaitez inviter..

Parfois, vous voudrez peut-être partager un rapport de bogue avec des personnes ne faisant pas partie de votre équipe. BugReplay vous permet de créer une URL partageable pour chacune de vos vidéos, puis de rendre la vidéo accessible à toute personne disposant d'un lien. Vous pouvez partager une vidéo en cliquant sur le lien de partage en regard de cette vidéo dans votre tableau de bord. Une fois que les personnes concernées ont regardé la vidéo, vous pouvez révoquer l’URL partagée en cliquant sur Annuler le partage.

Si vous et votre équipe utilisez GitHub ou Jira, il est logique de vous permettre de déposer directement des problèmes avec eux deux à l'aide de BugReplay. L’équipe de BugReplay a déjà écrit un article détaillé qui décrit toutes les instructions nécessaires pour intégrer JIRA.. 

Intégrer BugReplay à GitHub est également facile. Il suffit de cliquer sur Notifications et intégrations sur la page de votre compte, puis sélectionnez GitHub Issue Tracker sous Ajouter une intégration. De même, vous pouvez intégrer BugReplay à Slack en suivant les instructions à l’écran..

Si vous souhaitez recevoir un courrier électronique chaque fois que vos utilisateurs envoient un rapport de bogue, vous pouvez fournir à BugReplay une ou plusieurs adresses électroniques via lesquelles vous souhaitez être averti..

Toutes ces fonctionnalités de BugReplay en font l’un des meilleurs outils pour tester votre site Web en interne et créer des rapports détaillés accessibles à tous les membres de l’équipe. Voici un témoignage d'un des nombreux utilisateurs heureux de BugReplay.

BugReplay a considérablement réduit les tâches fastidieuses de mon équipe en matière de saisie et a presque éliminé l'incertitude dans les rapports de bogues - notre équipe de développement peut commencer le dépannage immédiatement à l'aide de BugReplay..
- Matt Viirlee, gestionnaire de projet

Dernières pensées

BugReplay vous permet très facilement de fournir un support client exceptionnel à vos clients et d’accélérer considérablement les tests internes en fournissant des outils utiles. Tout rapport de bogue créé par vos utilisateurs ou par un membre de l'équipe sera maintenant visible par toute l'équipe. La possibilité de voir tous les appels réseau et le journal de la console vous donnera les rapports de bogues les plus détaillés possibles, sans déranger votre client avec une seule question sur le bogue..

.