Demo
Mozilla viene implementando grandes mejoras en su Navegador Mozilla Firefox, estas mejoras están dándose para los usuarios finales (Usuarios del Navegador Mozilla Firefox) y también para los Desarrolladores Web, en este artículo voy a compartirte sobre WebHint, que es una herramienta para Desarrolladores Web y Firefox ha lanzado en su Navegador, vamos con este Artículo.
Hasta la fecha de este artículo, la versión actual del Navegador Mozilla Firefox es la versión 69.0.2 , Esta versión es muy rápida a diferencia de versiones anteriores, creo que vale la pena probar nuevamente este Navegador.
Además se preocupa por las mejores prácticas que los Desarrolladores deben de llevar acabo durante la creación de un Proyecto Web, entre otras mejoras.
Que es WebHint ?
Es una herramientas que ayuda a los Desarrolladores Front a inspeccionar un Sitio Web, esta herramienta busca errores que impiden llevar a cabo una correcta accesibilidad de los usuarios al Sitio Web, ademas permite crear una mejor compatibilidad entre Navegadores y otros detalles. Mediante WebHint obtenemos recomendaciones de Buenas Prácticas y Errores comunes en un proyecto Web.
Hasta la fecha de este artículo WebHint cuenta en su página oficial con versiones para los Navegadores:
- Google Chrome
- Microsoft Edge (Chromiun)
- Mozilla Firefox
Las puedes instalar mediante una extensión para cada Navegador correspondiente, quizás en un futuro dejen de existir algunas de estas extensiones, esto no depende de Nosotros si no de WebHint.
WebHint en Línea
Esta herramienta también cuenta con una versión en Línea llamada Scanner que te permite analizar cualquier Sitio Web con tan solo ingresar la url, el sistema empezará a analizar el sitio web que hayas ingresado, tras hacer el análisis, WebHint te muestra una serie de recomendaciones que debes considerar corregir para que el Sitio Web tenga una buena performance.
En su versión de Linea y hasta la fecha de este artículo en la parte derecha del reporte WebHint ofrece datos sobre Accesibilidad, Compatibilidad, PWA (Progressive Web App), Performance , Seguridad y Pitfalls del Sitio Web y probablemente agreguen nuevos tipos de reportes en el futuro.
WebHint hace uso de librerías adicionales para llevar acabo ciertas tareas, tales como Axe, Snyk entre otras.
Si quieres saber más sobre WebHint puedes visitar su Página Web en el siguiente enlace.
WebHint y Mozilla Firefox
Con el Navegador Mozilla Firefox podemos hacer uso de WebHint mediante la instalación de una extensión, para instalar la extensión de WebHint voy al menú de Mozilla Firefox y luego a Desarrollador Web > Obtener más herramientas
Luego añado la extensión a Mozilla Firefox haciendo clic en el botón + Agregar a Firefox
Con esto ya tengo instalado WebHint en Mozilla Firefox, para poder usar esta herramienta solo presionamos la tecla F12 (Windows) para acceder a las Firefox DevTools o también se puede abrir seleccionando una de las herramientas del menú Desarrollador Web
Después que se instalo WebHints aparecerá una nueva pestaña llamada Hints
Para hace un análisis del Sitio Web que tengo abierto en el Navegador Mozilla Firefox, presiono el botón Star scan
Mozilla Firefox me muestra un reporte con recomendaciones de tareas que debo realizar para que el Sitio Web tenga un buen rendimiento
Obviamente cada Sitio Web me arrojará un reporte diferente.
Buenas Prácticas con WebHint en Mozilla Firefox
La mejor forma en que puedas ver esta herramienta en funcionamiento es mediante un Video, el cual puedes ver a continuación
También he colocado un video al inicio de este Artículo en donde realizo algunas correcciones en un Sitio Web con esta herramienta.
Nota(s)
- Los enlaces y pasos compartidos en este Artículo pueden ser modificados o Eliminados en un futuro, esto no depende de nosotros si no de los Desarrolladores que dan soporte a Mozilla Firefox y WebHint.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos