DevRecorder

Qu’est-ce que DevRecorder ?

DevRecorder est un enregistreur d’écran conçu pour les développeurs afin de capturer le contexte de débogage en parallèle de ce qui se passe dans l’interface. Il enregistre une vidéo avec une timeline synchronisée des logs console, des requêtes réseau et des événements de navigation, permettant de se positionner précisément au moment où un bug survient.

L’enregistreur capture également les détails des requêtes et réponses (en-têtes, payloads et corps de réponse) et peut ajouter l’audio du microphone pendant que vous expliquez la reproduction. Il est conçu pour aider les équipes à partager des rapports de bugs avec un contexte complet via un lien partageable.

Fonctionnalités principales

• Timeline de débogage synchronisée par frame : Les logs, le réseau et les changements de route/navigation sont ancrés aux images vidéo, permettant de se déplacer directement jusqu’au moment de l’enregistrement.
• Capture console avec détails préservés : Enregistre les logs console, avertissements et erreurs avec les traces complètes et les arguments « exactement comme DevTools les affiche ».
• Capture réseau avec fidélité DevTools : Capture les requêtes réseau complètes avec en-têtes, payloads, corps de réponse et informations de timing comparables à ce qu’affiche DevTools.
• Suivi de navigation et changements de route : Enregistre les événements de navigation pour les SPA et les flux de pages traditionnels, reflétant le parcours réel de l’utilisateur.
• Support de narration micro : Permet d’ajouter l’audio du microphone pendant l’enregistrement pour expliquer ce qui se passe sans quitter l’outil.
• Lien partageable (aucune connexion requise pour visualiser) : Génère une URL que les collègues peuvent ouvrir pour voir la vidéo avec les données de débogage synchronisées.
• Contexte assistant IA via MCP : Vous pouvez vous connecter via MCP pour qu’un assistant IA accède au contexte de l’enregistrement (vidéo, logs et réseau). La page mentionne notamment des workflows comme le glisser d’un enregistrement dans Cursor.

Comment utiliser DevRecorder

1. Installer l’extension : Ajoutez l’extension DevRecorder Chrome depuis le Chrome Web Store.
2. Démarrer un enregistrement : Cliquez sur le point d’enregistrement, puis reproduisez le problème à capturer.
3. Enregistrer ce qui compte : Choisissez éventuellement une fenêtre ou dessinez une zone pour n’inclure que la partie pertinente de votre écran.
4. Vérifier la capture : Pendant la reproduction, DevRecorder capture automatiquement la sortie console, l’activité réseau et les événements de navigation (avec narration micro si activée).
5. Partager pour révision : Utilisez l’option de partage pour générer une URL partageable afin que votre équipe puisse consulter le contexte de débogage synchronisé.
6. (Optionnel) Envoyer le contexte aux outils IA : Connectez-vous via MCP pour que les outils IA compatibles puissent utiliser le contenu de l’enregistrement.

Cas d’usage

• Reproduire une erreur côté client : Enregistrez pendant le déclenchement d’un flux JavaScript/TypeError, puis positionnez-vous sur la frame précise où l’erreur apparaît dans la console.
• Déboguer les incohérences requête/réponse : Capturez un appel API défaillant (statut, payload, en-têtes et corps de réponse) et corrélez-le à l’état de l’interface et au timing affichés dans la vidéo.
• Suivre les transitions de route SPA : Lorsqu’un bug apparaît après une navigation (par exemple du catalogue vers le panier puis la validation), utilisez les événements de navigation pour confirmer le parcours réel de l’utilisateur.
• Rédiger un rapport de bug narré : Enregistrez et expliquez oralement les étapes de reproduction, permettant aux relecteurs de suivre le raisonnement tout en voyant les logs et l’activité réseau sous-jacents.
• Préparer une analyse assistée par IA : Fournissez le contexte de l’enregistrement à un assistant IA connecté via MCP, permettant à l’assistant de référencer ce qui s’est passé dans la vidéo ainsi que les données de débogage enregistrées.

FAQ

DevRecorder nécessite-t-il une connexion pour partager les enregistrements ?

La page indique que les membres de l’équipe peuvent ouvrir le lien partageable sans connexion.

Que capture DevRecorder pendant l’enregistrement ?

Il capture les logs console synchronisés (traces et arguments inclus), les requêtes réseau (en-têtes, payloads, corps de réponse et timings) et les événements de navigation, et peut inclure une narration micro.

Puis-je n’enregistrer qu’une partie de mon écran ?

Oui. La page décrit la possibilité de choisir une fenêtre ou de dessiner une zone pour ne capturer que la zone sélectionnée.

Comment les assistants IA obtiennent-ils le contexte de DevRecorder ?

Le site indique que vous pouvez vous connecter via MCP pour que l’assistant IA accède au contexte de l’enregistrement (vidéo, logs et réseau). Il mentionne également le glisser d’un enregistrement dans Cursor comme exemple de workflow.

Quelle configuration navigateur est mentionnée ?

Les instructions d’installation sur la page consistent à ajouter l’extension DevRecorder depuis le Chrome Web Store.

Alternatives

• Workflow d’enregistrement Performance/Réseau/Console dans DevTools : Intégré à Chrome DevTools et centré sur les traces et détails réseau capturés ; il nécessite généralement une exportation et une corrélation manuelles plutôt qu’une seule timeline vidéo synchronisée par frame.
• Outils d’enregistrement d’écran généralistes avec annotations : Outils qui enregistrent la vidéo pour des tutoriels ou la reproduction de bugs et peuvent être associés à une exportation séparée des logs, mais qui ne synchronisent pas automatiquement les données console et réseau avec la vidéo.
• Outils de signalement de bugs collectant des sessions (ex. : relecture de session) : Les produits de relecture de session capturent les timelines d’interactions utilisateur et parfois les détails réseau ; l’accent est généralement mis sur les interactions utilisateur plutôt que sur une capture de type DevTools des données console/réseau avec corrélation verrouillée par frame.