Pour ma part, j’ai pu mesurer le temps passé à mettre au point une interface pour Internet Explorer 6 : 15 à 25% du temps de développement des interfaces web ! Sans parler de l’énervement au sein des équipes de développement…

Alors, s’il vous plaît, mettez à jour votre navigateur web ! Ce sera bénéfique pour tout le monde : les développeurs pourront concevoir des interfaces plus rapidement, les applications web seront plus stables et vous bénéficierez d’un outil efficace et adapté au web d’aujourd’hui.

Vous avez l’embarras du choix :

Si vous tenez à rester dans le giron de Microsoft, installez dès que possible Internet Explorer 7. Les améliorations sont notables, même si nous sommes encore loin d’un résultat idéal. Il paraît qu’Internet Explorer 8 sera enfin un navigateur digne de ce nom. J’attends de voir… Bref, vous l’aurez compris : ce n’est pas mon préféré.

Firefox 2 est le navigateur web le plus utilisé par les développeurs, grâce à une interface intuitive et une multitude d’extensions. Seule ombre au tableau : sa gourmandise en terme de ressources mémoire. Mais Firefox 3 apportera un sérieux changement de ce côté. Incontournable et recommandé par les professionnels.

Opera, c’est LE navigateur web par excellence. Léger, rapide, complet, il a tout pour plaire, en particulier son support quasi parfait des normes du W3C. S’il reste marginal sur les ordinateurs, il est le roi du web mobile !

Proposé par Apple, Safari est le navigateur web par défaut de MacOS, mais il fonctionne aussi sous Windows. Un bon produit qui possède la magie Apple. Parfait pour l’utilisateur qui ne veut pas s’embarrasser de technique.

Quel que soit votre choix, le plus important est d’abandonner Internet Explorer 6 !

Développée par Joe Hewitt, à qui l’on doit l’interface de Netscape et de Firefox ou encore la librairie Boxely d’AOL, FireBug est une extension Firefox pour faciliter le test et la correction d’applications web riches (HTML, CSS, Javascript, XML et Ajax).

Attendue depuis quelques mois comme le Graal du développeur web, je viens d’en tester la dernière version (v.0.4.1 du 13 octobre 2006). Bilan ? Il suffit de trente secondes pour comprendre que cet outil est indispensable ! Petite tour de ses atouts.

Après une installation automatique et sans histoire, FireBug est accessible par le menu principal de Firefox. Une icône apparaît également dans la barre d’état et indique si la page web en cours est valide (icône verte) ou si elle contient des erreurs (icône rouge avec le nombre d’erreurs). Un volet permet d’utiliser toutes les fonctions de FireBug directement sous la page web testée.

Inspection du code

FireBug possède un inspecteur contextuel très efficace pour parcourir le code d’une page web. Il suffit de placer le pointeur sur un objet de la page pour en voir le code HTML ou obtenir des données numériques (taille, position, marge, espacement…). Si des fichiers sont liés (styles, scripts), il suffit d’ouvrir la balise HTML correspondante pour voir le code du fichier lié. C’est simple et rapide ! L’inspecteur gère aussi les styles CSS. On peut contrôler leur définition sur n’importe quel objet et détecter rapidement des conflits d’attributs. Quant aux as du DOM (Document Object Model), ils seront ravis d’en consulter les propriétés de façon aussi simple.

Mise en surbrillance du code HTML d’un objet survolé.

Valeurs des attributs de style d’un objet survolé.

Inspection du DOM.

Affichage des erreurs

En cas d’erreurs dans une page (HTML, CSS, Javascript), FireBug en dresse la liste et le détail (objet, valeurs, numéro de ligne…). Comme l’accès au fichier incriminé est immédiat (lien vers le fichier, puis sélection de la ligne), la détection des erreurs est très efficace.

Affichage des erreurs dans la console.

Debugger Javascript

FireBug ne se contente pas d’afficher les erreurs, il peut aussi servir de debugger en testant les scripts Javascript pas à pas. Bien sûr, beaucoup d’entre nous trouverons ses fonctions trop simples, mais il est suffisant dans 80% des cas. Et il y a une console Javascript en prime pour exécuter des commandes directement !

Contrôle des flux Ajax

Je garde le meilleur (à mon goût) pour la fin : l’Ajax Request Spy. Avec lui, le trafic Ajax entre le client et le serveur n’aura plus rien à cacher ! J’adore.

Conclusion

Même si Joe Hewitt est encore loin de la version 1.0, son travail est déjà remarquable et terriblement efficace. Pour ma part, je garde la version actuelle qui m’a déjà permis de faire le ménage dans plusieurs sites en… 20 minutes ! En ce moment-même, je constate que l’interface de gestion de WordPress (moteur de mon site) contient, elle aussi, des erreurs… C’est redoutable.

L’idée est toute simple mais magistralement mise en pratique par Marko Dugonjic : TypeTester permet de comparer sur trois colonnes des blocs de textes en sélectionnant tous leurs attributs de styles : police, taille, couleur, interlignage, alignement, etc.

Quand vous avez trouvé le style adéquat pour votre site, TypeTester vous en donne le code CSS ! Et en plus, l’interface est tellement belle…