Facebook Twitter Gplus RSS
magnify
Home Non classé Inspecter le DOM en 3D
formats

Inspecter le DOM en 3D

Publié le 27 avril 2012 par dans Non classé

Je viens de découvrir une fonctionnalité méconnue de FireFox… Comme les autres navigateurs, FireFox propose (sans extension) des outils de développement, mais là, on parle d’inspecter le DOM en 3D !

Les outils de développement de FireFox

Comme un bon nombre de développeurs web, j’utilise FireBug sous FireFox depuis si longtemps, que je l’utilisais déjà avant que Chrome n’existe, et qu’Opera ne propose DragonFly. Même Internet Explorer intègre des outils de développement de nos jours. Je suis donc passé à côté des récentes évolutions des outils de développement intégrés à FireFox.

Ce n’est donc que récemment que j’ai découvert cet étonnant outil. Pour le voir en action, il suffit de faire un clic droit sur la page, et de choisir “Inspecter l’élément”. FireFox met en surbrillance l’élément sélectionné et affiche son chemin dans le DOM en bas (j’ai pris exemple sur un article de ce site et j’ai tronqué le résultat) :

Sur la droite vous remarquez trois boutons :

Les boutons Style et HTML ouvrent des panneaux similaires à ceux de FireBug ou des autres outils équivalents.

Le DOM en 3D

Le bouton Vue 3D quant à lui ouvre un outil tout à fait indédit, permettant d’afficher les différents éléments du DOM mis en profondeur selon leur imbrication. L’exemple ci-dessous est tiré d’un article de ce site (au passage on voit un drôle de bricolage sur le logo du site, un peu de mon fait, un peu du fait de Drupal ou du thème utilisé) :

C’est pas beautiful ça ? La vue 3D peut être tournée dans tous les sens à la souris, les éléments peuvent être sélectionnés dans cette vue… Des éléments imbriqués de même taille deviennent accessibles.

Un petit bonus

Saviez-vous qu’on peut coller directement du SVG dans un document HTML ? Le balisage étant standard, il est possible de récupérer du code SVG généré par Inkscape et de produire de jolis dessins vectoriels à placer dans une page web.
J’ai placé un dessin en SVG ci-dessous spécialement pour cette occasion. Inspectez cet article en 3D avec FireFox pour découvrir la surprise… Allez, comme au bon vieux temps des stéréogrammes.

 

Conclusion

En conclusion je ne suis pas sûr de l’utilité au quotidien de cet outil, mais c’est tout de même un beau jouet.

 
Tags:
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WordPress.org - Theme based on iFeature