Blog

Cómo usar capturas de pantalla en una revisión de código

Publicado 25 de octubre de 2026 · revisión de código, pull request, capturas, flujo de trabajo

Los cambios de interfaz cuesta revisarlos solo con un diff. Unas pocas capturas —antes y después, anotadas y con el estado que importa— hacen revisable una pull request.

Una pull request que cambia el comportamiento de un botón, la validación de un formulario o un estado de carga es difícil de juzgar desde un diff. Quien revisa acaba sacando la rama, recompilando y buscando la pantalla a la que te referías. Un conjunto pequeño y bien hecho de capturas elimina ese trabajo.

Captura antes y después

Para cualquier cambio visible, captura la misma pantalla dos veces:

1. En la rama base, captura la zona afectada.
2. En tu rama, captura la zona idéntica con el mismo tamaño de ventana y el mismo zoom.
3. Conserva las dos capturas; no recortes una más que la otra.

Que coincidan la ventana, el zoom del navegador y el tamaño de ventana es lo que hace significativa la comparación. Si el diseño es adaptable, captura los anchos que importan (por ejemplo, 1280 y 390) y etiquétalos.

Anota solo la diferencia

Quien revisa necesita saber dónde mirar, no un recorrido completo:

• Números para varios cambios en una captura: 1 es el nuevo estado vacío, 2 es el mensaje de error.
• Formas para delimitar la zona que cambió.
• Texto para el comportamiento esperado, breve.
• Mosaico o desenfoque para cualquier dato privado: nombres de clientes, correos, tokens, URL internas.

No anotes toda la pantalla. Si el cambio es un solo control, bastan una flecha y una frase.

Graba la interacción cuando una imagen no basta

Algunos cambios solo tienen sentido en movimiento: un desplegable que antes se cerraba demasiado pronto, un indicador de carga que ahora termina, una interacción de arrastre. Graba 10–20 segundos con Grabación rápida y adjunta el MP4 o, para una revisión que se vea en línea, un GIF (Pro).

• Muestra primero el comportamiento fallido y luego el corregido, en un solo clip si es posible.
• Desactiva el micrófono salvo que la narración aporte algo; un clip silencioso se reproduce solo sin problema.
• Mantén el clip lo bastante corto para verlo dos veces.

Pon la prueba en la pull request

Una estructura predecible ahorra tiempo a quien revisa:

1. Qué cambió, en una frase.
2. Imágenes de antes y después, en paralelo o apiladas, siempre en el mismo orden.
3. Cómo reproducir el estado de la captura, si no es la pantalla predeterminada.
4. Qué revisar: las una o dos cosas que podrían romperse.
5. Entorno, si importa: sistema operativo, navegador, escala de pantalla.

Adjunta las imágenes directamente a la pull request en vez de enlazar a un disco personal. Si usas un enlace para compartir, recuerda que puede caducar o pedir contraseña; para revisar código, normalmente es mejor un archivo adjunto.

Mantén el conjunto pequeño

Quien revisa hojea por encima. Tres capturas centradas se leen; quince se pasan de largo.

• Un par por cambio visible.
• Recorta el marco del navegador y los paneles que no vengan al caso.
• Comprime o cambia el tamaño de las imágenes que solo dan contexto; mantén la resolución completa para los cambios a nivel de píxel.
• Elimina las capturas que repiten el mismo estado desde un ángulo ligeramente distinto.

Lista antes de enviar

Preguntas frecuentes

¿Adjunto capturas o una grabación de pantalla?

Imágenes para los estados, un clip corto para las interacciones. Una grabación de 10–20 segundos basta para mostrar una transición; cualquier cosa más larga suele saltarse.

¿Cómo oculto los datos de clientes en una captura para revisión?

Usa Mosaico con una intensidad alta para nombres e identificadores, una cobertura sólida para secretos, o recorta la zona. El desenfoque es más débil que el mosaico y no debería usarse para nada sensible.

¿Necesito Pro para hacer capturas de revisión?

No para capturar, anotar, numerar, aplicar mosaico y grabar MP4 básico. La exportación a GIF, el Borrado inteligente y los efectos del editor de vídeo son funciones Pro, pero un conjunto de imágenes y un MP4 cubren la mayoría de las revisiones gratis.

Más del blog