Astuce – Vue du DOM en 3D sous Firefox

J’aime Chrome pour mes développements, pourtant Firefox n’a pas à rougir. Ce dernier possède d’ailleurs un outil qui n’existe pas nativement sur Chrome : la vue du DOM en 3D.

EDIT du 22/08/2015 : Cette fonctionnalité ne semble plus être disponible sur la version 42 developer edition. Tristesse…

Alors ok, dit comme ça on se demande un peu ce que c’est que ce gadget. Et bien à mon sens ça n’en est pas un, car il me sauve souvent la mise lorsque je travaille sur de longues et lourdes pages au DOM chargé, surchargé et enchevêtré dans du code java ou php à n’en plus pouvoir. Dans ce genre de cas, il arrive parfois de mal fermer une balise par exemple. Et alors quand il y a un millier de lignes je ne vous raconte pas l’angoisse. Mais ça c’était avant que je ne découvre cette fonctionnalité 🙂

Grâce à elle, les blocs (entendre les blocs de balises) sont présentés en perspective 3D à la façon de calques superposés. On y voit de suite beaucoup plus clair 🙂 Bon ça bouffe quand même des ressources matérielles, mais comme je m’en sers ponctuellement, ça n’est pas dramatique.

vue-3d-firefox

Par ailleurs on peut, dans cette vue sélectionner l’élément voulu, et automatiquement, il l’est aussi dans l’inspecteur. Plutôt pratique !

Pour activer cette fonctionnalité, il suffit d’aller dans l’inspecteur d’élément de Firefox, puis dans les options des outils (petit engrenage en haut à droite), dans la partie « boutons de la boîte à outils », cocher « vue 3d ». Une nouvelle option apparaîtra en haut à droite de l’inspecteur, vous permettant de basculer en vue 3d.

Pour les allergiques de Firefox, il existe sous chrome une extension qui fait la même chose : 3D View for Webpages. Mais je ne l’ai pas testé et elle semble souffrir de quelques problèmes.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s