Desarrollador web: 10 herramientas útiles

El artículo, cuya traducción publicamos hoy, está dedicado a 10 herramientas útiles que están dirigidas a desarrolladores web. El autor del material cree que se trata precisamente de herramientas que permiten, como dicen, “trabajar de forma inteligente, y no hasta el anochecer”.







1. Escáner de vulnerabilidad de sitios web



Website Vulnerability Scanner es un escáner de vulnerabilidades de sitios web desarrollado por Pentest-Tools.com. Esta herramienta debe tener un enlace a un sitio que debe revisarse para detectar vulnerabilidades, después de lo cual se generará un informe.





Resultados del Análisis de vulnerabilidades de sitios web



2. Nibbler



Nibbler es una herramienta para el análisis integral de proyectos web. El informe que genera incluye evaluaciones de la accesibilidad del contenido del sitio, evaluaciones de cuán positiva puede ser la experiencia del usuario al trabajar con él. Nibbler analiza los sitios para la optimización de motores de búsqueda y qué tan bien están diseñados y construidos.





Nibbler otorga altas calificaciones a dev.to



3. Metaetiquetas



Meta Tags es una sencilla herramienta en línea que se puede utilizar para comprobar rápidamente las metaetiquetas de sitios web.





Validación de metaetiquetas con metaetiquetas



4. Faro de Google



Google Lighthouse es un sistema automatizado de código abierto para evaluar la calidad de proyectos web.



Muestra calificaciones relacionadas con varios aspectos del diseño y funcionamiento de los sitios. En particular, se puede utilizar para evaluar el rendimiento, accesibilidad, optimización de motores de búsqueda del sitio, recibiendo, además de los resultados finales, informes detallados y recomendaciones para mejorar el sitio.





Análisis del sitio en Google Lighthouse



5. Prueba final



Endtest (te diré de inmediato que trabajo allí) es una plataforma de automatización de pruebas inteligente que te permite crear pruebas complejas y ejecutarlas en los principales navegadores. 



Automaticé la prueba de inicio de sesión para el sitio de la comunidad DEV y ejecuté esta prueba en la nube, Chrome, Firefox, Edge, Safari e Internet Explorer 11.



Resultó que este sitio, a pesar de usar muchos "mejores Practitioner ”no funciona particularmente bien en Internet Explorer 11. Así es como se ven los resultados de la prueba.





Resultados de la prueba en Chrome





Resultados de la prueba en Internet Explorer 11



6. Telar



Loom es una extensión gratuita de Chrome que le permite tomar videos mientras captura su pantalla y cámara web al mismo tiempo.



Estas grabaciones pueden considerarse una alternativa a las videollamadas, cuando los interlocutores pueden grabar comentarios sobre un determinado proyecto en un momento conveniente para ellos y enviárselos entre sí.





Extensión Loom Chrome



7. Pexels



Pexels es un sitio donde puedes encontrar fotos y videos gratis para tus proyectos. Este es uno de los pocos sitios donde ni siquiera necesita registrarse para descargar materiales.



Este sitio siempre me ayuda en situaciones en las que necesito hacer un prototipo y el departamento de marketing aún no ha enviado materiales oficiales.





Sitio web de Pexels



8. Figma



Figma es una herramienta de creación de prototipos de sitios web muy adecuada para el trabajo en equipo en proyectos. Figma no solo admite herramientas de creación de prototipos, sino que también permite que los equipos de desarrollo y otros profesionales discutan proyectos y sus detalles individuales.





Figma



9. Funkify



Funkify es una extensión de Chrome que permite a un desarrollador mirar la web desde la perspectiva de las personas con discapacidades. Esto ayuda a desarrollar sitios que serán convenientes para todas las categorías de usuarios.





Funkify



10. PerfectPixel



PerfectPixel es una extensión de Chrome que le permite colocar una imagen semitransparente en la parte superior de una página HTML que representa un diseño de página preparado por un diseñador. Esto ayuda a hacer una comparación píxel por píxel de lo que se crea con lo que debería ser.





Compare la página y el diseño con PerfectPixel



¿Qué herramientas para desarrolladores web agregaría a esta lista?






All Articles