DevRecorder

Was ist DevRecorder?

DevRecorder ist ein Screen-Recorder für Entwickler, der Debugging-Kontext neben dem Geschehen in der Benutzeroberfläche erfasst. Er zeichnet ein Video mit einer synchronisierten Timeline von Console-Logs, Netzwerk-Requests und Navigation-Events auf, sodass du direkt zu dem Moment springen kannst, in dem ein Bug auftritt.

Der Recorder erfasst außerdem Request-/Response-Details (inklusive Header, Payloads und Response-Bodies) und kann Mikrofon-Audio hinzufügen, während du die Reproduktion erklärst. Er ist darauf ausgelegt, Teams Bug-Reports mit vollständigem Kontext über einen teilbaren Link zu ermöglichen.

Wichtige Funktionen

• Frame-synchronisierte Debugging-Timeline: Logs, Netzwerk und Routen-/Navigationsänderungen sind an die Video-Frames gekoppelt, sodass du direkt zum entsprechenden Moment in der Aufnahme springen kannst.
• Console-Erfassung mit vollständigen Details: Zeichnet Console-Logs, Warnungen und Fehler mit vollständigen Stack-Traces und Argument-Payloads „genau wie DevTools sie anzeigt“ auf.
• Netzwerk-Erfassung mit DevTools-ähnlicher Genauigkeit: Erfasst vollständige Netzwerk-Requests mit Headern, Payloads, Response-Bodies und Timing-Informationen, vergleichbar mit der Darstellung in DevTools.
• Navigation und Routenwechsel-Tracking: Zeichnet Navigations-Events für SPAs und klassische Seitenflüsse auf, sodass die Aufnahme den tatsächlichen Pfad des Nutzers widerspiegelt.
• Mikrofon-Narration-Unterstützung: Ermöglicht das Hinzufügen von Mikrofon-Audio während der Aufnahme, um das Geschehen zu erklären, ohne den Recorder zu verlassen.
• Teilbarer Link (kein Login zum Ansehen nötig): Erzeugt eine URL, die Teammitglieder öffnen können, um das Video mit synchronisierten Debug-Daten zu sehen.
• KI-Assistent-Kontext über MCP: Du kannst über MCP eine Verbindung herstellen, damit ein KI-Assistent auf den Aufnahmekontext (Video, Logs und Netzwerk) zugreifen kann. Die Seite erwähnt Workflows wie das Ziehen einer Aufnahme in Cursor.

So verwendest du DevRecorder

1. Erweiterung installieren: Füge die DevRecorder Chrome-Erweiterung aus dem Chrome Web Store hinzu.
2. Aufnahme starten: Klicke auf den Aufnahme-Punkt und reproduziere das gewünschte Problem.
3. Relevantes aufnehmen: Wähle optional ein Fenster aus oder zeichne einen Bereich, damit nur der relevante Teil deines Bildschirms erfasst wird.
4. Aufnahme prüfen: Während der Reproduktion erfasst DevRecorder automatisch Console-Ausgaben, Netzwerkaktivität und Navigations-Events (mit Mikrofon-Narration, falls aktiviert).
5. Zum Review teilen: Nutze die Teilen-Option, um eine teilbare URL zu erzeugen, damit dein Team den synchronisierten Debug-Kontext ansehen kann.
6. (Optional) Kontext an KI-Tools senden: Verbinde dich über MCP, damit unterstützte KI-Tools den Aufnahmekontext nutzen können.

Anwendungsfälle

• Reproduktion eines clientseitigen Fehlers: Nimm auf, während du einen JavaScript/TypeError-Flow auslöst, und springe dann zum genauen Frame, in dem der Fehler in der Console-Ausgabe erscheint.
• Debugging von Request-/Response-Abweichungen: Erfasse einen fehlgeschlagenen API-Call (inklusive Status, Payload, Header und Response-Body) und korreliere ihn mit dem UI-Zustand und dem Timing im Video.
• Tracking von SPA-Routenübergängen: Wenn ein Bug nach einer Navigation auftritt (z. B. von Produkten zum Warenkorb zur Kasse), nutze die Navigations-Events, um den tatsächlichen Routenpfad des Nutzers zu bestätigen.
• Erstellung eines kommentierten Bug-Reports: Nimm auf und sprich die Reproduktionsschritte durch, damit Reviewer die Logik nachvollziehen können, während sie gleichzeitig die zugrunde liegenden Logs und Netzwerkaktivität sehen.
• Vorbereitung einer KI-gestützten Analyse: Stelle den Aufnahmekontext einem über MCP verbundenen KI-Assistenten zur Verfügung, damit dieser auf das Geschehen im Video sowie die aufgezeichneten Debug-Daten zugreifen kann.

FAQ

Benötigt DevRecorder einen Login zum Teilen von Aufnahmen?

Die Seite gibt an, dass Team-Betrachter den teilbaren Link öffnen können, ohne sich anzumelden.

Was erfasst DevRecorder während der Aufnahme?

Es erfasst synchronisierte Console-Logs (inklusive Stack-Traces und Argumente), Netzwerk-Requests (inklusive Header, Payloads, Response-Bodies und Timings) und Navigations-Events und kann Mikrofon-Narration einschließen.

Kann ich nur einen Teil meines Bildschirms aufnehmen?

Ja. Die Seite beschreibt das Auswählen eines Fensters oder das Zeichnen eines Bereichs, sodass nur der ausgewählte Bereich erfasst wird.

Wie erhalten KI-Assistenten Kontext von DevRecorder?

Die Seite gibt an, dass du über MCP eine Verbindung herstellen kannst, damit der KI-Assistent auf den Aufnahmekontext (Video, Logs und Netzwerk) zugreifen kann. Als Beispiel-Workflow wird das Ziehen einer Aufnahme in Cursor erwähnt.

Welche Browser-Einrichtung wird genannt?

Die Installationsanleitung auf der Seite lautet, die DevRecorder-Erweiterung aus dem Chrome Web Store hinzuzufügen.

Alternativen

• DevTools Performance/Network/Console-Aufzeichnung: In Chrome DevTools integriert und auf erfasste Traces sowie Netzwerkdetails fokussiert; erfordert in der Regel manuelles Exportieren und Abgleichen, statt einer einzigen bildsynchronisierten Video-Timeline.
• Allgemeine Bildschirmaufzeichnungstools mit Annotationen: Tools, die Videos für Tutorials oder Bug-Reproduktion aufzeichnen, können mit separatem Log-Export kombiniert werden, synchronisieren Console- und Netzwerkdaten jedoch nicht automatisch mit dem Video.
• Bug-Reporting-Tools mit Session-Aufzeichnung (z. B. Session Replay): Session-Replay-Produkte erfassen Nutzerinteraktions-Timelines und teilweise Netzwerkdetails; der Schwerpunkt liegt meist auf Nutzerinteraktionen statt auf einer DevTools-ähnlichen Erfassung von Console/Netzwerk mit bildsynchroner Korrelation.