Nouveaux outils de développement dans Firefox 10 et 11
Firefox 10, qui doit sortir le 31 janvier (le jour même où Firefox 11 devient une version bêta officielle), complète enfin la collection grandissante d’outils de développement du navigateur avec les inspecteurs de page et de style.
À certains égards, ces outils sont similaires à Firebug, mais ils sont également uniques à Mozilla.
Plutôt que d'essayer de reproduire Firebug ou les outils de développement WebKit, Mozilla n'a inclus que les fonctionnalités les plus essentielles, en se concentrant plutôt sur la création d'une expérience élégante.
La nouvelle approche fonctionne-t-elle ou les concepteurs vont-ils crier à Firebug? Nous allons jeter un coup d'oeil.
Vous pouvez extraire l'Inspecteur de page en cliquant avec le bouton droit sur une page Web et en choisissant "Inspecter" (Firebug a récemment modifié son élément de menu contextuel pour qu'il indique "Inspecter dans Firebug"). Au bas de l'écran, une barre violette apparaît avec une liste des parents et des enfants de l'élément sélectionné.
Vous pouvez cliquer sur les parents ou les enfants pour les sélectionner et cliquer avec le bouton droit sur un élément pour voir ses frères et sœurs. Il y a aussi des boutons intitulés "Inspecter", "HTML" et "Style". Si les nombreux onglets et boutons de Firebug vous ont fait monter le mur, cette disposition sera une aubaine. Si vous voulez simplement voir le DOM, le fait de devoir cliquer sur "HTML" en premier peut vous conduire au mur.
Creuser
Cliquez sur le bouton HTML pour afficher un panneau affichant la hiérarchie des balises HTML qui composent votre page. Dans cette vue, vous pouvez développer et réduire les balises et modifier leurs attributs. En cliquant sur le bouton "Inspecter", vous pouvez survoler les éléments pour les inspecter et, en même temps, Firefox met en évidence l’élément que vous inspectez et assombrit le reste de la page.
En cliquant sur le bouton "Style", vous ouvrez l'inspecteur de style, affichant les règles CSS qui s'appliquent à l'élément sélectionné. Dans l'inspecteur de styles, vous pouvez passer de "Règles" à une section "Propriétés" qui vous donne les propriétés CSS calculées pour l'élément sélectionné, ainsi que des liens vers la documentation de Mozilla pour chaque propriété.
L'inspecteur de style se trouve à droite de la page, tandis que l'inspecteur de page et le volet HTML sont situés en bas de l'écran. Vous pouvez choisir d'afficher les deux volets, un seul ou aucun.
Cela couvre essentiellement tout ce que font les inspecteurs de page et de style. La console Web et le bloc-notes JavaScript, introduits dans les versions antérieures de Firefox, sont des outils distincts. Il n'y a pas de moniteur d'activité réseau. Il n'y a pas de sélecteur d'agent utilisateur, pas de fonctionnalité d'édition en tant que HTML, pas d'outils de test de performance, pas de moyen d'injecter de nouvelles balises dans une page, pas de moyen d'activer l'état de survol d'un élément. Il n'y a même pas de panneau "layout" pour afficher les dimensions, le remplissage et les marges de votre élément.
Malgré toutes ces limitations, je reviens toujours aux inspecteurs de page et de style. Je reviens pour l’interface épurée, les panneaux bien pensés et ce chrome funky pourpre. Je reviens car ils sont un plaisir à utiliser, et parce qu'ils répondent à mes besoins la plupart du temps.
L'interface utilisateur simple des inspecteurs signifie également qu'ils sont utiles même lorsque j'ai réduit la taille de la fenêtre pour tester des conceptions réactives. Quand ils ne répondent pas à mes besoins, j'ouvre simplement Firebug ou la barre d'outils Web Developer. (Je le ferais beaucoup moins si les outils de développement intégrés avaient des équivalents aux panneaux Layout et Net de Firebug.)
Les outils de développement de Mozilla n'ont pas à correspondre à l'ensemble des fonctionnalités des outils de leurs concurrents, car les fonctionnalités spécialisées de ces outils existent déjà en tant qu'extensions Firefox. C'est ce qui rend les outils de développement de Firefox uniques.
Ces navigateurs vont jusqu'à 11
Outre l’Inspecteur HTML et Style, certaines fonctionnalités novatrices sont prévues pour les versions ultérieures de Firefox. Les outils de développement de Firefox 11 vous permettent de visualiser votre page Web en tant que piles de balises en trois dimensions. Chaque fois que vous nichez une balise, cette pile de balises devient plus grande. Cette fonctionnalité est en fait étonnamment utile - vous pouvez voir en un coup d’œil si un élément se trouve dans le mauvais parent, et voir ces balises empiler les nouveaux développeurs de div-itis droit vite
Également prévu dans Firefox 11 est un éditeur de style. Cet outil vous permet de créer de nouvelles feuilles de style, comme le ferait un bon éditeur de texte. La principale différence est que vos modifications sont appliquées aux pages Web en direct dès que vous avez fini de taper.
Auparavant, ce type d'édition CSS en direct était le domaine des environnements de développement tels que Expresso , donc c'est génial de voir cette fonctionnalité intégrée directement dans le navigateur. Plus de fonctionnalités, y compris "l'outillage pour aider à résoudre les problèmes de performances des applications", sont prévu pour plus tard cette année.
Cependant, même dans Firefox 11, comparer les outils de développement intégrés avec Firebug (ou avec les outils de développement WebKit) est un peu comme comparer iOS avec Android. Le premier a une interface utilisateur intuitive et claire et quelques idées novatrices, mais il manque de fonctionnalités utilisateur.
Cette dernière a toutes les caractéristiques auxquelles vous pouvez penser, et vous pouvez configurer les flammes si elle existe, mais ce n’est pas aussi élégant que celui de Cupertino. Contrairement à iOS et Android, il est facile d’utiliser les deux outils en même temps si vous le souhaitez. Mozilla continue à contribuer à Firebug et a précisé que Firebug est là pour le long terme.
Quel outil est fait pour vous? Cela dépend des fonctionnalités dont vous avez besoin, des fonctionnalités que vous pouvez utiliser et de ce que vous pensez de la recherche d'extensions pour combler les lacunes de votre outil de prédilection. Quoi que vous pensiez des nouveaux outils de développement, vous ne pouvez pas accuser Firefox de créer WebKit.
Êtes-vous enthousiasmé par les nouveaux outils de développement de Firefox 10? Quels sont vos outils de développement? Faites le nous savoir dans les commentaires!