Catégorie « JavaScript »

Quand on a travaillé un peu sur des sites ou applications utilisant des JavaScript volumineux, on se rend compte assez vite que c'est laborieux. Les erreurs sont mal remontées, on n'a pas de stack trace, etc. Firefox est déjà largement au dessus d'Internet Explorer à ce niveau en fournissant une console d'erreur nettement plus lisible et fonctionnelle mais ça reste insuffisant sur des scripts complexes et fortement découpés en de nombreuses fonctions élémentaires.

Une solution au problème : JavaScript Debugger, une extension pour Firefox qui, comme son nom l'indique, implémente un débuggeur JavaScript.

Comme sur les débuggeurs disponibles pour les autres langages, on peut donc placer des point d'arrêt (breakpoint) permettant une exécution pas à pas du script, avec à chaque étape la possibilité d'inspecter toutes les variables définies et leurs valeurs. Ça ne résout pas tout mais ça aide grandement à comprendre ce qui arrive !

Malheureusement, cette extension est encore loin d'être parfaite : elle est assez lourde et ne se ferme pas toujours vraiment lorsqu'on ferme la fenêtre et même en fermant toutes les fenêtre Firefox, il arrive qu'il reste toujours une instance de Firefox qui traine dans les processus en cours et qu'il faut tuer à la main (sous Windows du moins, je ne l'ai pas testé sur un autre système).

Donc ce n'est pas parfait mais ça a le mérite de combler un gros manque, donc ça mérite le coup d'œil

Sinon, l'extension Firebug est censée fournir une partie de ces fonctionnalités également mais, jusqu'à présent, à chaque fois que j'ai tenté de l'installer elle m'a causé plus de problèmes qu'autre chose (instabilité du navigateur) donc je n'ai pas approfondi...

jQuery est une sympathique bibliothèque Javascript. Elle permet de manipuler la page assez facilement via un système de requêtage des éléments reprenant les sélecteurs CSS. Du coup c'est assez simple et nettement plus court que de travailler avec du DOM.

Par ailleurs elle permet d'ajouter des effets aux différents événements sans écraser ceux qui seraient déjà présents, d'appliquer des effets de masquage/affichage progressif aux éléments, etc
Des extensions proposent différents éléments d'interface évolués comme des zones redimensionnables, un datepicker, des onglets...

Mais surtout l'ensemble est multi-navigateur, ce qui évite d'avoir à se préoccuper trop souvent d'Internet Explorer qui constitue un véritable cauchemar dès qu'on veut faire quelque chose d'un peu évolué.

J'ai fait quelques tests ces derniers jours sur le script de mes forums et c'est plutôt concluant : un code nettement plus court et vachement plus propre !

Bref, une bibliothèque qui vaut qu'on lui consacre un peu de temps.

Pour le débugage JavaScript, Firefox dispose de base d'une console d'erreurs JavaScript. Cette console est accessible via le menu « outils » sous le nom « console d'erreur » et liste trois types d'informations :

1. les erreurs : il s'agit des erreurs que Firefox ne parvient pas à traiter et qui entrainent un arrêt pur et simple de l'exécution du script. Ces erreurs doivent être corrigées impérativement pour que le script s'exécute jusqu'au bout.
2. les avertissements (warnings) : ceux-ci ne sont pas bloquants. Ils relèvent juste une erreur minime ou un non-respect de la norme javascript (variable non déclarées, fonctions ne retournant pas toujours de valeur, etc.). Il n'est pas absolument nécessaire de les corriger mais il vaut mieux les corriger et ce pour deux raisons : d'une c'est par principe toujours mieux de coder proprement et de deux ils peuvent être cause de bugs puisque le script ne se comportera pas forcément de la façon dont vous l'imaginiez.
3. les messages : il s'agit de simples messages qui peuvent être envoyés depuis du code javascript dans certains cas. Il ne s'agit pas d'erreurs, juste d'informations diverses en général utilisées lors du débugage d'extensions.

La plupart des messages d'erreur ou d'avertissement sont accompagnés d'un numéro de ligne, d'un nom de fichier et d'un lien direct pour visualiser la ligne posant problème.

De base cette console est déjà très efficace (comparée à son homologue sous IE, c'est déjà le jour et la nuit). Cependant il existe également des extensions qui peuvent permettre d'aller plus loin :

• 
  Console² :
  Cette extension permet de filtrer plus précisément les messages affichés par la console. Elle permet également le passer le contrôle en mode « strict » ce qui augmente le nombre d'avertissements en cas de non-respect des normes. Elle permet également d'afficher certaines erreurs dans les fichiers CSS et XML évalués par le navigateur.
• 
  Firebug :
  Celle-ci permet de faire pas mal de chose en ce qui concerne le débugage aussi bien JavaScript que CSS et HTML. Elle semble notamment permettre une exécution pas à pas du JavaScript. Je ne l'ai pas testée très en détails, peu convaincu au premier abord... Cependant elle semble avoir bonne réputation, il doit donc y avoir de bonnes choses à en tirer.

Et IE dans tout ça ? Ben là, c'est pas la joie... Outre le fait que son moteur JavaScript n'a quasiment pas bougé depuis IE6, ce qui implique un retard énorme, sa fenêtre d'erreur est des plus minimalistes. Elle se limite en effet à un message d'erreur rarement clair et pas toujours approprié, un numéro de ligne approximatif et aucun nom de fichier (cela ne pose pas de problème pour un script simple sur un seul fichier mais pour quelque chose de plus complexe répartit en plusieurs fichiers, c'est déjà beaucoup plus gênant)... Une fois de plus le navigateur de Microsoft est largement à la traine.