Cómo informar un buen error del navegador

Informa a los proveedores de navegadores sobre los problemas que encuentras en sus navegadores es una parte integral para mejorar la plataforma web.

Pete LePage
Robert Nyman

Informar un buen error no es difícil, pero requiere un poco de trabajo. El objetivo es que encontrar lo que está roto, llegar a la causa raíz y, lo más importante, encontrar una para solucionarlo. Los errores que avanzan rápidamente suelen ser fáciles de reproducir con un el comportamiento esperado claro.

Verificar que sea un error

El primer paso es averiguar cuál es la palabra "correcta" cómo debería ser el comportamiento.

¿Cuál es el comportamiento correcto?

Consulta los documentos relevantes de la API en MDN o intenta lo siguiente: para encontrar especificaciones relacionadas. Esta información puede ayudarte a decidir qué API es y cuál es el comportamiento esperado.

¿Funciona en otro navegador?

Generalmente, el comportamiento que difiere entre los distintos navegadores tiene mayor prioridad como de interoperabilidad, especialmente cuando el navegador que contiene el error es el y las que no. Realiza pruebas en las versiones más recientes de Chrome, Firefox, Safari y Edge, posiblemente con una herramienta como BrowserStack.

Si es posible, comprueba que la página no se comporte intencionalmente de manera diferente debido a sniffing de usuarios-agentes. En las Herramientas para desarrolladores de Chrome, intenta configurar la cadena User-Agent. a otro navegador.

¿Se rompió en una versión reciente?

¿Funcionó como se esperaba en el pasado, pero se produjo un error en una versión reciente del navegador? Estas “regresiones” se puede actuar sobre ellos mucho más rápido, especialmente si proporcionas el número de versión en el que funcionó y la versión en la que falló. Herramientas como BrowserStack puede facilitar la verificación de versiones anteriores versiones del navegador y la herramienta bisect-builds (para Chromium) te permite buscar el cambio de manera muy eficiente.

Si un problema es una regresión y se puede reproducir, la causa raíz suele ser y solucionar el problema rápidamente.

¿Hay otras personas que tengan el mismo problema?

Si experimentas problemas, es muy probable que otros desarrolladores también lo hagan. Primero, intenta buscar el error en Stack Overflow. Esto podría ayudarte a traducir un problema abstracto en una API dañada específica, y podría ayudarte a encontrar una solución a corto plazo hasta que se corrija el error.

¿Se informó antes?

Una vez que tengas una idea de cuál es el error, es momento de comprobar si este ya se informó a través de una búsqueda en la base de datos de errores del navegador.

Si encuentras un error existente que describa el problema, agrega asistencia. Para destacarlo, marcarlo como favorito o comentarlo. Y, en muchos sitios, puedes agregarte a la lista de Cc y recibir actualizaciones cuando cambie el error.

Si decides comentar el error, incluye información sobre cómo lo afecta a tu sitio web. Evita agregar "+1". comentarios de estilo, como rastreadores de errores suelen enviar correos electrónicos por cada comentario.

Informar el error

Si el error no se informó antes, es momento de informar al proveedor del navegador. al respecto.

Cómo crear un caso de prueba minimizado

Mozilla tiene un excelente artículo sobre cómo crear un caso de prueba minimizado. Para hacer un En pocas palabras, si bien una descripción del problema es un gran comienzo, y proporciona una demostración vinculada en el error que muestra problema. Para maximizar las posibilidades de un progreso rápido, el ejemplo debe contener el código mínimo posible que se necesita para demostrar el problema. Un código mínimo es lo primero que puedes hacer para aumentar las probabilidades de error que se está solucionando.

Estas son algunas sugerencias para minimizar un caso de prueba:

  • Descargar la página web, agregar <base href="https://original.url"> y verificar que el error existe a nivel local. Esto puede requerir un servidor HTTPS activo si la URL usa HTTPS.
  • Prueba los archivos locales en las compilaciones más recientes de tantos navegadores como puedas.
  • Intenta condensar todo en 1 solo archivo.
  • Quita el código (comenzando por lo que sabes que no es necesario) hasta que aparezca el error. desaparece.
  • Usa el control de versiones para guardar tu trabajo y deshacer las tareas pendientes está mal.

Cómo alojar un caso de prueba reducido

Si buscas un buen lugar para alojar tu caso de prueba reducido, hay varios lugares buenos disponibles:

Ten en cuenta que varios de esos sitios muestran contenido en un iframe, puede provocar que las funciones o los errores se comporten de manera diferente.

Presenta tu problema

Una vez que tengas el caso de prueba minimizado, estarás listo para informar el error. Ve al sitio de seguimiento de errores correcto y crea un problema nuevo.

Proporciona una descripción clara y los pasos necesarios para reproducir el problema

Primero, proporciona una descripción clara para ayudar a los ingenieros a comprender rápidamente qué el problema y ayudar a clasificarlo.

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

A continuación, proporciona los pasos detallados necesarios para reproducir el problema. Aquí es donde entra en juego tu caso de prueba minificado.

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

Y, por último, describe el resultado esperado y el real.

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

Para obtener más información, consulta los lineamientos para redactar informes de errores. en MDN.

Contenido adicional: Agrega una captura de pantalla o una presentación en pantalla del problema

Aunque no es necesario, en algunos casos puede ser útil agregar una captura de pantalla. o una presentación en pantalla del problema. Esto es muy útil en los casos en que los errores pueden requerir algunos pasos extraños para reproducirse. Ser capaz de ver lo que sucede en una presentación en pantalla o una captura de pantalla pueden ser útiles.

Incluye detalles del entorno

Algunos errores son reproducibles solo en ciertos sistemas operativos o solo en tipos específicos de pantallas (por ejemplo, con valores bajos o altos de DPI). Asegúrate de incluye los detalles de los entornos de pruebas que usaste.

Envía el error

Por último, envía el error. Luego, recuerda estar pendiente de tu correo electrónico para ver si hay respuestas al error. Por lo general, durante la investigación y cuando se corrige el error los ingenieros pueden tener preguntas adicionales o si tienen dificultades reproducen el problema, pueden comunicarse con ellos.