Outil de développement Web Firebug

C'est un ensemble d'utilitaires avec lesquels vous pouvez analyser et tester la vitesse de chargement en fonction de chaque composant, fichier, nous pouvons également éditer, surveiller et déboguer le code source, CSS, HTML et Javascript d'une page Web instantanément et en temps réel observer les changements sur le Web. Il sert également à analyser le comportement d'une variable ou d'une url avec des paramètres, pouvant voir quels paramètres sont envoyés et ce que le serveur répond.
Certaines des fonctionnalités qu'il apporte Pyromane:

• Édition HTML en temps réel.
• Édition CSS en temps réel.
• Édition Javascript en temps réel.
• Mise en page CSS.
• débogueur Javascript.
• Moteur de recherche intégré.
• Suivi de l'activité du réseau.
• Explorateur DOM.
• Gestionnaire d'erreurs en Javascript, CSS et XML

Nous allons commencer par télécharger et installer le plugin Pyromane:
[color = # 2f4f4f] Télécharger Firebug [/ color]

À partir du site Web des modules complémentaires de Mozilla, nous serons autorisés à accéder et à installer le module complémentaire
Une fois Firebug installé et Firefox redémarré, nous pouvons accéder rapidement à Firebug en faisant un clic droit sur l'écran du Web sur lequel nous voulons travailler ou depuis le menu outils
On prend le web de l'exemple des nations unies http://www.un.org/en/, on fait un lic droit sur l'écran et un écran avec Firebug va s'ouvrir.

AGRANDIR

Dans ce cas, dans l'onglet réseau, nous voyons le poids en ko et dans quel ordre le navigateur a rendu les éléments et combien de temps il a fallu à chaque élément pour s'afficher, il est intéressant de noter que sur les 6,61 secondes qu'il faut à la page pour render, deux secondes correspondent à une seule image, qui est la barre de langue, alors on pourrait penser si elle peut être optimisée.
Dans l'onglet HTML et CSS, nous pouvons pointer sur un bloc de la structure et il nous montrera le code.

AGRANDIR

Ici, par exemple, nous pointons sur la div de bannière supérieure qui correspond à l'identifiant #topbanner dans le fichier style.css. Si nous cliquons sur le code css, nous pouvons le modifier et cela se reflétera temporairement sur le Web. L'onglet console est celui qui nous permettra de voir et de surveiller les invocations javascript et les erreurs en cas d'échec. En cas d'erreur, il affichera les fichiers et le numéro de la ligne de code où l'erreur se produit.

AGRANDIR

Pyromane nous aide à trouver rapidement des objets DOM, puis à les modifier à la volée. Permet d'effectuer l'inspection DOM.
Le Modèle d'objet de document ou DOM (« Modèle d'objet de document » ou « Modèle d'objet pour la représentation de document ») il s'agit essentiellement d'une interface de programmation d'applications qui fournit un ensemble standard d'objets pour le rendu de documents HTML et XML.