L'extension que tous les développeurs web devraient installer est sans contredit Firebug. J'hésitais à en parler car ça me semblait trop évident que tout le monde l'aie déjà. Si vous ne le connaissez pas encore, c'est certainement la première qu'il vous faut installer. Firebug permet d'explorer le DOM, modifier et déboguer le code HTML, JavaScript et le CSS en temps réel sur vos projets ou sur des pages que vous visitez. C'est tellement pratique que ça devient dur de s'en passer.
Une fois installé, on peut accéder à Firebug en cliquant sur l'insecte qui se trouve en bas à droite dans la barre de statut. Le premier onglet présente une console qui est utilisée pour faire afficher différents messages : erreurs JavaScript, requêtes AJAX, requêtes GET et POST, etc.
Au moment du développement, on peut aussi avoir accès à cette console. Par exemple, pour déboguer du code JavaScript, j'avais souvent tendance à faire afficher une trace des variables ou faire un suivi sur une structure de contrôle en utilisant alert(). Avec Firebug, on peut prendre avantage de la console pour y faire afficher nos messages de trace sans avoir à fermer continuellement des fenêtres popup. Pour ce faire, on peut utiliser l'objet JavaScript "console" de Firebug :
<script type="text/javascript">
console.log("trace 1");
</script>
L'objet console possède aussi une fonction de profilage (console.profile()) qui permet de mesurer la performance de certaines actions.
Une autre fonction utile se trouve sous l'onglet NET (network) qui permet de suivre le temps de chargement et la taille des ressources utilisées sur une page (images, scripts, etc). C'est ainsi qu'on verra que www.google.ca ne charge que 3 ressources en 235 millisecondes tandis que www.yahoo.ca en utilise 22 qui se chargent en 1,29 seconde (le sommaire est indiqué à la dernière ligne).
Il est aussi possible de modifier le code HTML d'une page à partir de Firebug. Et c'est assez simple :
- Rendez-vous sur la page d'accueil de Google
- Ouvrez Firebug et cliquez sur le bouton Inspect
- En survolant les éléments de la page, cliquez sur le bouton "Google Search" (en passant par-dessus, il sera encadré et le click correspondra à sélectionner l'élément à inspecter plutôt qu'à soumettre le formulaire)
- Dans Firebug, sous l'onglet HTML, on remarquera que le code du bouton est surligné en bleu
- En cliquant sur le bouton Edit, le code du bouton sera isolé et on pourra utiliser l'onglet HTML pour modifier le code. Par exemple, modifiez la valeur de l'attribut "title" pour le texte de votre choix
- On pourra voir en temps réel le rendu de la page changer selon nos modifications
Et ce n'est qu'une partie des possibilités offertes par Firebug. Comme cette extension indispensable n'est offerte que sur Firefox, on pourra trouver du support pour Safari, Opera ou Internet Explorer en utilisant Firebug Lite, une version en JavaScript qu'il suffit d'inclure à sa page pour pouvoir bénéficier des fonctionnalités de base.
