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