Informar a los proveedores de navegadores sobre los problemas que encuentras en su navegador es una parte integral de mejorar la plataforma web.
Es un buen error, pero requiere un poco de trabajo. Tu objetivo debe ser que sea lo más fácil posible para los ingenieros de navegadores encontrar lo que no funciona, alcanzar la causa raíz y, lo más importante, encontrar una manera de solucionarlo. Los errores que progresan rápidamente tienden a reproducirse rápido con un comportamiento esperado claro.
Verificar que sea un error
El primer paso es averiguar 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 y cuál es el comportamiento esperado.
¿Funciona en otro navegador?
El comportamiento que difiere entre los navegadores suele tener una prioridad más alta como un problema de interoperabilidad, en especial, cuando el navegador que contiene el error es el único que presenta este comportamiento. Intenta realizar las pruebas en las versiones más recientes de Chrome, Firefox, Safari y Edge, posiblemente con una herramienta como BrowserStack.
Si es posible, verifica que la página no se comporte de manera diferente de forma intencional debido al espionaje del usuario-agente. En las herramientas para desarrolladores de Chrome, intenta configurar la cadena User-Agent en otro navegador.
¿Falló en una versión reciente?
¿Funcionaba como se esperaba en el pasado, pero dejó de funcionar en una versión reciente del navegador? Se puede actuar sobre esas regresiones mucho más rápido, en especial si proporcionas un número de versión en el que funcionó y una versión en la que falló. Puedes usar herramientas como BrowserStack para verificar las versiones anteriores del navegador. Usa herramientas como la herramienta de compilación de bisects (para Chromium) para buscar el cambio.
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.
¿Otras personas ven el mismo problema?
Si tienes problemas, es probable que otros desarrolladores también los tengan. Primero, intenta buscar el error en Stack Overflow. Esto puede ayudarte a traducir un problema abstracto en una API específica dañada y a encontrar una solución a corto plazo hasta que se solucione el error.
¿Se informó antes?
Una vez que tengas una idea de cuál es el error, es hora de buscar en la base de datos de errores del navegador para comprobar si ya se informó.
- Navegadores basados en Chromium: https://crbug.com
- Firefox: https://bugzilla.mozilla.org/
- Safari y navegadores basados en WebKit: https://bugs.webkit.org/
Si encuentras un error existente que describe el problema, agrega tu apoyo destacando el error, agregándolo a favoritos o comentando sobre él. Además, en muchos sitios, puedes agregarte a la lista de Cc y recibir actualizaciones cuando cambie el error.
Si decides comentar sobre el error, incluye información sobre cómo este afecta a tu sitio web. Evita agregar comentarios del estilo “+1”, ya que los servicios de seguimiento de errores suelen enviar correos electrónicos por cada comentario.
Informa el error
Si el error no se informó antes, es hora de informarle al proveedor del navegador.
Cómo crear un caso de prueba minimizado
Mozilla tiene un excelente artículo sobre cómo crear un caso de prueba reducido. En resumen, si bien una descripción del problema es un buen comienzo, nada mejor que proporcionar una demostración vinculada en el error que muestre el problema. Para maximizar las posibilidades de un progreso rápido, el ejemplo debe contener el código mínimo 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.
Estas son 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 sea posible.
- Intenta condensar todo en 1 archivo.
- Quita código (comienza por lo que sabes que es innecesario) hasta que desaparezca el error.
- Usa el control de versión para guardar tu trabajo y deshacer los errores.
Cómo alojar un caso de prueba reducido
Si buscas un buen lugar 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.
Informa 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.
- Navegadores basados en Chromium: https://crbug.com/new
- Firefox: https://bugzilla.mozilla.org/
- Safari y navegadores basados en WebKit: https://bugs.webkit.org/
Agrega descripciones y pasos claros para replicar 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 reducido.
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 en MDN.
Bonificación: Agrega una captura de pantalla o una presentación en pantalla del problema
Aunque no es obligatorio, a menudo es útil agregar una captura de pantalla o una presentación en pantalla del problema. Esto es especialmente útil cuando se producen errores después de varios pasos o una actividad inusual. Las presentaciones en pantalla y las capturas de pantalla suelen demostrar mejor lo que sucedió a los ingenieros de navegadores.
Incluye detalles del entorno
Algunos errores solo se pueden reproducir en ciertos sistemas operativos o en tipos específicos de pantallas (por ejemplo, de baja o alta densidad de píxeles). Asegúrate de incluir los detalles de los entornos de prueba que usaste.
Envía el error
Por último, envía el error. Revisa tu correo electrónico para ver las respuestas sobre el error. Por lo general, durante la investigación, los ingenieros pueden tener preguntas adicionales. Si tienen dificultades para reproducir el problema, pueden comunicarse con ellos.