Développeur Web: 10 outils utiles

L'article, dont nous publions aujourd'hui la traduction, est consacré à 10 outils utiles destinés aux développeurs web. L'auteur du matériel estime que ce sont justement de tels outils qui permettent, comme on dit, «de travailler intelligemment, et pas avant la tombée de la nuit».







1. Scanner de vulnérabilité de site Web



Website Vulnerability Scanner est un scanner de vulnérabilité de site Web développé par Pentest-Tools.com. Cet outil doit recevoir un lien vers un site qui doit être vérifié pour les vulnérabilités, après quoi un rapport sera généré.





Résultats du scanner de vulnérabilité de site Web



2. Grignoteuse



Nibbler est un outil d'analyse complète des projets Web. Le rapport qu'il génère comprend des évaluations de l'accessibilité du contenu du site, des évaluations de la façon dont l'expérience utilisateur peut être positive en travaillant avec lui. Nibbler analyse les sites pour l'optimisation des moteurs de recherche et la qualité de leur conception et de leur construction.





Nibbler donne des notes élevées à dev.to



3. Balises Meta



Meta Tags est un outil en ligne simple qui peut être utilisé pour vérifier rapidement les balises méta des sites Web.





Validation des balises Meta avec des balises Meta



4. Phare de Google



Google Lighthouse est un système automatisé open source pour évaluer la qualité des projets Web.



Il affiche des notes liées à divers aspects de la conception et du fonctionnement des sites. En particulier, il peut être utilisé pour évaluer les performances, l'accessibilité, l'optimisation des moteurs de recherche du site, recevoir, en plus des résultats finaux, des rapports détaillés et des recommandations pour l'amélioration du site.





Analyse du site dans Google Lighthouse



5. Test final



Endtest (je vais vous dire tout de suite que j'y travaille) est une plateforme d'automatisation de test intelligente qui vous permet de créer des tests complexes et de les exécuter dans tous les principaux navigateurs. 



J'ai automatisé le test de connexion pour le site DEV Community et exécuté ce test dans le cloud, Chrome, Firefox, Edge, Safari et Internet Explorer 11.



Il s'est avéré que ce site, malgré l'utilisation de nombreux Practitioner »ne fonctionne pas particulièrement bien dans Internet Explorer 11. Voici à quoi ressemblent les résultats du test.





Résultats des tests dans Chrome





Résultats des tests dans Internet Explorer 11



6. Loom



Loom est une extension Chrome gratuite qui vous permet de prendre des vidéos tout en capturant votre écran et votre webcam en même temps.



De tels enregistrements peuvent être considérés comme une alternative aux appels vidéo, lorsque les interlocuteurs peuvent rédiger des commentaires sur un certain projet à un moment opportun pour eux et se les transmettre.





Extension Chrome Loom



7. Pexels



Pexels est un site où vous pouvez trouver des photos et des vidéos gratuites pour vos projets. C'est l'un des rares sites où vous n'avez même pas besoin de vous inscrire pour télécharger des documents.



Ce site m'aide toujours dans les situations où j'ai besoin de faire un prototype, et le service marketing n'a pas encore envoyé de documents officiels.





Site Web de Pexels



8. Figma



Figma est un outil de prototypage de site Web bien adapté au travail d'équipe sur des projets. Figma prend non seulement en charge les outils de prototypage, mais permet également aux équipes de développement et à d'autres professionnels de discuter des projets et de leurs détails individuels.





Figma



9. Funkify



Funkify est une extension Chrome qui permet à un développeur de regarder le Web du point de vue des personnes handicapées. Cela aide à développer des sites qui conviendront à toutes les catégories d'utilisateurs.





Funkify



10. PerfectPixel



PerfectPixel est une extension Chrome qui vous permet de placer une image semi-transparente au-dessus d'une page HTML qui représente la mise en page d'un concepteur pour la page. Cela permet de faire une comparaison pixel par pixel de ce qui est créé avec ce qui devrait être.





Comparez la page et la mise en page avec PerfectPixel



Quels outils pour les développeurs Web ajouteriez-vous à cette liste?






All Articles