DevRecorder

O que é DevRecorder?

DevRecorder é um gravador de tela desenvolvido para desenvolvedores capturarem o contexto de depuração junto com o que acontece na interface. Ele grava um vídeo com uma linha do tempo sincronizada de logs do console, requisições de rede e eventos de navegação, permitindo que você avance até o momento exato em que ocorre um bug.

O gravador também captura detalhes de requisição/resposta (incluindo cabeçalhos, payloads e corpos de resposta) e pode adicionar áudio do microfone enquanto você explica a reprodução. Foi projetado para ajudar equipes a compartilhar relatórios de bugs com contexto completo por meio de um link compartilhável.

Principais Recursos

• Linha do tempo de depuração sincronizada por frame: Logs, rede e mudanças de rota/navegação são ancorados aos frames do vídeo, permitindo que você avance diretamente até o momento da gravação.
• Captura do console com detalhes preservados: Registra logs do console, avisos e erros com stack traces completos e payloads de argumentos “exatamente como o DevTools mostraria”.
• Captura de rede com fidelidade semelhante ao DevTools: Captura requisições de rede completas com cabeçalhos, payloads, corpos de resposta e informações de tempo comparáveis ao que o DevTools exibe.
• Rastreamento de navegação e mudanças de rota: Registra eventos de navegação para SPAs e fluxos de página tradicionais, para que a gravação reflita o caminho percorrido pelo usuário.
• Suporte a narração por microfone: Permite adicionar áudio do microfone durante a gravação para explicar o que está acontecendo sem sair do gravador.
• Link compartilhável (sem login para visualizar): Gera uma URL que colegas podem abrir para ver o vídeo com dados de depuração sincronizados.
• Contexto de assistente de IA via MCP: Você pode conectar via MCP para que um assistente de IA acesse o contexto da gravação (vídeo, logs e rede). A página menciona fluxos de trabalho como arrastar uma gravação para o Cursor.

Como Usar o DevRecorder

1. Instalar a extensão: Adicione a extensão DevRecorder para Chrome na Chrome Web Store.
2. Iniciar uma gravação: Clique no ponto de gravação e reproduza o problema que deseja capturar.
3. Gravar o que importa: Opcionalmente, selecione uma janela ou desenhe uma região para incluir apenas a parte relevante da tela.
4. Verificar a captura: Ao reproduzir, o DevRecorder captura automaticamente a saída do console, a atividade de rede e os eventos de navegação (com narração por microfone, se ativada).
5. Compartilhar para revisão: Use a opção de compartilhamento para gerar uma URL compartilhável para que sua equipe visualize o contexto de depuração sincronizado.
6. (Opcional) Enviar contexto para ferramentas de IA: Conecte via MCP para que ferramentas de IA compatíveis possam usar o conteúdo da gravação.

Casos de Uso

• Reproduzindo um erro no lado do cliente: Grave ao acionar um fluxo JavaScript/TypeError e avance até o frame exato onde o erro aparece na saída do console.
• Depurando incompatibilidades de requisição/resposta: Capture uma chamada de API com falha (incluindo status, payload, cabeçalhos e corpo da resposta) e correlacione com o estado da interface e o tempo mostrado no vídeo.
• Rastreando transições de rota em SPAs: Quando um bug aparece após navegação (por exemplo, de produtos para carrinho e checkout), use os eventos de navegação para confirmar o caminho real percorrido pelo usuário.
• Escrevendo um relatório de bug narrado: Grave e explique as etapas de reprodução, para que os revisores possam seguir o raciocínio enquanto veem os logs e a atividade de rede subjacentes.
• Preparando análise assistida por IA: Forneça o contexto da gravação a um assistente de IA conectado via MCP, permitindo que o assistente consulte o que aconteceu no vídeo junto com os dados de depuração registrados.

FAQ

O DevRecorder exige login para compartilhar gravações?

A página informa que os visualizadores da equipe podem abrir o link compartilhável sem precisar de login.

O que o DevRecorder captura durante a gravação?

Ele captura logs do console sincronizados (incluindo stack traces e argumentos), requisições de rede (incluindo cabeçalhos, payloads, corpos de resposta e tempos) e eventos de navegação, podendo incluir narração por microfone.

Posso gravar apenas parte da minha tela?

Sim. A página descreve a opção de selecionar uma janela ou desenhar uma região para capturar apenas a área escolhida.

Como os assistentes de IA obtêm contexto do DevRecorder?

O site informa que você pode conectar via MCP para que o assistente de IA acesse o contexto da gravação (vídeo, logs e rede). Também menciona arrastar uma gravação para o Cursor como exemplo de fluxo de trabalho.

Qual configuração de navegador é mencionada?

A orientação de instalação na página é adicionar a extensão DevRecorder na Chrome Web Store.

Alternativas

• Fluxo de gravação de Performance/Rede/Console do DevTools: Integrado ao Chrome DevTools e focado em capturas de rastreamento e detalhes de rede; geralmente exige exportação manual e correlação, em vez de uma única linha do tempo de vídeo sincronizada por frame.
• Ferramentas de gravação de tela de uso geral com anotações: Ferramentas que gravam vídeo para tutoriais/reprodução de bugs podem ser combinadas com exportação separada de logs, mas não sincronizam automaticamente dados do console e de rede ao vídeo.
• Ferramentas de relatório de bugs que coletam sessões (ex.: reprodução de sessão): Produtos de reprodução de sessão capturam linhas do tempo de interação do usuário e, às vezes, detalhes de rede; o foco costuma estar nas interações do usuário, em vez de uma captura semelhante ao DevTools de console/rede com correlação travada por frame.