Les nouvelles fonctionnalités de développement Web de Firefox, associées à d’impressionnants outils de développement Web tels que Firebug et la barre d’outil Web Developer, font de Firefox un navigateur idéal pour les développeurs Web. Tous les outils sont disponibles sous Web Developer dans le menu de Firefox.
Inspecteur de page
Inspectez un élément spécifique en cliquant dessus avec le bouton droit de la souris et en sélectionnant Inspecter (ou en appuyant sur Q). Vous pouvez également lancer le Inspecteur dans le menu Web Developer.
Si vous voulez choisir un nouvel élément, cliquez sur le bouton Inspecter bouton de la barre d’outils, passez votre souris sur la page et cliquez sur votre élément. Firefox met en évidence l'élément sous votre curseur.
Inspecteur HTML
Clique le HTML bouton pour afficher le code HTML de l'élément sélectionné.
L'inspecteur HTML vous permet de développer et de réduire les balises HTML, ce qui facilite la visualisation en un coup d'œil. Si vous voulez voir le code HTML de la page dans un fichier plat, vous pouvez sélectionner Voir la source de la page dans le menu Web Developer.
Inspecteur CSS
Clique le Style bouton pour voir les règles CSS appliquées à l'élément sélectionné.
Il existe également un panneau de propriétés CSS - basculez entre les deux en cliquant sur le bouton Règles et Propriétés boutons. Pour vous aider à trouver des propriétés spécifiques, le panneau des propriétés comprend un champ de recherche.
Vous pouvez modifier le code CSS de l’élément à la volée à partir du panneau Règles. Désélectionnez les cases pour désactiver une règle, cliquez sur le texte pour modifier une règle ou ajoutez vos propres règles à l'élément en haut du volet. Ici, j’ai ajouté le poids de police: gras; Règle CSS, rendant le texte de l’élément en gras.
Bloc-notes JavaScript
Le Scratchpad a également été mis à jour avec Firefox 10 et contient maintenant la coloration syntaxique. Vous pouvez taper du code JavaScript à exécuter sur la page en cours.
Une fois que vous avez, cliquez sur le Exécuter menu et sélectionnez Courir. Le code s'exécute dans l'onglet en cours.
Console Web
La console Web remplace l'ancienne Console d'erreur, devenue obsolète et qui sera supprimée dans une future version de Firefox.
Qu'est-ce qu'un message de développeur Web? C’est un message imprimé sur l’objet window.console. Par exemple, nous pourrions exécuter le window.console.log («Hello World»); Code JavaScript dans le Scratchpad pour imprimer un message de développeur sur la console. Les développeurs Web peuvent intégrer ces messages dans leur code JavaScript pour faciliter le débogage.
À partir de Firefox 10, la console Web peut fonctionner en tandem avec l'inspecteur de page. La variable $ 0 représente l'objet actuellement sélectionné dans l'inspecteur. Ainsi, par exemple, si vous souhaitez masquer l'objet actuellement sélectionné, vous pouvez exécuter $ 0.style.display = "aucun" dans la console.
Obtenez plus d'outils
le Obtenez plus d'outils Cette option permet d’accéder à la collection de modules complémentaires de Web Developer’s Toolbox sur le site Web des modules complémentaires de Mozilla. Il contient certains des meilleurs add-ons pour les développeurs Web, y compris Firebug et la barre d'outils de développeur Web.
Si vous utilisez Firefox depuis quelques années, vous vous souvenez peut-être de l'inspecteur DOM. Les outils de développement intégrés de Firefox ont parcouru un long chemin depuis lors.
