Cómo grabar la pantalla para informes de errores: una guía paso a paso
Una imagen vale más que mil palabras, pero un video vale más que mil imágenes. Cuando se trata de informes de errores, las grabaciones de pantalla pueden marcar la diferencia entre un ticket que se soluciona en minutos y uno que permanece en el backlog durante semanas.
En esta guía, te mostraremos cuándo usar grabaciones de pantalla, cómo crearlas con BugCapturer y las mejores prácticas para que tus grabaciones sean lo más útiles posible.
Cuándo usar grabación de pantalla vs capturas de pantalla
No todos los errores necesitan una grabación. Aquí tienes una guía rápida para ayudarte a decidir:
| Tipo de Bug | Captura de pantalla | Grabación de pantalla |
|---|---|---|
| Problema de diseño estático | ✅ Mejor opción | ❌ Excesivo |
| Texto faltante o incorrecto | ✅ Mejor opción | ❌ Excesivo |
| Fallo de animación o transición | ❌ No se puede capturar | ✅ Esencial |
| Problema de estado hover o tooltip | ❌ Difícil de capturar | ✅ Mejor opción |
| Bug en flujo de varios pasos | ❌ Necesita muchas capturas | ✅ Una grabación lo cubre todo |
| Problema de rendimiento / lag | ❌ No muestra la velocidad | ✅ Muestra el tiempo |
| Bug intermitente / sensible al tiempo | ❌ No se puede capturar | ✅ Mejor oportunidad para capturarlo |
Regla general: Si puedes describir el error claramente con una captura de pantalla anotada, usa una captura de pantalla. Si el error implica movimiento, tiempo o múltiples pasos, graba un video.
Cómo grabar la pantalla con BugCapturer
BugCapturer v1.2.0 hace que la grabación de pantalla sea simple y mantiene todo local — sin cargas, sin servicios de terceros.
Paso 1: Abre BugCapturer
Haz clic en el ícono de BugCapturer en la barra de herramientas de tu navegador. Aparecerá la ventana emergente con las opciones disponibles.
Paso 2: Inicia la grabación
Haz clic en el botón "Record Screen". BugCapturer solicitará permiso para compartir tu pantalla — selecciona la pestaña del navegador que deseas grabar y haz clic en "Share".
Paso 3: Graba el error
Realiza los pasos que reproducen el error. Los controles de grabación aparecen en la parte inferior de la pantalla, mostrando el tiempo transcurrido. Puedes pausar y reanudar si es necesario.
Paso 4: Detén y revisa
Haz clic en "Stop Sharing" cuando hayas terminado. La grabación aparecerá en la ventana emergente de BugCapturer para su revisión.
Paso 5: Recorta (Opcional)
Si la grabación tiene metraje innecesario al principio o al final, usa la herramienta de recorte para acortarla. Arrastra los controles para seleccionar la parte que deseas conservar.
Paso 6: Extrae fotogramas clave (Opcional)
Resalta momentos críticos extrayendo fotogramas de la grabación como imágenes PNG. Estos se pueden usar junto con la grabación para una referencia rápida.
Paso 7: Adjunta a tu informe de error
La grabación ya está lista para incluirse en tu informe de error. Cuando envías el correo electrónico a través de BugCapturer, el archivo de grabación se adjunta automáticamente.
Mejores prácticas para grabaciones de pantalla
Mantenlo breve
Apunta a 15-30 segundos. Si el error tarda más en reproducirse, considera recortar la grabación para mostrar solo las partes relevantes.
Muestra los pasos
Inicia la grabación y luego realiza los pasos de reproducción. Esto les brinda a los desarrolladores tanto la evidencia visual como los pasos en un solo paquete.
Resalta el problema
Usa las herramientas de anotación después de grabar — agrega flechas o recuadros para llamar la atención sobre el área del problema en los fotogramas extraídos.
Verifica el tamaño del archivo
Las grabaciones en WebM suelen tener un tamaño de 1-3 MB por 15-30 segundos. Si tu grabación es mucho más grande, intenta reducir la calidad de grabación o recortar de manera más agresiva.
Nómbralo claramente
Usa nombres de archivo descriptivos como cart-counter-stale-on-firefox.webm en lugar de recording-001.webm.
Casos de uso comunes
Bug de estado hover
Un menú desplegable que desaparece cuando el cursor se mueve ligeramente fuera del objetivo es casi imposible de describir con una captura de pantalla. Una grabación de 5 segundos captura el comportamiento exacto.
Rendimiento de animación
Una transición de página que tartamudea o se retrasa — una grabación muestra la velocidad de fotogramas real y el tiempo, lo cual es mucho más informativo que una descripción.
Bug en formulario de varios pasos
Un formulario que falla en el paso 4 de 5 — en lugar de cinco capturas de pantalla, una grabación muestra todo el flujo y dónde se rompe.
Solución de problemas
Permisos de grabación no aparecen
Asegúrate de estar usando un navegador compatible (Chrome 100+). Si el diálogo de permiso no aparece, verifica la configuración del sitio de tu navegador para los permisos de grabación de pantalla.
La grabación es demasiado grande
Intenta recortar la grabación a la longitud mínima necesaria. Si estás grabando una pantalla de alta resolución (4K), considera reducir el tamaño de la ventana del navegador antes de grabar.
No se escucha audio
BugCapturer graba el audio de la pestaña por defecto. Si necesitas agregar narración, usa la herramienta de grabación de pantalla de tu sistema operativo.
---
BugCapturer es una extensión gratuita de Chrome para informes de errores y comentarios web. Todo el procesamiento de datos ocurre localmente en tu navegador — sin servidores, sin cuentas, sin seguimiento.