30Jun
Firefox 11 a ajouté deux nouveaux outils de développement web à l'arsenal déjà impressionnant de Firefox. La fonctionnalité Tilt permet de visualiser les structures de sites Web en 3D, tandis que l'éditeur de style peut modifier les feuilles de style CSS à la volée.
La fonctionnalité 3D, appelée Tilt, permet de visualiser le DOM d'un site Web. Il s'intègre à l'inspecteur de document existant et utilise WebGL pour afficher des graphiques 3D riches dans votre navigateur.
Tilt - Visualisation de site Web 3D
Vous pouvez accéder à Tilt depuis l'inspecteur de page de Firefox. Pour commencer, ouvrez l'inspecteur de page en sélectionnant "Inspecter" dans le menu Développeur Web. Vous pouvez également cliquer avec le bouton droit de la souris sur la page en cours et sélectionner "Inspecter l'élément" pour lancer l'inspecteur sur un élément spécifique.
Cliquez sur le bouton "3D" dans la barre d'outils de l'inspecteur.
Vous verrez la structure de la page après l'activation du mode 3D, mais elle semblera plate jusqu'à ce que vous la pivotiez.
Faites pivoter le modèle en faisant un clic gauche, déplacez l'image en cliquant avec le bouton droit de la souris et effectuez un zoom avant et arrière à l'aide de la molette de la souris.
Cette vue est intégrée aux autres outils de l'inspecteur. Si vous avez ouvert les panneaux HTML ou Style, vous pouvez cliquer sur un élément de la page hte pour afficher le code HTML ou les propriétés CSS de cet élément.
Autres fonctions 3D
La fonction de visualisation 3D était basée sur l'extension Tilt, mais elle ne possède pas toutes les fonctionnalités de l'extension Tilt. Si vous souhaitez personnaliser les couleurs ou même exporter la visualisation en tant que fichier de modèle 3D à utiliser avec un programme d'édition 3D, vous devez installer le module complémentaire Tilt 3D.Une fois que vous avez, vous obtiendrez une nouvelle option "Tilt" dans le menu Web Developer.
Cliquez sur le bouton Annuler pour utiliser l'ancienne version de Tilt lorsque vous y êtes invité.
Vous trouverez des contrôles pour personnaliser la visualisation sur le côté gauche de la fenêtre et d'autres options, y compris la fonction d'exportation, en haut de la page.
Éditeur de style CSS
Pour afficher et modifier les feuilles de style CSS d'une page, ouvrez l'éditeur de style dans le menu Développeur Web.
L'éditeur de style répertorie les feuilles de style sur la page en cours. Activez ou désactivez une feuille de style en cliquant sur l'icône en forme d'œil à gauche du nom de la feuille de style. Modifiez une feuille de style en la sélectionnant et en modifiant le code.
Les modifications sont immédiatement répercutées sur la page. Si vous désactivez une feuille de style, la page perdra ses informations de style. Si vous modifiez une feuille de style, les modifications apparaissent sur la page pendant la frappe.
Vous pouvez enregistrer une copie de l'une des feuilles de style sur votre ordinateur, importer une feuille de style existante à partir de votre ordinateur ou ajouter une nouvelle feuille de style vierge avec les liens Enregistrer, Importer ou Nouveau dans la fenêtre Editeur de style.
La fonction de visualisation 3D surveille les changements sur la page en cours et les notifications lorsque des changements surviennent. Lorsque vous utilisez l'éditeur de style avec l'inspecteur 3D ouvert, vos modifications seront immédiatement répercutées dans la vue 3D.Cela fonctionne également avec les extensions tierces qui modifient des pages Web, telles que Firebug.
