Informar a los proveedores de navegadores sobre los problemas que encuentras en su navegador es una parte integral para mejorar la plataforma web.
Informar un buen error no es difícil, pero lleva un poco de trabajo. El objetivo es facilitar la búsqueda de lo que no funciona, llegar a la causa raíz y, lo más importante, encontrar una manera de solucionarlo. Los errores que progresan rápido suelen ser fáciles de reproducir con un comportamiento esperado claro.
Verifica si se trata de un error
El primer paso es descubrir cuál debería ser el comportamiento "correcto".
¿Cuál es el comportamiento correcto?
Consulta los documentos de la API relevantes en MDN o intenta encontrar especificaciones relacionadas. Esta información puede ayudarte a decidir qué API está dañada, dónde lo hace y cuál es el comportamiento esperado.
¿Funciona en otro navegador?
Por lo general, el comportamiento que difiere entre los navegadores tiene prioridad más alta como problema de interoperabilidad, en especial cuando el navegador que contiene el error es el que no corresponde. Intenta realizar 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 de manera diferente intencionalmente debido al detector de usuarios-agentes. En las Herramientas para desarrolladores de Chrome, intenta configurar la cadena User-Agent en otro navegador.
¿Se rompió en una versión reciente?
¿Funcionó como se esperaba en el pasado, pero dejó de funcionar en una versión reciente del navegador? Se puede actuar mucho más rápido sobre estas "regresiones", en especial si proporcionas un número de versión en la que funcionó y una en la que falló. Las herramientas como BrowserStack pueden facilitar la verificación de versiones anteriores del navegador y la herramienta de compilación bisect (para Chromium) permite buscar el cambio de forma muy eficiente.
Si un problema es una regresión y se puede reproducir, por lo general, la causa raíz se puede encontrar y solucionar rápidamente.
¿Otros tienen el mismo problema?
Si tienes problemas, es muy probable que otros desarrolladores también lo estén. Primero, busca el error en Stack Overflow. Esto podría ayudarte a traducir un problema abstracto a una API específica dañada y a encontrar una solución a corto plazo hasta que se corrija el error.
¿Se denunció anteriormente?
Una vez que tengas una idea de cuál es el error, es momento de verificar si ya se informó. Para ello, realiza una búsqueda en la base de datos de errores del navegador.
- Navegadores basados en Chromium: https://crbug.com
- Firefox: https://bugzilla.mozilla.org/
- Navegadores basados en Safari y WebKit: https://bugs.webkit.org/
Si encuentras un error existente que describa el problema, destaca el error, márcalo como favorito o comenta el error para agregar tu asistencia. En muchos sitios, puedes agregarte a la lista de subtítulos y recibir actualizaciones cuando cambie el error.
Si decides hacer comentarios sobre el error, incluye información sobre cómo afecta el error a tu sitio web. Evita agregar comentarios con el estilo "+1", ya que las herramientas de seguimiento de errores suelen enviar correos electrónicos por cada comentario.
Informar el error
Si no se informó el error antes, es momento de informárselo al proveedor del navegador.
Crea un caso de prueba minimizado
Mozilla tiene un excelente artículo sobre cómo crear un caso de prueba minimizado. Para que sea breve, si bien una descripción del problema es un buen comienzo, no hay nada mejor que proporcionar una demostración vinculada en el error que muestra el problema. Para maximizar la posibilidad de un progreso rápido, el ejemplo debe contener el código mínimo posible necesario para demostrar el problema. Una muestra de código mínima es lo primero que puedes hacer para aumentar las probabilidades de que se solucione el error.
A continuación, se incluyen algunas sugerencias para minimizar un caso de prueba:
- Descarga la página web, agrega
<base href="https://original.url">y verifica que el error exista de forma 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 archivo.
- Quita el código (comenzando por lo que sabes que no es necesario) hasta que el error desaparezca.
- Usa el control de versión para poder guardar tu trabajo y deshacer los errores.
Cómo alojar un caso de prueba reducido
Si buscas un lugar adecuado para alojar tu caso de prueba reducido, hay varios lugares disponibles:
Ten en cuenta que varios de esos sitios muestran contenido en un iframe, lo que puede provocar que las funciones o los errores se comporten de manera diferente.
Presentación del problema
Una vez que tengas tu caso de prueba minimizado, estará todo listo para informar el error. Ve al sitio adecuado de seguimiento de errores y crea un error nuevo.
- Navegadores basados en Chromium: https://crbug.com/new
- Firefox: https://bugzilla.mozilla.org/
- Navegadores basados en Safari y WebKit: https://bugs.webkit.org/
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 cuál es el problema y 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.
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 escribir informes de errores sobre MDN.
Contenido adicional: Agrega una captura de pantalla del problema
Si bien no es necesario, en algunos casos, puede ser útil agregar una captura de pantalla del problema. Esto es muy útil en los casos en que los errores pueden requerir algunos pasos extraños para reproducirse. Poder ver lo que sucede en una presentación en pantalla o en una captura de pantalla con frecuencia puede ser útil.
Incluye detalles del entorno
Algunos errores se pueden reproducir solo en ciertos sistemas operativos o solo en tipos específicos de pantallas (por ejemplo, valores bajos o altos de DPI). Asegúrate de incluir los detalles de los entornos de pruebas que usaste.
Envía el error
Por último, envía el error. Luego, no olvides revisar tu correo electrónico para ver si hay respuestas al error. Por lo general, durante la investigación y cuando corrigen el error, los ingenieros pueden tener más preguntas o, si tienen dificultades para reproducir el problema, pueden comunicarse.