Firefox 11 : observer les éléments d'une page en 3D

La version 11 du navigateur Mozilla Firefox disponible depuis le 13 mars intègre un module dédié à l'analyse des pages Web particulièrement intéressant aussi bien pour les développeurs confirmés que pour les internautes intrigués par l'architecture des pages qu'ils visitent.

Ce nouvel outil, Page Inspector 3D View ou Tilt, permet l'observation de n'importe quelle page web en trois dimensions. Les différents éléments de la page inspectée sont représentés sous forme de blocs adjacents ou superposés correspondant respectivement à la disposition et à l'imbrication des balises HTML.

Pages d'accueil du site des Infostratèges vue avec Tilt
Structure de la page d'accueil du site Les Infostratèges

Chaque couleur correspond à un type d'élément, les blocs de couleur bleu foncé correspondent par exemple aux liens hypertextes. On peut également observer le code source chaque élément en cliquant simplement sur le bloc associé.

Zoom sur le code source d'un bloc avec Tilt

Cette approche très visuelle favorise une compréhension globale et immédiate de la structure de la page observée, bien plus qu'avec un éditeur de texte. En somme, un très bon outil d'appoint pour les développeurs web et un excellent outil pédagogique pour les internautes souhaitant comprendre les mécanismes du langage HTML.

Comment l'utiliser ?

Pré-requis — avoir une carte graphique supportant l'affichage en trois dimensions et utiliser la version 11 du navigateur Firefox téléchargeable à l'adresse suivante :
www.mozilla.org/fr/firefox/fx/

Faire un clic-droit sur la page à observer et choisir l'option Examiner l'élément (Ctrl+Maj+I) — ou depuis le menu Firefox (menu orange en haut à gauche de l'écran), choisir Développement Web puis Examiner.
Cliquer ensuite sur le bouton 3D qui apparaît en bas à droite de l'écran.

Problèmes connus

Certains problèmes pouvant être liés à la configuration du navigateur peuvent subvenir. Nous donnons ci-dessous à titre indicatif quelques pistes pour résoudre ces derniers.

Absence de bouton 3D

Il peut arriver qu'il n'y ait pas de bouton 3D. Dans ce cas télécharger et installer manuellement l'extension Tilt 3D à l'adresse suivante :
https://addons.mozilla.org/fr/firefox/addon/tilt/
Puis, pour utiliser la 3D, depuis le menu Firefox (menu orange en haut à gauche de l'écran), choisir Développement Web puis Tilt (Ctrl+Maj+M).

Problème d'initialisation

Un message d'erreur relatif à l'initialisation de l'outil peut survenir. Cela peut provenir de la désactivation d'un paramètre du navigateur.  On peut vérifier si cette option est active à l'adresse suivante : http://get.webgl.org/
Si un cube apparaît sur l'écran l'option est active sinon il faut l'activer :

  • Recopier l'adresse suivante dans la barre d'adresse de Firefox pour éditer sa configuration about:config
  • Lire et accepter le message d'avertissement (les manipulations qui suivent sont sûres et réversibles)
  • Rechercher la ligne suivante concernant l'option  webgl.force-enabled
  • Effectuer un double-clic sur la ligne pour passer la colonne valeur à true (la valeur est initialement false)

Pierre-Éric DEVIE