10 raisons pour lesquelles vous devriez utiliser Firebug

Firebug est l'un des outils les plus populaires utilisés par les développeurs Web. Dans cet article, nous allons examiner de plus près dix de ses caractéristiques les plus attrayantes..

1. console

La première chose que vous remarquerez lors de l’ouverture de Firebug (soit du
barre d’état ou en utilisant la combinaison de touches ctrl + F12) constituera le panneau de la console. Après un rapide coup d’œil, on pourrait penser qu’il s’agit d’une version alternative de la console d’erreur.
(Ctrl + Maj + J). Les caractéristiques communes entre les deux sont:

• enregistrement des erreurs, avertissements et avis
• capacité à exécuter du code Javascript

Mais Firebug étend la fonctionnalité de Firefox, donc il peut faire
beaucoup plus, comme:

• erreurs de journalisation pour Javascript, CSS, XML, XMLHttpRequest (AJAX) et
  Chrome (Firefox en interne)
• exécuter du code Javascript sur la page Web actuelle
• un objet Javascript supplémentaire est mis à disposition (console)

Regardons quelques exemples construits sur l'objet console. Imaginez courir le
fichier HTML suivant.

Cela va générer le résultat suivant.

2. HTML

Le deuxième panneau, et celui dans lequel je suis sûr que vous allez dépenser beaucoup
de temps, est divisé en plusieurs sections que nous allons passer en revue ci-dessous.

1. Ce bouton est équivalent à l'élément "Inspecter" d'une page Web.
   menu contextuel. En plus d’être utile pour choisir rapidement des éléments dans une page,
   il décrit également l'élément actuellement sélectionné.
2. Dans cette section, nous avons la hiérarchie de la
   élément sélectionné et la possibilité d'effectuer une série d'actions (sur chaque
   composant individuel de la hiérarchie), comme:
   • copier du HTML interne
   • créer des expressions XPath
   • attacher un observateur d'événements (et se connecter au panneau de la console)
   • suppression d'élément
   • élément d'édition et nœuds enfants
   • déplacement de l'élément dans l'onglet DOM pour inspection
3. La fenêtre principale du panneau; utile pour traverser la
   Document HTML, modification rapide du code et repérage du code erroné (comme
   fermer une div trop tôt). Le menu contextuel offre le même ensemble de fonctionnalités
   comme la section no. 2
4. Dans cette section, le style calculé de la page ou de l’élément en cours est
   affiché. La possibilité de modifier activement les styles et d'inspecter les CSS
   l'héritage sont ses caractéristiques les plus précieuses.
5. A travers cette section, on peut facilement examiner le modèle de boîte de
   un élément: taille du contenu, remplissage, décalages, marges et bordures.

6. La section DOM lors de l’accès génère une liste de tous les objets actuellement
   éléments, méthodes et propriétés sélectionnés.

3. CSS

La principale différence entre ce panneau et la section Style sous HTML est
qu'ici vous pouvez travailler sur des styles non calculés. Je vais décrire et numéroter les sections
(et caractéristiques cette fois).

1. Si la page sur laquelle nous travaillons contient plusieurs feuilles de style, nous pourrons alors sélectionner la feuille de style souhaitée..
2. La région principale où le code CSS est affiché.
3. Modifiez facilement les propriétés CSS.
4. Règles CSS facilement dissables.

4. Script

Parfois, lorsque vous écrivez du code Javascript, vous devez vous mettre la main à la pâte
sale. La plupart du temps, vous vous retrouverez à travailler avec le
Panneau de la console; ce n'est que dans des conditions extrêmes que cela vous fera sauter au script
panneau. Compte tenu de ces conditions extrêmes (qui ne manqueront pas de se produire), examinons ce panneau et commençons à nous familiariser avec ce dernier..

1. Bouton déroulant permettant de sélectionner le fichier de script souhaité.
2. Fonctions de débogage: continuer, intervenir, enjamber
   et sors. Ils n’interviennent que lorsque l’exécution de code atteint un
   point d'arrêt.
3. Fenêtre principale. Ici, nous définissons (et supprimons) les points d'arrêt, ainsi que d'inspecter
   Code javascript.
4. Semblable au panneau DOM, la section Watch imprime des méthodes d'objet
   et paramètres pour le code de débogage en cours.
5. Montre l'empilement de fonctions en temps réel.
6. Liste des points d'arrêt actuellement actifs. Seule la suppression des points d'arrêt peut être effectuée
   d'ici.

5. DOM

Identique à HTML-> DOM. Étant donné que rien ne diffère de ce qui a été mentionné précédemment, nous allons passer à la section suivante.

6. Net

Curieux combien de temps votre page a été chargée? Ou est-ce que tu
Vous voulez savoir quelle demande prend le plus de temps? Heureusement, cela aussi peut être accompli via le panneau Net.

1. Les demandes peuvent être filtrées en fonction de leur type.
2. Chaque demande est présentée dans cette section. À la fin de la liste des demandes
   nous en voyons un résumé: nombre de demandes, taille, combien a été mis en cache
   déjà et le temps total qu'ils ont pris pour terminer.
3. Plus de détails peuvent être révélés, comme: en-têtes HTTP, réponse et cache (idem
   comme réponse)

Test de performance

Besoin de tester les performances d'une fonction ou d'une boucle spécifique? Utilisez la fonction "timer" du Firebug.

 fonction TimeTracker () console.time ("MyTimer"); for (x = 5000; x> 0; x -)  console.timeEnd ("MyTimer"); 

Trois pas. Nous commençons par appeler "console.time" et nous transmettons une clé unique. Ensuite, nous insérons notre code. Enfin, nous appelons console.timeEnd et, une fois encore, nous passons notre clé unique.

7. référence

Ceci est un panneau supplémentaire fourni par CodeBurner, un Firebug
Ajouter. Comme son nom l’indique, ce panneau vous permet d’accéder rapidement à votre code HTML.
et le code CSS. Même si le panneau s’explique de lui-même, nous examinerons quand même
il.

1. La section recherche et filtrage.
2. Ici les résultats s'empilent, dans notre cas il n'y a qu'un seul résultat.
3. Panneau de compatibilité pour les dernières versions majeures du navigateur. Oui, Chrome est
   pas dans cette liste, mais Chrome utilise le même moteur que Safari, à savoir Webkit, donc si
   compatible Safari, il fonctionnera également dans Chrome.
4. Et si les informations affichées dans ce panneau ne suffisent pas, vous pouvez trouver plus d’informations en accédant à ce lien, comme par exemple: exemples, compatibilité dans plusieurs navigateurs
   versions, description, etc.

8. PixelPerfect

Si vous avez déjà effectué le découpage PSD, vous savez combien de temps la mesure prend
de l'espacement entre les éléments de composition peut être. C’est là que PixelPerfect prouve que c’est
Puissance. Avoir cet add-on dans votre boîte à outils vous aidera à réaliser la tranche parfaite.

1. Avec ce bouton, nous pouvons ajouter plusieurs images de surimpression pour la page en cours..
2. Liste des superpositions, à partir de là, nous appliquons ou supprimons la superposition.
3. Section des paramètres de superposition.

9. YSlow

Un autre module complémentaire Firebug développé par Yahoo !, qui peut suggérer des améliorations de la vitesse
sur la base d'une série de tests effectués.

Grâce à YSlow, nous pouvons évaluer les performances globales de notre site Web. Nous pouvons facilement
repérer les problèmes qui peuvent être améliorés et une série de recommandations sont disponibles
ainsi que.

Outre les statistiques circulaires, nous disposons également de JSLint et Smush.it..

10. FirePHP

FirePHP est notre dernier composant important de Firebug. Avec ça
add-on, nous pouvons envoyer des informations de manière transparente (avertissements, erreurs, journalisation, informations)
au panneau de la console à partir de notre code PHP. Exemple d'utilisation du site Web de FirePHP:

Fermeture

J'espère que cette petite liste de panneaux / additifs Firebug rendra votre vie plus facile
personne web plus facile - comme il me l'a fait. En fin de compte, nous savons tous que
il y a forcément des bugs, il n'y a donc aucune excuse pour ne pas être préparé.

Suivez ces liens pour télécharger les add-ons:

• Pyromane,
• CodeBurner,
• Pixel-parfait,
• YSlow
• FirePHP