fbpx

10 add-ons Firefox pour les développeurs

Par

le

Débogage, optimisation, … tout ceci fait partie du processus développement web. Pour être plus efficace, vous pouvez utiliser ces add-ons pour Firefox.

1. Firebug

L’un des plus populaires et plus puissants add-ons pour Firefox, considéré par beaucoup comme le nec plus ultra des outils de développement. Firebug offre une multitude d’outils de développement faciles à utiliser. Vous pouvez modifier, déboguer et contrôler du CSS, HTML et JavaScript en direct sur n’importe quelle page web.

Il est extrêmement puissant et peut vous aider à trouver rapidement les erreurs, surveiller l’activité du réseau, et même afficher et gérer les cookies. L’onglet Mise en page comporte également des règles et des guides, particulièrement utiles lorsque vous travaillez avec du code CSS, où la précision est primordiale.

firebug

 

2. Web Developer

Web Developer ajoute une gamme d’outils et des menus personnalisés. L’utiliser en parallèle avec Firebug vous offre un maximum de fonctionnalités et de contrôle sur le code, pour analyser, valider et optimiser les pages Web. Une caractéristique principale de la barre d’outils Web Developer est la possibilité de modifier le code CSS à la volée, ce qui vous permet de tester différentes polices de caractères, d’inspecter et de modifier l’arrière-plan, les bordures, le remplissage, les marges et bien plus, puis, voir ces modifications instantanément.

Les outils sont bien organisés, comme le « CSS » ou « Images », avec des options pour afficher une règle et des chemins d’image et redimensionner la fenêtre en cours pour tester des résolutions différentes. Utilisez-le pour vérifier la conformité aux standards du Web (W3C).

web-dev

3. FireFTP
FireFTP est un client FTP basé sur le navigateur qui offre un accès facile et intuitif à votre serveur via Firefox, et possède toutes les caractéristiques que vous attendez de la plupart des applications FTP classiques (comme Filezilla). Il peut gérer plusieurs comptes, propose le transfert de fichiers sécurisé et dispose d’une interface bien propre. Il est multi-plateforme et permet également l’importation/exportation de réglages pour les utilisateurs.

Une fois installé, il est facile à prendre en main. Entrez vos données d’accès FTP, glissez-déposez à partir de votre ordinateur vers le serveur ou faites un clic droit sur ​​un fichier hébergé et éditez-le dans Firefox, puis mettez à jour le fichier directement sur le serveur.

fireFTP

4. YSlow
YSlow (de Yahoo) s’intègre à Firebug pour analyser les pages web afin d’accroître leurs performances. L’extension dispose d’outils (tels que Smush.it ou JSLint) pour améliorer les performances de la page. Comme avec Google, la vitesse de de chargement des pages est un facteur primordial, il est donc essentiel d’optimiser votre site pour assurer une réponse rapide ainsi que des temps de chargement cours.

YSlow fonctionne avec le DOM pour trouver tous les composants, récupérer des informations sur chaque composant en compilant ensuite les données recueillies pour générer une classe pour chaque règle, qui produit une note globale (vous donnant alors une estimation de la vitesse de votre site).

Yslow

5. Greasemonkey
Greasemonkey est un add-on qui vous permet d’ajouter du JavaScript à une page Web, vous permettant de faire des changements rapides au contenu d’une page Web. vous pouvez alors lancer des scripts sur un site, puis par la suite chaque fois que vous visiterez la page, Greasemonkey appliquera le script que vous aurez choisi, ce qui rend le changement de manière permanente. Vous pouvez éditer vos sites Web favoris en fonction de vos propres exigences particulières et esthétiques.

Tout comme le CSS vous permet de prendre le contrôle du style d’une page Web, vos scripts sur Greasemonkey vous permettent de contrôler l’apparence d’un site. Si vous ne voulez pas créer votre propre script, le site UserScripts.org  est là pour vous(ressource dédiée proposant des milliers de scripts).greasemonkey

 

6. JSONView
Habituellement lorsque vous tombez sur un fichier JSON (type « application/json »), votre navigateur vous invite simplement à le télécharger. Avec JSONView, les fichiers JSON sont affichés dans votre navigateur de la même manière que les fichiers XML. Le document est formaté, avec une coloration syntaxique, les arrays et objects peuvent être repliés/déployés. Même si le document JSON contient des erreurs, l’extension vous le montrera tout de même en texte brut.
jsonview

7. RESTClient
Testez et déboguez des services Web peut être une tâche ingrate et requiert souvent l’aide d’un IDE (environnement de développement intégré). Cependant, RESTClient propose une manière simple d’effectuer cette manipulation. Il suffit de fournir l’url voulue, les paramètres, la méthode (GET, POST, ….). Vous pouvez aussi vous authentifier ou utiliser des certificats SSL. Ensuite, lancez le service et vous aurez accès à un certain nombre d’informations sur le résultat obtenu : le header, le body avec coloration syntaxique et indentation (XML, JSON). Vous pouvez également implémenter aisément différents tests sur les résultats obtenus (en JAVA, directement sur l’application).

restclient

 

8. Empty cache
En tant que développeur web, il est important de vider votre cache. Avec Emptycache, vous pouvez effacer rapidement le cache de votre navigateur et recharger la page d’un simple clic, sans interrompre votre session de navigation. Un seul bouton est disponible pour effacer quatre types de cache (mémoire, disque, hors ligne et en Favicon).

Alors que l’option pour effacer le cache se trouve dans la barre d’outils développeur ou vers le bas à plusieurs niveaux dans les menus, avoir un bouton placé sur votre barre d’outils principale est une option rapide et élégante, et surtout plus fiable que faire un rechargement forcé.

empty-cache

9. JS Deminifier
Si vous avez vu la source de n’importe quel site Web au cours des dernières années, vous avez probablement vu du JavaScript réduit (minimisé, minified ), où tous les caractères et espaces inutiles ont été supprimés. Il réduit la taille des fichiers JavaScript et permet d’améliorer les performances d’un site Web ( comme le chargement de la page), cependant, il rend la lecture et le débogage JavaScript difficile. JSDeminifier s’intègre dans Firebug et utilise l’algorithme de JSBeautifier.org pour embellir et  formater le JavaScript. L’extension peut être activée/désactivée par un onglet en cliquant sur JSB ON/JSB OFF dans la barre d’état, mais cela ne s’appliquera pas au JavaScript déjà chargé.

JS Deminifier est désactivé par défaut, et c’est un outils très util pour éditer et déboguer des JavaScript réduits(minimisés) mal écris.

JS Deminifier

10. FireShot
Ceci est un add-on extrêmement utile qui permet de capturer non seulement la partie visible d’une page, mais aussi toute la page, peu importe la dimension. Vous pouvez ajouter des graphiques et des notes directement sur la capture d’écran et enregistrez le fichier comme un fichier BMP, JPG, GIF ou PNG. Vous pouvez également exporter les captures d’écran (via presse-papiers),les uploader sur les réseaux sociaux, e-mail ou les enregistrer sur le serveur d’hébergement gratuit FireShot. C’est incroyablement simple d’ajouter des annotations ou  recadrer, mettre en évidence, effacer sur la capture effectuée.

Une fois faite, la capture d’écran est affiché sur une fenêtre distincte dans FireShot, où vous pouvez faire de l’édition de base. La barre d’outils d’édition apparaît en fenêtre flottante, que vous pouvez utiliser pour faire des ajustements. La version PRO ajoute des fonctionnalités supplémentaires.

fireshot

Articles recommandés