Firefox 11 affiche la structure des pages web en 3D

Et les changements dans les feuilles de styles CSS en temps réel

Le 2012-03-14 13:22:20, par Gordon Fowler, Expert éminent sénior

Firefox 11 vient d’intégrer un ensemble d’améliorations qui risquent de ne pas laisser les développeurs web indifférents.

La première nouveauté est un outil qui permet de visualiser la structure (CSS, etc.) d’une page en 3D. Page Inspector 3D View, surnommé Tilt, repose sur WebGL.

« Cet outil permet à tout utilisateur de comprendre immédiatement le lien entre le code et la page finale », explique Mozilla. « Alors que les outils pour développeurs, tels que « view source », ont toujours été utiles pour apprendre à développer une page, l’affichage en 3D offre une vue plus limpide de la structure des différentes parties d’un site Web ».

Le site de CNN passé à la moulinette de Page Inspector 3D View, alias Tilt

Après avoir sélectionné « 3D View » dans Page Inspector, il suffit de déplacer la souris sur les différents éléments pour que Firefox 11 donne davantage d’informations sur la partie sélectionnée.

Deuxième nouveauté, l’outil Éditeur de style permet d’éditer les feuilles de style CSS, à l’instar d’un éditeur de texte, et de voir instantanément les modifications, sans quitter le navigateur.

« C’est une façon simple et rapide d’itérer et de tester les conceptions d’un site Internet », explique la fondation. Lorsque des modifications sont apportées, l’Éditeur de style permet de sauvegarder le fichier sur un ordinateur.

Enfin, Firefox 11 synchronise à présent les modules complémentaires entre différents ordinateurs. Les utilisateurs peuvent activer cette option depuis la fenêtre « Options » dans l’onglet Sync.

Télécharger Firefox 11

Plus d’informations sur "Tilt"

Source : Mozilla

Et vous ?

Impressioné(e) par Page Inspector 3D View ? Ou simple gadget ?

Discussion forum

14 commentaires

amezghal
Membre habitué

Je viens juste de tester l'inspection 3D et c'est vraiment un truc de ouf.
l'avantage c'est qu'on voit bien le z-index des layers

le 14/03/2012 à 13:56
stailer
Membre chevronné

Enorme !

Je sais pas si ça va m'être utile mais techniquement, c'est vraiment top.

le 14/03/2012 à 21:25
_ash_
Membre habitué

Pour voir à quelle point cette extension peut être pratique, il suffit de l'utiliser sur cette page : http://www.cedricrey.fr/atelierWeb/t...eiffel_3D.html

le 15/03/2012 à 8:34
pastel.pro
Membre habitué

C'est vraiment excellent, et perso je trouve pas ça gadget, ça permet de comprendre une page beaucoup plus vite

le 15/03/2012 à 9:23
Benjamin Delespierre
Expert éminent

C'est super, j'adore ce genre de gadgets . ça facilite grandement la compréhension de la structure global de la page en un coup d'oeil.

Un exemple avec DVP

le 21/03/2012 à 13:34
rambc
Membre chevronné

Pas mal pour voir la complexité de certains sites... A voir si cela est utile en situation réelle.

le 14/03/2012 à 15:00
Khleo
Membre averti

Vraiment impressionnante l'inspection 3D

le 14/03/2012 à 15:18
FERDIKAM
Membre confirmé

trop cool l'extension

le 14/03/2012 à 18:05
Aiekick
Membre extrêmement actif

Effectivement bravo mozilla !!

pour la visu 3D c'est sympa pour voir la complexité d'un site, c'est un peu fun, mais je pense pas que ça soit d'un grand intérêt pour le dev.

par contre les outils d'examen en live d'un site ça c'est top et je vais m'en servir.

D'ailleurs si vous voulez vous rendre compte de la complexité d'un site vous pouvez afficher une adresse d'un site sous forme de graphe a cette adresse :
http://www.aharef.info/static/htmlgraph/
C'est 2D mais c'est assez efficace aussi

le 14/03/2012 à 21:08
Tillo
Membre éclairé

Et voilà... tous les développeurs web de la terre vont pouvoir découvrir la structure de mes pages web et se moquer de moi parce que j'utilise mal les div.

Plus sérieusement, je doute de l'utilité réelle d'une telle fonction.

le 16/03/2012 à 10:22

Poster une réponse