Webinventif

Alors qui ayant déjà touché un peu au javascript ne c'est pas retrouvé devant un code récalcitrant ?

"Moi moi moi !"

Bon ok, essayez de rester calme, je vais vous fournir une solution pour rendre plus aisé votre déboguage de javascript.
La solution est firebug !

Firebug est une extensions pour FireFox, mais que les utilisateurs d'internet explorer et autres opera se rassure, il y a aussi une solution pour vous ...

Pour FireFox

Rendez-vous sur la page de firebug et cliquez sur "Install firebug". Une fois installé vous y accédez en appuyant sur F12.

L'extension firebug permet de:

• Inspecter et éditer le code HTML en ligne
• Inspecter et éditer le CSS
• Visualiser les mesures css dans votre page
• Surveiller le téléchargement des éléments de la page
• Déboguer le javascript
• Explorateur DOM
• Exécuter du javascript à la volée

Je ne vais pas m'étendre sur l'extension FireFox qui est bien trop ciblée, et vous dévoiler l'autre solution moins puissante mais universelle !

Pour les autres

Les développeurs de firebug, dans leur grande générosité, ont développés un débogueur multi-plateforme nommé Firebug Lite !

Son installation est on ne peut plus simple, il vous suffit de vous rendre sur la page de firebug lite et de télécharger le .zip.
Ensuite vous le décompressez et le placez dans le même dossier que vos pages à déboguer. Pour le rendre actif, il faut inclure le fichier firebug.js

De la même façon que pour l'extension FireFox, il faut ouvrir le panneau en cliquant sur F12

Utilisation

Il suffit donc d'appuyer sur F12 pour voir la console apparaitre en bas de votre page.
Les erreurs y apparaitront si il y en a.

Un aspect intéressant c'est la possibilité d'afficher des traces de votre code dans la console, de la même manière que le ferait l'IDE de flash avec la fonction "trace".
Pour afficher quelque chose dans la fenêtre de firebug, il suffit d'utiliser console.log(). A noter que la fenêtre affiche automatiquement les retour de fonction (return).

L'autre fonction intéressante c'est de pouvoir exécuter du code javascript à la volée !
En effet tout an bas de la fenêtre firebug se trouve une console permettant de taper et d'exécuter du code !

Exemples

Afficher cette page.
Appuyez sur F12.
Maintenant cliquez sur les 2 liens et regardez

• le lien 1 déclenche une alerte et envoi une trace dans la console.
• le lien 2 provoque une erreur car il invoque une fonction qui n'existe pas
• tapez "test2()" dans la console, celà va déclencher la fonction du même nom et faire apparaitre du texte dans la page
• tapez "test3()", celà va renvoyer la valeur de return de cette même fonction dans la console
• tapez "texte1", celà va afficher la valeur de la variable texte1
• etc ...

Les possibilités sont relativement intéressantes, et le gain de temps peut se révéler important !

Voilà, j'espère que celà vous fera économiser pas mal d'aspirines 😉