Programm um auf ein Element wirkende css auszulesen?

[Thorwan]

Mahlzeit!

Ich habe nun schon länger keine Websites mehr gestaltet, habt deshalb etwas Nachsicht, wenn meine Erklärungen unzureichend sein sollten :).

Zum Thema: Ich verwende seit geraumer Zeit ein Wordpress Blog und möchte nun das von mir verwendete Theme verändern. Die Grafiken habe ich soweit fertig, nur die .css muss ich noch überarbeiten. Die zu dem Theme gehörige Datei ist jedoch alles andere als übersichtlich, deshalb kam ich auf folgende Idee:

Gibt es ein Tool (Mac wäre ideal, aber Windows ist auch ok), mit dessen Hilfe ich einfach auf ein Element im Browser klicken kann, und daraufhin spuckt er mir alle auf dieses Element wirkenden Styes aus (mit Zeilenangabe wäre ein Traum :))?

Ansonsten werde ich wohl in den sauren Apfel beißen und mein gutes altes Dreamweaver MX nochmal entstauben müssen...

[Kinman]

Tool kenn ich keines, aber mit Javascript sollte sich mit wenigen Zeilen etwas bewirken lassen (click Event und CSS-Klasse, ElementID bzw. style-Attribute auslesen)

mfg Kinman

[Sephiroth]

Live, also während du die Seite im Browser siehst, geht das mit den jeweiligen Browser inkl. etwaiger Erweiterungen

Firefox -> Dom Inspector (https://addons.mozilla.org/de/firefox/addon/6622) (oder auch Firebug (https://addons.mozilla.org/de/firefox/addon/1843))
Opera -> Dragonfly (http://dev.opera.com/articles/view/introduction-to-opera-dragonfly/)
IE -> IE Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?FamilyId=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en)
Safari -> Web Inspector

[DanMan]

Ich hätt jetzt auch FireBug empfohlen. Ein wirklich unglaublich mächtiges Tool.

[Thorwan]

Live, also während du die Seite im Browser siehst, geht das mit den jeweiligen Browser inkl. etwaiger Erweiterungen

Firefox -> Dom Inspector (https://addons.mozilla.org/de/firefox/addon/6622) (oder auch Firebug (https://addons.mozilla.org/de/firefox/addon/1843))
Opera -> Dragonfly (http://dev.opera.com/articles/view/introduction-to-opera-dragonfly/)
IE -> IE Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?FamilyId=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en)
Safari -> Web Inspector
Danke. Dragonfly hatte ich mir mal angesehen, aber ich konnte nichts finden um mir nur die Styles der gerade von mir auserkorenen Elemene anzeigen zu lassen. Aber ich bin sicher, eines der anderen hier genannten Tools wird das bewerkstelligen. Vielen Dank euch allen!

[BoneDaddy]

cssviewer für firefox

[Sephiroth]

Danke. Dragonfly hatte ich mir mal angesehen, aber ich konnte nichts finden um mir nur die Styles der gerade von mir auserkorenen Elemene anzeigen zu lassen. Aber ich bin sicher, eines der anderen hier genannten Tools wird das bewerkstelligen. Vielen Dank euch allen!
Auf das DOM-Tab wechseln und dann einfach das Element auf der Seite anklicken.

Du kannst auch die Dev Console (http://dev.opera.com/tools/) nutzen.
Dazu musst dir den Button erst zu einer Schaltfläche hinzufügen. Wenn du dann auf der Seite bist, klickst du einfach auf den Button und ein neues Fenster mit den DOM/JS/CSS Infos geht auf.