Firefinder: CSS-Selektoren auf der Spur

Im Buch habe ich eine sehr ausführliche Anleitung zu Firebug verfasst, weil es nach meiner Meinung das momentan wichtigste Hilfsmittel für Webentwickler darstellt. Insbesondere in Verbindung mit dem Zusatzprogramm CodeBurner bietet es wirklich alle notwenigen Tools aus einem Guss.

Nun gibt es für Firebug ein weiteres Zusatzprogramm namens Firefinder, mit welchem man CSS-Selektoren auf einer Website suchen und mithilfe eines farbigen Rahmens sichtbar machen kann. Zusätzlich werden die gefunden Einträge gezählt und aufgelistet.

Zur Erinnerung: Der Selektor bestimmt (selektiert), auf welche HTML-Elemente (rechteckige Kästen) sich die Regel bezieht.

Ein Beispiel: Sie möchten nachvollziehen, wo und wieoft auf einer Website Absätze verwendet wurden. Öffnen Sie Firebug und wechseln Sie auf den neuen Tab Firefinder [1]. Im Suchfeld [2] tippen Sie “p” ein und drücken den Button CSS filter [3]. Als Ergebnis wird Ihnen nun die Anzahl der Elemente die den Selektor verwenden angezeigt [4] und aufgelistet [5], und in der Website die Elemente farblich eingerahmt [6]. Die im unteren Bereich aufgelisteten Elemente [5] lassen sich mit einem Klick auf selbige aufklappen, und es wird der reine Textinhalt (inklusive Hyperlinks) angezeigt. Wenn Sie mit der Maus über ein aufgelistetes Element [5] fahren, wird es oben optisch besonders hervorgehoben.

Anmerkung: Die auf dem Screenshot sichtbare Website entstammt dem To-Do 53 aus dem Buch.

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

, ,

Ebenfalls Lesenswert:

Trackbacks/Pingbacks

  1. CSS einfach erklärt » Unbenutzte CSS-Selektoren finden - 1. Oktober 2009

    [...] Wer zielgerichtete CSS-Selektoren aufspüren möchte, der sollte sich einmal Firefinder [...]

Hinterlasse eine Antwort