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 facilitar al máximo que los ingenieros de navegadores encuentren lo que está dañado, lleguen a la causa raíz y, lo más importante, encuentren una forma de solucionarlo. Los errores que progresan rápido suelen reproducirse con rapidez y tienen un comportamiento esperado claro.
Verifica que se trate de un error
El primer paso es determinar 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 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 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 versiones anteriores del navegador. Usa herramientas como la herramienta bisect-builds (para Chromium) para buscar el cambio.
Si un problema es una regresión y se puede reproducir, la causa raíz suele poder identificarse y corregirse con rapidez.
¿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 ver 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 informarlo al proveedor del navegador.
Crea un caso de prueba reducido
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. Un ejemplo de código mínimo 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 hacer que las funciones o los errores se comporten de manera diferente.
Informa sobre el problema
Una vez que tengas tu caso de prueba reducido, estará todo 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, con 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 tiene dificultades para reproducir el problema, es posible que se comunique contigo.