Este artículo nació de una publicación en el foro interno de nuestra oficina, una pequeña discusión, una pequeña adición, y luego decidí ponerlo en la forma final aquí para que sea más conveniente vincularlo.
Sí, la publicación es capitana, este es el comportamiento esperado :) Solo quiero que se recopile, de manera ordenada y disponible en general.
Introducción: encuentra un gato
Hay errores en los productos que desarrollamos.
A veces los encontramos. A veces incluso lo escribimos.
Para ayudar a nuestros colegas a mejorar su producto.
Y nos ofendemos mucho cuando nuestros colegas nos escriben: "No entendí nicromo", "no juega para mí", "ven y muéstrame".
A veces digo eso.
Porque muy a menudo los insectos se parecen a la imagen "encontrar un gato".
El que escribió el error sabe exactamente dónde está el gato. Ya lo encontró. Ya no puede verlo.
Y tengo que sentarme, buscar en el monitor y buscar un maldito gato.
A menudo se adjunta un video a un error. Después de todo, ¡el video muestra todo!
Allí todo es igual, solo la hierba sigue balanceándose (movimientos del mouse) y las puertas se abren (abren diálogos irrelevantes).
En este punto, hablo sobre las reglas para grabar errores, que trato de seguir por mí mismo y que recomiendo a los demás.
Mis reglas personales para grabar errores
1) Palabras clave en el encabezado del error
Para que pueda comprender rápidamente a qué competencia pertenece un error.
2) Pasos para jugar
Y es muy muy importante. Y sí, compilarlos lleva más tiempo al grabar.
Porque a menudo, comenzando, escribiendo los pasos y descartando los "extra", comprende que el error no siempre se reproduce.
3) " comportamiento esperado " vs " comportamiento observado " en aquellos pasos donde, de hecho, un error.
Esto es critico. Porque no siempre es lo que una persona espera ver, corresponde a cómo es realmente. Entonces puedes buscar al gato sin cesar.
4) Las capturas de pantalla son buenas
Las imágenes proporcionan un contexto visual, muestran las partes del desarrollador del producto con problemas e inmediatamente comprende el área de conocimiento necesaria. La imagen a este respecto funciona en conjunto con las palabras clave (ver párrafo 1)
5) El video es bueno, pero solo cuando mostramos un error de animación
Y, el video es algo con lo que básicamente puedes vivir cuando el autor del error no puede escribir los pasos para la reproducción.
O el error no es determinista y se necesita una prueba.
En otros casos, el video es redundante.
El video del error debe ser para el error. 10 segundos de duración, sin abrir las ventanas izquierdas.
6) Errores de seguimiento / consola de pila con ejecución explícita
Bueno, casi todos entienden esto y lo aplican, escribo solo para completar la lista.
7) Un ejemplo para la reproducción .
Si estamos hablando de algún tipo de sistema de escritorio, entonces necesitamos un archivo en el que se reproduzca el problema.
En la web es más fácil: a menudo puede proporcionar un enlace a una demostración en línea (o a un entorno de ensayo ampliado).
Eso es todo en una primera aproximación.
Comparto esto con otras personas, y a menudo me creen y comienzan a hacer lo mismo.
Más ejemplos y 20% de los detalles, que ocupan el 80% del artículo :)
Ejemplos
Un ejemplo de error es cómo los escribo y cuál es más o menos :)
dxTreeView crea indicadores de carga redundantes en modo virtual
Más entradas (solo una selección aleatoria de la lista de entradas públicas registradas por nuestro equipo)- Panel web: los botones Restablecer y Enviar desaparecen en el elemento personalizado Parámetro después de enviar el valor del parámetro
Para reproducir el problema, ejecute el proyecto adjunto, cambie el valor del parámetro en el elemento personalizado Parámetro y haga clic en el botón Enviar.
Resultado real: los botones Restablecer y Enviar desaparecen.
Resultado esperado: se deben mostrar los botones Restablecer y Enviar.
- Web Dashboard Viewer: los botones de la barra de herramientas se muestran cuando se hace clic en cualquier parte del control en un monitor táctil y se ocultan los títulos de los elementos
Ejecute el proyecto y haga clic en cualquier parte del visor para reproducir el problema.
Resultado real: se muestran los botones de la barra de herramientas.
Resultado esperado: los botones de la barra de herramientas deben mostrarse solo al pasar el cursor sobre ellos.
Como solución alternativa, ejecute el siguiente código (interno) en el controlador de eventos OnInit:
function onInit(s, e) { DevExpress.Dashboard.Internal.DashboardLayoutModeHelper.isTouch = false; }
- ASPxDashboardViewer / MVCxDashboardViewer: se abre una excepción si abre paneles con pestañas (esto no se espera, pero es obvio por el título del error. Esto sucede, está bien).
El antiguo control ASPxDashboardViewer y la extensión MVCxDashboardViewer no son compatibles con el elemento del panel del contenedor Tab en comparación con ASPxDashboard / MVCxDashboard. Cuando ASPxDashboardViewer / MVCxDashboardViewer abre un tablero con un contenedor de pestañas, se produce una excepción del lado del cliente. En su lugar, es necesario mostrar el mensaje emergente correspondiente en una interfaz de usuario del tablero.
- Panel web: el panel de enlace permanece transparente en ciertos casos (aquí está el video, porque es un error muy grave, intentamos atraparlo durante un año y medio)
Pasos para reproducir:
- Crea un tablero con un artículo. Asegúrese de que el panel de encuadernación se superpondrá al elemento cuando se abra.
- Selecciona el artículo.
- Abra el panel de encuadernación (por ejemplo, haga clic en el botón 'Opciones') y mueva un cursor sobre el panel hasta el momento en que el cursor se coloca sobre el elemento. El panel de encuadernación se vuelve transparente (esperado)
- Haga clic en el elemento del tablero. Panel de encuadernación cerrado.
- Haga clic en el botón 'Opciones' nuevamente.
Resultado real:
El panel de encuadernación es transparente.
Resultado esperado:
El panel de encuadernación no es transparente.
El paso principal es cerrar el panel de encuadernación haciendo clic en el elemento mientras está transparente.
Se adjunta el screencast.
- Panel web: elemento de pantalla completa: Pivot funciona incorrectamente en el estado maximizado
- Abra la demostración RevenueAnalysis.
- Expande la columna "Bicicletas" de Pivot.
- Contrae la columna "Bicicletas" del pivote.
- Maximice el elemento del panel de control Pivot.
Resultado esperado: la columna "Bicicletas" de Pivot debe colapsarse en el estado maximizado.
Resultado: la columna "Bicicletas" del pivote se expande en el elemento maximizado.
- La información sobre herramientas del gráfico se puede recortar si se utiliza un contenedor personalizado
Pasos para reproducir:
- Use el contenedor del gráfico como contenedor de información sobre herramientas;
- Muestre información sobre herramientas en algunos puntos cercanos al borde del gráfico;
- Incorrecto La información sobre herramientas se muestra fuera del contenedor o se puede recortar dependiendo de la configuración de desbordamiento del contenedor.
ESPERADO La información sobre herramientas debe mostrarse dentro de su contenedor hasta que se ajuste al tamaño del contenedor.
Y otros
Filosofías y pequeños detalles definitorios.
Preparación de captura de pantalla
Las imágenes deben estar con grandes flechas rojas o incluso con subtítulos.
La captura de pantalla debe ser parte del cuerpo del error, justo en el texto.
Si el error se informa en la mayoría de los sistemas modernos, esto se hace simplemente pegando la imagen del portapapeles con Ctrl + V
¿Por qué no puedes simplemente dar un enlace a la imagen? Porque hay una pérdida de contexto. Si miras la imagen, no ves el texto. Si ve el texto, entonces no ve la imagen. Si ve esto y aquello, la probabilidad de que algo haga clic en el cerebro es mucho mayor.
Un minuto de deformación profesional.
Es por eso que los tableros como un fenómeno de análisis de datos se están volviendo populares :)
Cuando una persona ve los mismos datos en diferentes formatos y desde diferentes ángulos, puede obtener información.
Ver Steven Few y otros autores para más detalles.
El tamaño de la captura de pantalla siempre es un compromiso.
Cuando es pequeño, el problema se ve mejor y ocupa poco espacio. Pero no siempre está claro de dónde vino esta pieza.
Capturaron el área de la pantalla un poco más, los detalles extraños encajan. La pantalla desde la que se abrió la ventana emergente, en la que aparece el error. El navegador en el que se produce el error. Botón de inicio para Windows en el que aparece el error. El DPI del monitor en el que aparece el error ... oh, pero el error en sí ya no es visible. El gato se convirtió en dos píxeles e indefinible incluso dentro del círculo rojo.
Dónde dejar de recortar una captura de pantalla siempre es un arte)
Ejemplos de capturas de pantalla, de pequeñas a grandes:
informe de error en el Código Penal, la barandilla está rota
El problema es claramente visible, pero el contexto está perdido. Si no hubiera una inscripción en palabras de que estaba cerca de la entrada principal, el soldador caminaría por el sitio con una máscara y buscaría.
en comunicación personal, una pregunta sobre la implementación de TreeView
Se muestra qué elemento tengo en mente (signo más ... bueno, vaya a traducir mejor el botón de extensión :)), el contexto es visible (nueva pantalla del asistente)
- El problema con las demostraciones de escalado del tablero en DPI = 125%
Se puede ver qué tipo de navegador y URL del sitio
Las pestañas se borran innecesariamente para no distraer. Se dejó un artículo sobre Windows 10 Creators Update (en el que el 125% de DPI se convirtió en un valor predeterminado en las computadoras portátiles de 15.6 ″) para que, al mirar esta captura de pantalla, recordara esto y pudiera presumir y hablar sobre ello.
Destaquemos nuevamente. Con herramientas normales, el tiempo de preparación para cada una de estas capturas de pantalla es de 5 a 30 segundos.
Este no es el fruto de una larga obra de arte. Es rápido y eficiente. Puede detenerse y llevarlos a la perfección ... pero, por regla general, esto no es obligatorio.
Programas para tomar capturas de pantalla
- Yandex.Disk, me encanta su captura de pantalla . Pues aquí está. Por alguna razón, resultó ser lo mejor de lo que intenté hacer flechas, hacer círculos con un cuadrado pequeño y agregar inscripciones legibles. Todos los ejemplos del artículo están hechos al respecto.
- Monosnap (gratis, con un plan pagado). En principio, nada, pero (¡subjetividad!) Las flechas son feas;
- ShareX (completamente gratis);
- Jing ha sido ampliamente utilizado por nuestros ingenieros de soporte técnico; lentamente se va, porque él escribe un video en un flash desagradable.
- En Windows 10: combinación integrada Win + Shift + S # Comentario del autor: realmente bastante bueno
- capturador de pantalla incorporado en Mac # ,
- GreenShot - Win # , #
- LightShot - Mac / Win #
- Captura FastStone #
- FlameShot (Linux, en github discute la posibilidad de Windows)
- Herramienta de recorte: Windows integrado #
- gooncam #
- PicPick (Windows) #
- Espectáculo y KSnapshot (Linux) #
- Problema Steps Recorder: integrado en Windows, lanzado a través de PSR desde la línea de comandos
Anotamos el problema, no la solución.
Este ítem surgió como resultado de una discusión interna. Muy inesperadamente, no fue claro para todos, por lo tanto, un ejemplo.
Por ejemplo, estoy probando un diseñador de tablero y veo algo así:
Y estoy escribiendo un error:
"No hay desplazamiento horizontal"
Incluso puedo escribirlo con pasos y el resultado esperado: smiley:
Resultado esperado : el nombre de la regla debe desplazarse horizontalmente.
resultado real : el nombre de la regla no se desplaza
El error se enmarca normalmente, pero esto no impide que el desarrollador me considere un imbécil. Y tendrá razón :)
Hay problemas: "el texto no es visible en su totalidad; el texto se superpone en el icono"
Pero en lugar de registrar este problema, grabé mi solución a este problema. Uno de muchos, y ciertamente no el mejor.
Y tal sustitución no ocurre tan raramente. Incluso yo mismo, a veces me doy cuenta de esto.
Después de todo, sé exactamente cómo solucionarlo. ¡Entonces, lo escribiré!
(Bueno, a veces realmente lo sé. Y trato de escribir mis sugerencias en el cuerpo del error, después de describir el problema. Pero no como la única solución posible)
Pro ejemplo para reproducción
En el desarrollo de escritorio, este elemento es discutible. Por un lado, la utilidad de ejecutar código de ejemplo que reproduce el problema es clara para todos.
Por otro lado, crear un ejemplo ya aumenta significativamente el tiempo que lleva escribir un error, hasta un pedido.
En general, en mi cabeza de esta manera: para casos complejos es necesario, en casos simples puede ser redundante.
Me enseñaron en la universidad que si el sistema de seguridad se vuelve demasiado complejo y trae daños e inconvenientes, entonces simplemente dejan de usarlo.
Si obliga a hacer un ejemplo para cada error, en un mes obtendrán incluso ejemplos de errores complejos)
Por otro lado, en errores simples puedes entrenar para hacer ejemplos ...
En resumen, el tema es discutible.
Agregaré un artículo de CTO de nuestra oficina a la hucha hace diez años, donde explica por qué pedimos ejemplos a nuestros clientes.
Una solicitud de programas de ejemplo simples 10 por Julian
Y hay un momento con ejemplos simplificados, cita:
Un ejemplo altamente simplificado es ciertamente bueno, pero también malo. Ha habido casos repetidos que un ejemplo simplificado:
- no cubre todos los escenarios de un error;
- no refleja el escenario real, lo que puede conducir a una solución inadecuada.
Idealmente, es mejor tener una muestra simplificada y original.
Ahora sabes que:
- preparar ejemplos es muy útil;
- es dificil;
- Lo principal es no exagerar.
Tiempo de registro de errores
Resultó muchas cartas. Puede parecer un procedimiento burocrático complicado, largo y tedioso.
Por lo tanto, no debería ser difícil y largo.
La mediana del tiempo de grabación de un error que satisface los requisitos de los requisitos anteriores es de aproximadamente un minuto.
Sí, en casos donde resulta que los pasos no reproducen el error; o que no son todos importantes, y quisieron eliminar el exceso; o se ha revelado un nuevo paso en el proceso, entonces el tiempo aumenta.
Pero la probabilidad de que su error se repare y no se cierre con el comentario "no se puede reproducir" está aumentando significativamente.
Oposición
Lo que me dicen cuando comparto mi visión:
el error es obvio
Es obvio para alguien que ya ha encontrado un gato.
Sin una descripción detallada y pasos, todos los demás tendrán que buscarlo. Tiempo no determinista.
Sí, mi esposa y VYudachev encontraron al gato en los primeros tres segundos. Dos de mi muestra.
Y el resto de la gente (alrededor de una docena más o menos), cuyos monitores miré, buscaron un gato por hasta cinco minutos.
Pero en general, escupí e inmediatamente abrí una suposición.
Y con errores mal escritos, lo mismo.
el video es suficiente, todo es visible allí
En primer lugar, para el lector del error es mucho tiempo. Mucho más tiempo que leer la lista de pasos, rastreándola por palabras clave.
En segundo lugar, para descubrir los detalles más pequeños, es necesario revisarlo muchas veces, tratando de detenerse, detenerse precisamente en los momentos críticos.
En tercer lugar, a menudo en videos mal preparados hay muchos detalles adicionales. Y no sabes qué es realmente superfluo de esto, y qué no lo es. ¿Es necesario cerrar la notificación de VKontakte para reproducir el error? ¿Hay alguna interacción con el sistema operativo que causó el error de representación? ¿Puedo usar un telegrama en lugar de VKontakte? ...
(Para ser justos, sucedió en mi práctica que el autor del funcional encontró otros errores en el video adjunto)
escribir errores como este durante mucho tiempo
Lleva más tiempo escribir un error con pasos, es cierto.
A menudo porque, al escribir los pasos exactos, involuntariamente comienza a realizar trabajos de depuración.
Estás tratando de tirar algún paso, o es crítico.
Sí, pasas tu tiempo y ahorras el de otra persona.
Referencias
La lista de requisitos para registrar errores nació sobre mi base:
si descarta los detalles del foro-maillist-open-source, entonces casi todo es valioso. Incluyendo mi favorito "Describa los síntomas del problema, no sus conjeturas" y "Sea explícito sobre su pregunta";
El final
Compartí esta opinión sobre la grabación de errores con mis equipos. Ahora decidí llegar a un público más amplio.
Gracias por leer
Aquí hay una pista de la foto del gato ( tomada aquí ).
Por cierto, la imagen no es mía, pero está bien preparada: hay una flecha y hay un aumento en el área con un error gato
UPD 28/06/2019
Captura de pantalla de programas de comentarios agregados a la lista general
Errores tipográficos arreglados, incluso causando discusión en comentarios