13Sep
Le menu Web Developer de Firefox contient des outils d'inspection des pages, d'exécution de code JavaScript arbitraire et d'affichage des requêtes HTTP et d'autres messages. Firefox 10 a ajouté un tout nouvel outil Inspecteur et mis à jour Scratchpad.
Les nouvelles fonctions de développement web de Firefox, combinées à de formidables add-ons de développement web comme Firebug et la barre d'outils 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.
Page Inspector
Inspectez un élément spécifique en cliquant dessus avec le bouton droit de la souris et en sélectionnant Inspectez ( ou en appuyant sur Q ).Vous pouvez également lancer Inspector à partir du menu Web Developer.
Vous verrez une barre d'outils en bas de l'écran, que vous pouvez utiliser pour contrôler l'inspecteur. L'élément sélectionné sera surligné et les autres éléments de la page seront grisés.
Si vous voulez choisir un nouvel élément, cliquez sur le bouton
Inspecter dans la barre d'outils, passez votre souris sur la page et cliquez sur votre élément. Firefox met en surbrillance l'élément sous votre curseur.Vous pouvez naviguer entre les éléments parents et enfants en cliquant sur le fil d'Ariane dans la barre d'outils.
Inspecteur HTML
Cliquez sur le bouton HTML pour afficher le code HTML de l'élément actuellement sélectionné.
L'inspecteur HTML vous permet d'agrandir et de réduire les balises HTML, ce qui facilite la visualisation en un coup d'œil. Si vous souhaitez afficher le code HTML de la page dans un fichier à plat, vous pouvez sélectionner Afficher la source de page dans le menu Développeur Web.
CSS Inspector
Cliquez sur le bouton du style 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 les boutons et Properties. Pour vous aider à trouver des propriétés spécifiques, le panneau des propriétés inclut une zone de recherche.
Vous pouvez modifier les CSS de l'élément à la volée à partir du panneau Règles. Désactivez l'une des cases à cocher 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 la police : bold; Règle CSS, rendant le texte de l'élément en gras.
JavaScript Scratchpad
Le Scratchpad a également vu une mise à jour avec Firefox 10, et contient maintenant la coloration syntaxique. Vous pouvez taper du code JavaScript pour exécuter sur la page en cours.
Une fois que vous avez, cliquez sur le menu Exécuter et sélectionnez Exécuter. Le code s'exécute dans l'onglet en cours.
Console Web
La console Web remplace l'ancienne console d'erreurs, qui a été abandonnée et sera supprimée dans une future version de Firefox.
La console affiche quatre types de messages différents, vous pouvez basculer la visibilité des - demandes de réseau, messages d'erreur CSS, messages d'erreur JavaScript et messages de développeur Web.
Qu'est-ce qu'un message de développeur web? C'est un message imprimé sur l'objet window.console. Par exemple, nous pourrions lancer le fichier 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.
Actualisez la page et vous verrez les requêtes réseau générées et d'autres messages.
Utilisez la boîte de recherche pour filtrer les messages;cliquez sur une demande si vous voulez voir plus de détails.
Depuis 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 = "none" dans la console.
Si vous souhaitez en savoir plus sur l'utilisation de la console et de ses fonctions intégrées, consultez la page Web Console sur le site Web du réseau des développeurs de Mozilla.
Obtenir plus d'outils
Obtenir plus d'outils L'option vous amène à la collection de modules complémentaires de Web Developer 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 Web Developer.
Si vous utilisez Firefox depuis quelques années, vous pouvez vous souvenir de l'inspecteur DOM.Les outils de développement intégrés de Firefox ont parcouru un long chemin depuis lors.
