Les bons outils pour développer en HTML5 Navigateurs : extensions de développement et consoles JavaScript

Les extensions pour développeurs sont un atout considérable des navigateurs web modernes. Elles comprennent de nombreuses fonctionnalités de diagnostic, d'inspection du code HTML, CSS et JavaScript, de monitoring des performances, et surtout elles intègrent une console JavaScript. Cette dernière permet la saisie de code rapide à des fins de test, et le diagnostic des appels effectués, par un affichage très agréable et structuré des variables JavaScript (objets, tableaux, etc.). Dans la plupart des cas, elles sont équipées de leurs propres méthodes autorisant un accès direct à la sortie depuis des scripts développés et inclus dans les pages HTML. Les fonctions console.log(), console.dir() sont très courantes et remplacent avantageusement toutes les autres fonctions telles qu'alert() qui doit être oubliée.

tableau 3-2 : accès aux consoles dans les principaux navigateurs
Tableau 3-2 : Accès aux consoles dans les principaux navigateurs © Eyrolles


La console doit être votre meilleure amie si vous décidez de vous attaquer aux API HTML 5, JavaScript et DOM. Elle est essentielle pour comprendre ce qui se déroule, et pour résoudre les erreurs pouvant survenir tant dans la syntaxe du code que dans les différences de support des navigateurs.

Tous les navigateurs intègrent une panoplie d'outils, qui peut être complétée par des extensions plus avancées, par exemple Firebug du côté de Firefox. Cependant, même sans cette extension, un inspecteur de document de bonne facture est intégré en natif dans le navigateur. Une ligne de commande bien pensée (raccourci Maj + F2) donne accès à des actions courantes, y compris la capture d'écran. Cerise sur le gâteau, un affichage 3D de l'arbre du document est proposée pour bien visualiser la hiérarchie des blocs.

figure 3- 6 : l'inspecteur de code intégréà firefox
Figure 3- 6 : L'inspecteur de code intégréà Firefox © Eyrolles


Les pages about:

Les navigateurs sont équipés de pages "cachées", contenant une mine d'informations sur leurs rouages internes. Elles sont préfixées par about: sous Gecko (Mozilla) et Internet Explorer, chrome:// pour WebKit (Chrome/Safari), opera: pour Opera.

Par exemple :
 about:blank : Une page vide
 about:cache : Le cache ne vous cache plus rien
 chrome://net-internals/ : Toute la couche réseau de WebKit
 chrome://gpu-internals/ : Le moteur de rendu graphique
 chrome://plugins/ : Les extensions installées
 opera:cpu : Consommation des ressources processeur
 opera:config : Configuration avancée d'Opera

Il en existe des dizaines à découvrir, quelques unes sont disséminées au fil des chapitres. Une base de départ est about:about (mais elle ne dévoile pas tout?).

Surveiller la performance navigateur

Une API a vu le jour pour obtenir rapidement des renseignements sur les performances de rendu des pages web, via l'interface performance interrogeable dans la console (disponible dans Firefox/Chrome/Internet Explorer 9/Android 4/BlackBerry10). Les propriétés performance.timing, performance.navigation et performance.memorysont alimentées en temps réel.

figure 3–7 : la page about:cache d'opera.
Figure 3–7 : La page about:cache d'Opera. © Eyrolles

Pour avoir encore plus de détails, orientez-vous vers les extensions de type Yslow, PageSpeed ou encore l'onglet Timeline de WebKit qui génère un graphique progressif, reflétant les temps de chargement, rendu graphique et interprétation des scripts, lorsqu'il est déclenché.

Le sujet de la performance web est très vaste, de nouvelles expérimentations sont publiées régulièrement. Chaque application fourmille de détails révélateurs.