Les fureteurs récents offrent des environnements de travail complets qui incluent une multitude d’outils pour les développeurs Web. Google Chrome est définitivement à l’avant plan dans ce domaine parce qu’il est assez rapide et offre beaucoup de fonctionnalités. Près de 75% des employés d’entreprises utilisent Google Chrome selon une enquête par des professionnels du Web, et ces utilisateurs ont ajouté des extensions. Nous avons répertorié les extensions les plus performantes pour les développeurs Web.
Dans cet article vous trouverez une liste des extensions les plus populaires et utiles pour les développeurs web (cela n’exclut pas le fait que toute extension peut être utilisée par n’importe quelle catégorie de professionnels).
IE Tab
Internet Explorer est très impopulaire auprès des développeurs car c’est la source d’interminables problèmes. Malgré cela, beaucoup d’internautes ignorent ce fait et préfèrent ce navigateur. Pour le moment, IE est toujours parmi les leaders même si la chute est continue.
L’extension IE Tab exécute Internet Explorer directement dans l’interface utilisateur Google Chrome, permettant ainsi au développeur de parcourir rapidement son site web et trouver les lacunes de la mise en page. En outre, parfois il y a la situation inverse lorsque le site est correctement affiché sur Internet Explorer, mais il a quelques problèmes sur Mozilla Firefox ou Google Chrome (il se réfère principalement aux anciens sites). Pour ces sites, IE Tab fournit un mode de téléchargement automatique de votre site immédiatement sur Internet Explorer, évitant le téléchargement sur Chrome.
Web Developer
L’extension Web Developper est spécialement recommandée par notre équipe de développeurs, elle permet de faire une multitudes de modifications de code directement sur le navigateur sans être obligé de modifier réellement le code source de votre site. Exemples: Ajouter un css temporaire, des scripts js réutilisables, afficher les boundaries des divs et plein d’autre utilités, nous l’utilisons pour remplir les formulaire en un clic pour les tester… il contient une centaine de fonctionnalités, les plus intéressantes sont :
- Désactiver / activer le css navigateur (utile pour voir si un mauvais affichage est causé par le navigateur ou pas)
- Désactiver / activer l’inline css
- Voir et tracker les cookies
- Changer les valeurs des cookies
- Désactiver le javascript ou quelques fonctions du js comme les alters et les popup
- Redimensionner les images
- Voir les liens des images
- Trouver les brisés des images
- Reset des champs d’un formulaire
- Remplir les champs d’un formulaire
- Afficher les hidden inputs
- Redimensionnement de la page pour la voir en responsive
Eye Dropper
Eye Dropper est une extension qui permet de trouver la couleur de n’importe quel élément sur une page. En cliquant avec une « pipette » sur un élément, vous recevez des informations sur la couleur RGB et le code HTML.
En fait, cette extension est l’analogue de «Eye Dropper Tool» dans Adobe Photoshop . EyeDropper vous permet de vérifier un fichier CSS pour une couleur particulière, aussi, il y a une autre caractéristique pratique: vous pouvez ouvrir la mise en page graphique du site web dans l’onglet suivant et composer rapidement un CSS en utilisant Eye Dropper.
Window Resizer
Avec cette extension Windows Resizer, vous pouvez tester l’affichage d’un site web sur des écrans avec des résolutions différentes. L’émulation est effectuée en sélectionnant l’une des résolutions prédéfinies. Window Resizer vous permet de choisir n’importe laquelle des résolutions les plus courantes, ordinateurs de bureau, portables, tablettes ou smartphones.
RDS Bar
Après l’avoir installé, RDS Bar vous permet d’obtenir une barre d’outils supplémentaire qui permet d’effectuer une analyse rapide des indicateurs de base d’un site en point de vue référencement naturel: Pages indexées dans les principaux moteurs de recherche, PR, etc.
Firebug Lite
Firebug Lite est un excellent outil pour les développeurs web, qui est intégré dans le navigateur et fournit des fonctionnalités avancées pour l’édition et le débogage du code de toute page Web. Par défaut, Firebug est désactivé et affiché en gris, mais une fois que vous l’activez, vous voyez le morceau de code qui correspond à l’élément du site web sur lequel vous avez cliqué. Vous pouvez le modifier et afficher les modifications en temps réel.
BuiltWith Technology Profiler
L’extension BuiltWith analyse tout site web que vous visitez et détecte les technologies web utilisées, même les services intégrés tels que le compteur FeedBurner ou le widget Twitter. Si le site est sur WordPress, l’extension peut même afficher les noms des principaux plug-ins utilisés. un outil très précieux.
CSSViewer
Cette extension CSSViewer, comme l’indique son nom, est conçue pour afficher les propriétés CSS affectées à un élément particulier sur une page. Pour l’utiliser, il suffit de l’activer en cliquant simplement sur l’icône, puis de placer le curseur sur n’importe quel élément de la page que vous souhaitez vérifier.
HoverZoom+
Cette extension est très utile pour ceux qui veulent afficher des images mises à l’échelle sans passer à une page séparée: Avec HoverZoom+ placez simplement votre souris sur l’image et ainsi vous pouvez l’agrandir en taille réelle (elle correspondra à la fenêtre du navigateur).
MeasureIt
Ce plug-in MeasureIt vous permet de mesurer la distance et la taille (en pixels) de n’importe quel élément d’une page web. (Certains utilisateurs ont signalé que vous devez redémarrer le navigateur pour que l’extension fonctionne)
Ripple
Ripple est un outil qui affiche votre applications web sur une variété d’appareils mobiles, de l’iPhone à BlackBerry. Bien que Ripple ait été initialement créé pour le débogage d’applications web basées sur la technologie PhoneGap, maintenant il est largement utilisé pour imiter les écrans des appareils mobiles.
Advanced REST client
Advanced REST client c’est une extension très utile pour le remplissage des requêtes POST, PUT, GET, DELETE, des requêtes aux services RestFul, des réponses du serveur et bien plus encore. Vous pouvez enregistrer les demandes sur Google Drive et les renvoyer au besoin.
Minimap
Certaines pages web sont si grandes (par exemple, des pages de défilement long) que vous avez besoin de faire défiler une dizaine de fois pour arriver à la fin. Minimap permet d’afficher des pages telles que des vignettes; C’est-à-dire que vous voyez une page web convenablement mise à l’échelle et vous pouvez ainsi rapidement évaluer où vous êtes et vous déplacer au bon endroit.
The Great Suspender
L’un des principaux problèmes de Google Chrome est son utilisation excessive des ressources système. The Great Suspender aide à résoudre ce problème: après une certaine période de temps, il désactive tous les onglets inutilisés, ce qui permet d’économiser la RAM et la charge de la batterie. Vous pourrez aussi définir une liste blanche des sites à ne pas suspendre, ce qui vous permettra de ne pas recharger les pages donc vous avez besoin même après quelques heures d’inactivité.
ARC Welder
ARC Welder est une extension qui permet de lancer vos applications Android préférées sur Google Chrome. Si vous n’avez pas trouvé une alternative convenable de vos applications mobiles Android préférées sur ordinateur de bureau, n’hésitez pas à utiliser ARC Welder, une excellente solution à ce problème.
Highly
C’est l’une des extensions les plus efficaces pour ceux qui sont habitués à travailler avec du texte tout au long de la journée. Dans la vie ordinaire, nous sommes habitués à mettre en évidence les extraits les plus importants avec un marqueur jaune. Sur Internet, Highly est une excellente alternative. Créez simplement un bref résumé du texte et enregistrez-le ou partagez-le avec vos amis ou vos collègues !
Taco
Taco est un gestionnaire de tâches qui combine vos tâches à partir des services tels que Highrise, Google Gmail, Google Tasks, GitHub Issues, Exchange, Evernote, Bugzilla, Codebase, Bitbucket, Asana, Basecamp et autres dans une seule interface. Cela fonctionne très bien et le plus important est qu’il est très beau et convivial.
Marker
L’extension Marker, recommandée par l’un de nos fidèles lecteurs, permet de faire des captures d’écran, de les annoter et de les partager avec son équipe de développeurs pour faciliter la communication et le reporting des bugs. Une extension particulièrement intéressante pour faire un bon contrôle qualité sur les vos projets.
Conclusion
Comme vous pouvez le voir, les extensions énumérées ci-dessus vont simplifier considérablement la routine du développeur web et surtout de gagner du temps. Le plus important est que toutes ces fonctionnalités seront intégrées directement dans le navigateur et par conséquent, vous n’avez pas besoin d’installer de logiciels supplémentaires. De plus ces extensions pourront vous suivre sur n’importe quel ordinateur où vous-vous identifierez.