Firefox Developer Edition est une nouvelle version du populaire navigateur de Mozilla, orientée aux développeurs web.

Ces dernières années, les navigateurs les plus populaires, ont incorporé différents outils permettant de visualiser et d’éditer le code source des sites web. Ces outils sont très utiles pour les développeurs web, puisqu’ils permettent d’identifier les erreurs, de même qu’éditer le site web en ligne pour visualiser à l’instant et en temps réel, le résultat des modifications apportées.

Firefox Developer Edition est un navigateur web classique, c’est-à-dire que nous pourrons naviguer normalement sur Internet, mais avec la particularité d’offrir de nombreux outils pour faciliter la tâche des développeurs web. Nous trouverons, en outre, les outils suivants :

• Valence : cet outil permet de déboguer des navigateurs sur différents dispositifs. Nous pourrons, par exemple, déboguer un site d’un Safari basé sur iOS, ou un Chrome basé sur Android. Ceci permet de connecter le dispositif portable à l’ordinateur pour effectuer les modifications du code à travers Firefox. Ces changements se reflèteront dans les dispositifs mobiles qui y sont connectés. Cet outil est encore à l’essai, il est donc conseillé de ne pas l’utiliser régulièrement pour travailler.

• Vue responsive du design : grâce à cette fonction, il ne sera pas nécessaire d’installer de plugin pour avoir un aperçu du site sous différentes résolutions. De telle sorte que nous pourrons tester si le design responsive s’adapte parfaitement au plus grand nombre de résolutions possibles.

• Inspecteur de page : ce tableau affiche l’information concernant les éléments qui composent le site web. Nous pourrons visualiser et modifier le code HTML et CSS en temps réel. Par exemple, si nous sélectionnons une classe CSS, nous visualiserons sur le site, le marquage de tous les éléments qui utilisent cette classe CSS. Il en va de même pour les éléments HTML, lorsque nous ouvrons la fonction « Inspecteur de page » et nous plaçons le curseur sur un élément HTML, nous le verrons marqué sur le design du site.

• Console Web : ce tableau affiche les messages des erreurs et avertissements existants sur le site web que nous sommes en train de visiter, en les classant par catégories, de telle sorte que nous pourrons visualiser les erreurs dans les CSS, Javascript, Red, etc. Nous pourrons également interagir avec les éléments du site en utilisant les commandes Javascript sur la console. Nous pourrons appeler la méthode d’un objet, ou encore utiliser jQuery pour lister une série d’éléments. Tout ce que nous saurons faire sur Javascript, nous pourrons l’appliquer directement depuis la « Console Web ».

• Moniteur Réseau : cette fonction permet de visualiser toutes les requêtes faites par un site web, de même qu’explorer ses en-têtes. Cette fonction est forte utile pour savoir exactement combien d’éléments externes chargent un site web, dans le but de savoir s’il y a lieu ou non d’en réduire son nombre. Il est possible de filtrer les requêtes par type : HTML, CSS, JS, Image, Sources, Multimédia et bien d’autres.

Ce ne sont que quelques unes des caractéristiques offertes dans la nouvelle version du navigateur Firefox. Beaucoup de développeurs web seront heureux de découvrir cette version et ne tarderont pas à faire de Firefox Developer Edition leur navigateur par défaut.