Firefox ajoute des outils de développement

par Yohann Poiron le 1 février, 2012 dans Développement, Navigateurs Web, Outils - Conseils avec 11 commentaires et vu 1201 fois

Avec la sortie officielle hier de la nouvelle version de son navigateur, version 10, Firefox a intégré des outils pour les développeurs et ce, afin de rivaliser avec les outils de Chrome. Ces derniers vont vous permettre de modifier l’apparence des sites Web en temps réel, grâce à un moyen simple et rapide pour inspecter des éléments dans une seule fenêtre.

Ainsi, avec l’inspecteur de page, vous allez pouvoir jeter un coup d’œil dans la structure et sa mise en page sans avoir à quitter Firefox, ni lancer une autre extension…
Plus précisément, il est maintenant beaucoup plus facile de basculer entre les éléments HTML et CSS, contrairement à la vue de Chrome, qui semble rassembler les deux sur un petit écran. En effet, vous avez un accès rapide aux propriétés CSS afin d’afficher ou modifier les valeurs d’un site web au sein de Firefox.

Jusqu’à aujourd’hui, le meilleur outil réalisant les mêmes fonctionnalités sur Firefox, est l’extension Firebug.

Scratchpad utilise maintenant l’éditeur de code Eclipse Orion pour fournir la coloration syntaxique et d’autres caractéristiques qui permettent une facilité et une simplicité d’écriture du code JavaScript.

Firefox introduit également l’API Mozilla Full-Screen qui va vous permettre de facilement créer des expériences qui mettent à profit tout l’écran. En outre, Firefox a simplement ajouté la prise en charge de fonctionnalités afin de rendre plus facile la construction des expériences Web en 3D avec des technologies ouvertes.

Découvrez tous les détails ici, et via la vidéo ci-dessous :

Pour lancer cette nouvelle fonctionnalité, vous devez disposer de Firefox 10. Une fois ce dernier téléchargé et installé, allez sur la page Web à inspecter puis, faite un clique droit et cliquez sur « Examiner l’élément ».

Firefox ajoute des outils de développement - Examiner l'élément

De là, vous allez être en mode débogueur :

Si vous cliquez sur le bouton « Examiner », vous allez pouvoir parcourir la DOM de votre page à l’aide de la souris et choisir un élément
Vous pouvez cliquer sur chacun des éléments affichés en bouton afin de sélectionner une div en particulier, ou encore une balise a

Firefox ajoute des outils de développement - Sélection d'un élément

En cliquant sur le bouton « HTML5″, la vue de la DOM s’affichera en dessous. De même, si vous cliquez sur le bouton « Style », toutes les propriétés s’affichent ce qui vous permet de faire des modifications en direct

Firefox ajoute des outils de développement - Affichage de la DOM et CSS

Avec ces outils directement embarqués au sein du navigateur, en plus de la console Web déjà présente, Firefox s’impose comme l’outil de développement perfectionné. De quoi rallier les développeurs, mécontent des ressources demandées par le navigateur, à sa cause ?

L’avez-vous testé ? Allez-vous abandonner Firebug ?

Tags : développement, Eclipse Orion, firefox, firefox 10, outils,

Pour en savoir plus sur l'auteur de cet article... Yohann a fondé le Blog des Nouvelles Technologies en 2010. Autodidacte en matière de développement de sites en PHP, j’ai toujours poussé ma curiosité sur les sujets et les actualités du Web. Je suis actuellement engagé en tant que responsable interopérabilité et développeur Web. En savoir plus sur cet auteur...

Follow @lryo17

Pin It

Articles récents

Mozilla montre une nouvelle version du design de Firefox pour Android

Vidéo de déballage du Samsung Galaxy S III

Wikileaks, après The Pirate Bay, est également la cible d'attaques DDoS !

[MAJ] The Pirate Bay tombe suite à une attaque DDoS, de nouveau accessible !

Adobe ColdFusion 10 est lancé avec un soutien accru d'HTML5

Goobuntu : Quand Google fait son propre Ubuntu

http://twitter.com/magsout Guillaume DEMESY

Même si c’est une bonne chose d’avoir intégrer des outils de dev. On est encore loin de la puissance de firebug. Même si il est vrai que leur approche est plus intuitive que firebug.
Moi déjà un truc qui me dérange c’est l’apparition de la fenêtre pour les propriété css qui vient influée sur le design du site, alors en plus quand il est question de grille fluide…

http://www.blog-nouvelles-technologies.fr Yohann Poiron

Quel(s) outil(s) manque t-il par rapport à Firebug dans le quotidien ? Concernant l’affichage CSS je te rejoins même si avoir les propriétés CSS couplées au code HTML c’est top !

http://twitter.com/mnokin Maxime Nokin

Merci pour la présentation de ces nouvelles fonctions.

Pour répondre à ce qu’il manque, c’est pouvoir mettre ces infos dans une fenêtré séparée, comme Firebug. A venir ? En attendant, vu que les deux coexistent sagement je vais continuer à utiliser l’un et apprendre l’autre.

http://www.blog-nouvelles-technologies.fr Yohann Poiron

Je pense qu’ils sont partis dans la bonne voix.. reste à la poursuivre

http://twitter.com/magsout Guillaume DEMESY

Deux points de vue :
1) dev: dans ce cas tous les outils que tu trouves dans les onglets : console, reseaux, DOM
2) non dev: dans ce cas c’est nickel, sur ma machine familiale, l’inspecteur suffit quand je surf sur le net que quelque chose m’intrigue .

http://www.blog-nouvelles-technologies.fr Yohann Poiron

Dans le cas du dev, tu retrouves la console / réseaux / DOM dans Firefox directement ! As-tu testé la console Web en plus de l’inspecteur ?

http://twitter.com/magsout Guillaume DEMESY

Oui oui déjà testé. Pour le coup tu ne vois que les requêtes HTTP, code HTTP et En-têtes requêtes et réponses. Tu ne vois pas les réponses HTML ou même json. Le système de filtre qui est plus précis sur firebug (tu peux limiter au requête xhr par ex)

http://www.blog-nouvelles-technologies.fr Yohann Poiron

Oui ok je vois ce que tu veux dire…

Blue_shadow360

moi je trouve que c’est un tres bon outil, mais lorsqu’on inspecte un élément, ce serais bien que l’ont voit plus que le id ou le nom de la balise choisie, mais le chemin complet vers cet élément. Ce serais bien qu’on vois..par exemple body > #content > h1. Moi ce qui m’intéresse dans les outils que j’utilise, cest de pouvoir selectionner ce chemin pour changer le css. Pour moi cest le petit truc qui manque pour que cet outil soit complet. Vous comprenez ce que je veux dire ?