Firebug, plugin firefox pour drupal

Firebug est un plugin pour firefox, semblable à web developper ou DragonFly (intégré à opera). F12 pour l'afficher.

Si le site drupal a le module Drupal for Firebug (drupalforfirebug) configuré, le navigateur aura l'onglet "drupal" fonctionnel.
Il existe aussi FireCompass for Firebug 2.0 pour l'aide Compass/SASS

onglet css

Le bouton CSS présente une liste: "Expand ShortHand Properties" permet une meilleur lisibilité (par ex les padding- 1 par ligne, au lieu de tout sur 1 ligne).

A gauche, 2 genres de mode d'édition (modification): soit en Source Edit = le fichier d'origine (avec commentaires) ; soit en Live Edit = vu par le browser (reformatté, sans commentaires).
Juste à sa droite (liste nommée comme node) "CSS Location Menu": tapper le nom du modèle pour restreindre la liste des feuilles de styles.

Un clic droit sur un stylecss, clic droit.

Clic droit / "Get matching element"  affiche sur le panneau de droite "Selectors" firebug, regarder les CSS - selector, y faire un clic droit pour voir le menu, 1 clic gauche envoie à l'onglet HTML (au bon endroit).

Doc officielle à https://getfirebug.com/wiki/index.php/CSS_Panel

 

 

 

 

onglet html

firebug, regarder les CSSA droite, les styles (ici, on a ouvert une page book, dont en bas, on a sélectionné la navigation du livre => book.css du module du core).
Ce bouton présente une liste, dont:
* "Expand ShortHand Properties"
* "Only Show applied styles"
qui permettent une meilleur lisibilité.

 

 

 

 

Pour chrome : https://chrome.google.com/extensions/detail/imlijcpfmhmifofiihbofoamohkdbblc

DL la dernière version du plugin (pour firefox) à https://bitbucket.org/frob/drupalforfirebug/downloads

Fichier attachéTaille
Image icon firebug.png19.9 Ko