Comment optimiser un site Web à l'aide du plugin Firebug

Pyromane est un plugin ou une extension Firefox créé pour pouvoir tester le code et effectuer des optimisations lors de la programmation d'un site Web. C'est un ensemble d'outils avec lesquels vous pouvez analyser la vitesse de chargement des différents éléments qui composent le web, la structure du web. modifier, trouver des bogues, déboguer le code source et voir comment le code fonctionne CSS, HTML ou alors JavaScriptNous pouvons également éditer ou modifier n'importe quel aspect et il sera prévisualisé immédiatement.

Pyromane est un excellent complément pour accompagner un autre plugin comme Développeur web. Son interface est facile à utiliser et ne s'active que lorsque nous en avons besoin, et elle est également gratuite. Le but de ce tutoriel est de montrer une utilisation détaillée et professionnelle de Pyromane, nous pouvons également voir d'autres tutoriels Firebug Web Developer Tool et Inspect HTML with Firebug.
Pyromane C'est un outil indispensable pour ceux qui programment ou optimisent des sites web, qu'ils soient designers ou webmasters. Ainsi, nous pouvons éliminer les échecs de programmation ou de conception, savoir comment ils fonctionnent et à quoi ressemble la structure d'une page Web, comment tous les éléments qui la composent.
Nous installons le plugin Firebug
Pour installer le plugin, nous allons sur le site de téléchargement de firebug et là nous recherchons la dernière version de l'outil à télécharger.

Après l'installation, nous redémarrons l'ordinateur et nous verrons qu'il est ajouté lors du démarrage d'un site Web, pour l'activer, nous faisons un clic droit et cherchons l'option Inspecter l'élément:

Une fois l'outil activé, voyons les fonctionnalités les plus importantes :

Onglet Console

Console Pyromane C'est là que les messages de ce que fait le Web et les erreurs qui se produisent seront affichés. Nous pouvons voir des messages sur les appels à des fonctions ou des pages que le Web effectue au fur et à mesure que nous interagissons, nous montrant des fonctions, des appels de rappel ou de services Web et les valeurs qui sont échangées au moment de l'exécution tout en contrôlant le flux de l'application.
Voyons quelques exemples, nous accédons au web motores.com.ar, nous faisons un clic droit et activons Pyromane.

Dans l'onglet console lors d'une recherche de marques, nous verrons que la console indique qu'une fonction est invoquée en Ajax qui interrogera une base de données à l'aide de php et renvoie les modèles au format JSON et les ajoute à la liste déroulante Modèles. Nous pouvons également voir le paramètres envoyés, l'en-tête renvoyé par get ou post et la réponse. Regardons un autre cas d'une boutique en ligne.

Dans ce cas, nous voyons que la console indique que trois polices ou polices sont manquantes dans le dossier /css/font, peut-être que le concepteur a oublié de les ajouter ou de modifier les polices et n'a pas supprimé les références précédentes.
Nous pouvons également voir comment, lors de l'ajout d'un produit au panier, il envoie les paramètres suivants : fonction, quantité de produit et identifiant du produit.

 La fonction Ajax invoquée insertItem ne peut pas 1 Id 5850326

Bien que nous puissions voir qu'il ne sera ajouté que si nous sommes connectés en tant qu'utilisateurs, sinon il nous demandera de nous inscrire.
Ainsi, nous pouvons voir comment fonctionne l'application et quel paramètre elle envoie ou reçoit et quelles réponses elle fournit et quel a été le temps de réponse, par exemple pour ajouter un produit qui a pris 335 millisecondes.

Onglet HTML

vous permet de voir la structure du Web et de modifier le code de la page Web en temps réel. On peut par exemple modifier le code HTML du site ou du code css et le visualiser directement sans que ces changements soient permanents. Par exemple, si nous accédons au site Web d'Ebay, nous pouvons utiliser Firebug pour changer la couleur du bloc de contenu principal ou Web.

Pour cela, depuis l'onglet HTML on cherche la ligne de code HTML qui ressemble à ceci :

Dans le panneau de droite Style Cela nous montrera le style css de cet élément, nous double-cliquons sur la ligne suivant la phrase largeur: 980px et nous écrivons ceci :

 arrière-plan : rouge aucun répéter défilement 0 0;

Lorsque vous aurez fini d'écrire, le bloc central deviendra rouge, si nous mettons à jour la page, les modifications seront perdues et elle reviendra à son design d'origine.
On peut aussi essayer de manipuler le code html et le code css pour changer le logo Ebay pour celui de Google, cela se fait en changeant l'url de l'image du logo Ebay pour une autre url d'une image que l'on veut.

On cherche la ligne de code dans le HTML et on change le lien src = ”urlimagen», Ensuite, nous ajustons les tailles

Cette fonctionnalité ne fonctionne pas pour modifier une conception complète mais pour faire de petits tests et visualiser les modifications, sans avoir à accéder à un éditeur.

Onglet CSS

L'onglet du panneau CSS Il montre toutes les classes CSS et les identifiants que nous créons ou que possède le site Web que nous analysons. Depuis ce panneau, nous pouvons modifier nos classes et nos phrases css comme nous l'avons fait précédemment dans l'onglet Styles du panneau HTML.

Onglet Script

Ce panneau est pour le débogage du code JavaScript ou alors jQuery. Il nous montre tout ce que fait un script, ses variables, ses fonctions, le débogage par points d'arrêt, l'exécution pas à pas d'un script, un écran pour contrôler la pile de variables et nous pouvons également voir le comportement des fonctions.

Onglet DOM

Le panel SOLEIL ou alors Mode objet documentC'est lui qui obtient des informations sur toutes les différentes propriétés du DOM et leurs méthodes. Le DOM fait partie des éléments d'un site Web et permet aux programmeurs d'accéder et de manipuler des pages Web XHTML.
JQuery fournit des méthodes pour manipuler efficacement le DOM. Nous pouvons accéder à n'importe quel attribut de n'importe quel élément ou extraire le code HTML d'un paragraphe ou d'un bloc. En plus de cela, il fournit des méthodes telles que .attr (), .HTML (), Oui .val () Ils agissent en tant que getters et récupération d'informations à partir d'éléments DOM pour une utilisation ultérieure.
Voyons dans cet exemple jQuery et DOM comment contrôler un div et extraire un texte :

 Jquery et DOM
Extraire le texte du bloc :

Ceci est un texte de test DOM

Les balises HTML L'élément est accessible via la classe ou l'identifiant css, puis la propriété qui peut être du texte ou une autre qui autorise jQuery et DOM.

Onglet Réseau

L'objectif du panneau Réseau est de surveiller le trafic Web et la charge et la consommation de chaque requête Web HTTP, ce rapport est composé d'une liste d'entrées, où chacune d'entre elles représente une requête/réponse aller-retour effectuée par la page.
La fenêtre du panneau réseau présente une liste de demandes, au fur et à mesure que le Web est chargé et utilisé. Chaque élément de la liste affiche les informations produites par la demande et une chronologie graphique montre les octets consommés, le temps nécessaire pour répondre, ce qui représente les phases de chargement dans le temps. Voici une liste des informations qui s'affichent pour chaque demande :

• Méthode de requête HTTP
• Code de réponse HTTP et description (200 301 404, etc.)
• Nom de fichier invoqué
• Nom de domaine d'où provient la réponse
• Taille de la réponse en octets
• Temps en millisecondes nécessaire pour répondre.

Nous pouvons également filtrer pour voir les pièces uniquement sous forme d'images ou uniquement de fichiers js ou css et ainsi déterminer ce qui pèse le plus et comment l'optimiser.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif