DevRecorder

Cos'è DevRecorder?

DevRecorder è un registratore di schermo progettato per gli sviluppatori per catturare il contesto di debug insieme a ciò che accade nell'interfaccia utente. Registra un video con una timeline sincronizzata di log console, richieste di rete ed eventi di navigazione, permettendo di scorrere fino al momento esatto in cui si verifica un bug.

Il registratore cattura anche i dettagli di richiesta/risposta (inclusi header, payload e body di risposta) e può aggiungere audio dal microfono mentre si spiega la riproduzione. È progettato per aiutare i team a condividere report di bug con contesto completo tramite un link condivisibile.

Funzionalità principali

• Timeline di debug sincronizzata con i frame: Log, rete e cambiamenti di route/navigazione sono ancorati ai frame video, consentendo di scorrere direttamente al momento della registrazione.
• Cattura console con dettagli preservati: Registra log console, avvisi ed errori con stack trace completi e payload degli argomenti “esattamente come li mostrerebbe DevTools”.
• Cattura rete con fedeltà simile a DevTools: Cattura le richieste di rete complete con header, payload, body di risposta e informazioni temporali paragonabili a quelle mostrate da DevTools.
• Tracciamento di navigazione e cambi di route: Registra gli eventi di navigazione per SPA e flussi di pagina tradizionali, in modo che la registrazione rifletta il percorso seguito dall'utente.
• Supporto narrazione con microfono: Permette di aggiungere audio dal microfono durante la registrazione per spiegare cosa sta accadendo senza uscire dal registratore.
• Output link condivisibile (nessun login richiesto per visualizzare): Genera un URL che i colleghi possono aprire per vedere il video con i dati di debug sincronizzati.
• Contesto assistente AI tramite MCP: Puoi connetterti tramite MCP in modo che un assistente AI possa accedere al contesto della registrazione (video, log e rete). La pagina menziona specificamente flussi di lavoro come trascinare una registrazione in Cursor.

Come usare DevRecorder

1. Installa l'estensione: Aggiungi l'estensione DevRecorder per Chrome dal Chrome Web Store.
2. Avvia una registrazione: Clicca sul punto di registrazione, quindi riproduci il problema che vuoi catturare.
3. Registra ciò che conta: Facoltativamente seleziona una finestra o disegna una regione in modo da includere solo la parte rilevante dello schermo.
4. Verifica la cattura: Durante la riproduzione, DevRecorder cattura automaticamente l'output console, l'attività di rete e gli eventi di navigazione (con narrazione dal microfono se abilitata).
5. Condividi per revisione: Usa l'opzione di condivisione per generare un URL condivisibile in modo che il tuo team possa visualizzare il contesto di debug sincronizzato.
6. (Opzionale) Invia contesto agli strumenti AI: Connettiti tramite MCP in modo che gli strumenti AI supportati possano utilizzare il contenuto della registrazione.

Casi d'uso

• Riprodurre un errore lato client: Registra mentre attivi un flusso JavaScript/TypeError, quindi scorri fino al frame preciso in cui l'errore appare nell'output console.
• Debug di mismatch richiesta/risposta: Cattura una chiamata API fallita (inclusi status, payload, header e body di risposta) e correlala allo stato dell'interfaccia e al timing mostrati nel video.
• Tracciare transizioni di route SPA: Quando un bug appare dopo una navigazione (ad esempio, passando da prodotti a carrello a checkout), usa gli eventi di navigazione per confermare il percorso effettivo dell'utente.
• Scrivere un report di bug narrato: Registra e spiega i passaggi di riproduzione, in modo che i revisori possano seguire il ragionamento vedendo anche i log e l'attività di rete sottostanti.
• Preparare analisi assistita da AI: Fornisci il contesto della registrazione a un assistente AI connesso tramite MCP, consentendo all'assistente di fare riferimento a ciò che è accaduto nel video insieme ai dati di debug registrati.

FAQ

DevRecorder richiede un login per condividere le registrazioni?

La pagina indica che i visualizzatori del team possono aprire il link condivisibile senza richiedere un login.

Cosa cattura DevRecorder durante la registrazione?

Cattura log console sincronizzati (inclusi stack trace e argomenti), richieste di rete (inclusi header, payload, body di risposta e timing) ed eventi di navigazione, e può includere narrazione dal microfono.

Posso registrare solo una parte dello schermo?

Sì. La pagina descrive la possibilità di selezionare una finestra o disegnare una regione in modo da catturare solo l'area selezionata.

Come ottengono contesto gli assistenti AI da DevRecorder?

Il sito indica che puoi connetterti tramite MCP in modo che l'assistente AI possa accedere al contesto della registrazione (video, log e rete). Menziona anche trascinare una registrazione in Cursor come esempio di flusso di lavoro.

Quale configurazione browser viene menzionata?

La guida all'installazione sulla pagina consiste nell'aggiungere l'estensione DevRecorder dal Chrome Web Store.

Alternative

• Flusso di registrazione di DevTools Performance/Network/Console: integrato in Chrome DevTools e focalizzato su tracce e dettagli di rete acquisiti; richiede in genere esportazione manuale e correlazione, anziché una timeline video sincronizzata su un singolo frame.
• Strumenti di registrazione schermo generici con annotazioni: strumenti che registrano video per tutorial o riproduzione bug possono essere abbinati a esportazione separata dei log, ma non sincronizzano automaticamente i dati di console e rete con il video.
• Strumenti di segnalazione bug che raccolgono sessioni (es. session replay): i prodotti di session replay catturano timeline di interazione utente e talvolta dettagli di rete; l’enfasi è solitamente sulle interazioni utente piuttosto che su una cattura di console/rete in stile DevTools con correlazione bloccata sui frame.