Bloc-notes de Darathor

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…

Quelques extensions qui peuvent s’avérer bien pratiques…

Split browser

Reurrect pages

Tab scope

Open Search est une série de format destinés à partager des recherches. En particulier, et c’est le point dont je vais parler ici, c’est via ce format que sont définis les moteurs de recherche gérés par la barre de recherche de Firefox 2 (et également celle d’IE 7 apparemment).

On peut donc assez facilement ajouter un moteur de recherche à la liste via un simple fichier XML, du moment qu’on a l’URL et les paramètres à passer à la page de recherche.

Format du fichier xml

• {NOM} : nom du moteur de recherche. C’est ce nom qui sera affiché dans la liste de sélection du navigateur, veillez donc à ce qu’ils reste aussi concis que possible.
• {DESCRIPTION} : description du moteur.
• {ENCODAGE} : encodage du moteur et de votre fichier XML.
• {ICÔNE} : icône de 16×16 piels associée à votre moteur. Cette icône doit être encodée en base 64, par exemple via ce formulaire.
• {MÉTHODE} : méthode de passage de paramètre : POST ou GET.
• {URL_RÉSULTAT} : URL où soumettre la recherche.

D’autres paramètres optionnels existent, je n’ai détaillé là que les parties nécessaires.

Et ensuite ?

Une fois le fichier réalisé, il peut être être ajouté dans votre répertoire de Firefox, dans le dossier searchplugins (nécessite de redémarrer Firefox).

Il est également possible s’il s’agit du moteur de recherche de votre site, de faire en sorte que Firefox le détecte automatiquement (de la même manière que pour un flux RSS) en ajoutant la balise title appropriée dans la section head de la page :

Ressources complémentaires

• Page dédié sur le Mozilla dev center
• Explications sur la base 64 (utilisée pour l’encodage de l’icône).

Une feuille de style, qu’est-ce que c’est ?

Pour ceux qui ne s’y connaitraient pas trop en développement web, la feuille de style est un fichier qui permet de définir l’apparence d’une page web. Idéalement, lorsqu’on développe un site, la sémantique du contenu est indiquée par le code HTML qui le met en page (par exemple telle ligne est un titre, telle autre est une définition, etc) et on le décore ensuite via une feuille de style. Le langage utilisé pour écrire ces feuilles de style est CSS.

Des feuilles de style personnalisées ?

C’est là que Firefox intervient ! En effet, ce génial navigateur a une fonctionnalité qui bien que peu connue du grand public ouvre d’énormes possibilités : il permet à l’utilisateur averti de définir des feuilles de styles personnelles appliquées soit à tous les sites qu’il affiche, soit à un site, groupe de sites ou même une page en particulier (plus d’explications ici).

De base c’est masqué et pas facile d’accès mais l’extension Stylish permet de les définir très facilement. On peut ainsi modifier soi-même l’affichage des sites que l’on visite (bien entendu, cette modification ne vaut que pour votre navigateur à vous et n’est visible par personne d’autre).

On peut par exemple réorganiser les éléments en occupant l’espace inutilisé par un design prévu pour une résolution plus base, remplacer certaines couleurs insupportables, supprimer certains blocs d’affichage, etc.

Comment ajouter une feuille de style ?

1. Installez Stylish et relancez Firefox.
2. Lancez l’outil de gestion des feuilles de style :
   
3. Cliquez sur le bouton “Écrire” :
   
4. Indiquez d’abord un titre (1) qui vous servira uniquement à reconnaitre cette feuille quand vous en aurez ajouté plein d’autres. Puis copiez/collez le code CSS que vous voulez appliquer dans le cadre texte (2) et enfin cliquez sur “Enregistrer” (3).
   
5. C’est prêt. Il peut cependant s’avérer necessaire de rafraichir la page pour que les modifications apparaissent.

Tout ça c’est bien mais moi j’utilise IE…

Alors ça c’est ballot ! Parce que ça m’étonnerait fortement qu’IE gère un truc pareil, mais bon, on ne peut pas en même temps utiliser un navigateur totalement dépassé, ou plus généralement un produit Microsoft, et espérer qu’il soit à la pointe de l’innovation…

Et je n’en ai pas entendu parler pour les autres navigateurs tels qu’opera ou safari… Cela dit, rien ne vous empêche de chercher et de faire part de vos découvertes.

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és 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.