Déboguer en 3D votre HTML et CSS avec Tilt de Firefox

Tous le monde connaît plus ou moins les outils web pour déboguer le HTML et le CSS. En général une bonne console web fait la job ! On clique sur un élément HTML et on voit le CSS associé. On peut même modifier en temps réel le CSS. Tout ça est clairement bien utile mais depuis un moment firefox intègre nativement TILT qui permet d’obtenir une visualisation 3D de votre page. TILT est très pratique pour déboguer le HTML et le CSS puisque le moteur 3D vous permet de voir plein de chose qu’on ne voit pas d’habitude. Il est ainsi facile déboguer les div non fermé, les couches z-index ou encore les positions absolue CSS.

Comment lancer le débogueur 3D de Firefox

Rien de plus facile! Ouvrez votre firefox et aller sur votre site préféré : Undisconnected.com par exemple 😉 Ensuite « cliquez droit » sur un élément de la page que vous aimeriez inspecter et choisissez l’option contextuelle « Examiner l’élément ». Ceci a pour effet de lancer la console web et de vous afficher l’élément sélectionné dans l’arbre du DOM (Document Object Model) et de vous afficher le CSS relié à cet élément. Jusque là rien de bien nouveau!

Diriger vous ensuite en bas à droite de la fenêtre de firefox, vous devriez voir un bouton 3D apparaître. Cliquer sur ce bouton … et ô magie, une vue 3D de la page apparaît. Il est possible de sélectionner des éléments de la page et d’en voir le CSS ainsi que leur place dans le DOM. 

Vidéo de la vue 3d dans Firefox : TILT en action 

Pour mieux voir à quoi cela ressemble rien de tel qu’une petite vidéo. 

[youtube]http://www.youtube.com/watch?v=lu_h6ko-ugk[/youtube]

Conclusion 

Soulignons l’effort de la fondation Mozilla pour amener aux développeurs une nouvelle génération d’outils puissants pour le débogage. J’espère que cet article vous aidera à gagner du temps et aussi à perdre moins de cheveux 😉 Si vous avez des questions ou que vous souhaitez partager votre expérience de l’outil laissez un commentaire.