Design für Print und Web

Opera Developer Tools nutzen

23.04.2007 um 14:24 Uhr
Emersacker
abgelegt unter CSS-Tipps

Emersacker. In der neuesten Version 9.2 des Browsers Opera wurden die vom Opera-Entwicklerteam ursprünglich nur intern genutzten Toolbars zur Webentwicklung nunmehr fest integriert.

Diese für Webentwickler äußerst nützlichen Werkzeuge, die Entwicklungskonsole und das DOM-Schnappschuss-Tool, wurden im November 2006 erstmals der Öffentlichkeit vorgestellt und seitdem konsequent weiterentwickelt.

Beschreibung des Werkzeugs

Im DOM-Dokumenten-Baum im oberen Fenster des zweigeteilten Tools sind alle Dokumentknoten der aktuell geöffneten Webseite - auch die mit JS dynamisch generierten! - als anklickbare Verweise enthalten. Beim Anklicken wird das zugehörige Element auf der inspizierten Webseite automatisch einen Augenblick hervorgehoben. Durch das Klicken auf einzelne Karteireiter lassen sich nun im unteren Fenster des Tools zusätzliche Informationen über das ausgewählte Element aufrufen.

Für die CSS-Webentwicklung besonders praktisch sind die hinteren drei Karteireiter: CSS, Styles und Metrics.

Styles listet eine Kurzübersicht aller im Element gesetzten Style-Eigenschaften und der zugewiesenen Werte.

Eine weiter ausdifferenzierte Sicht auf das CSS-Verhalten liefert - in Form von Ausrissen aus dem Stylesheet - der Klick auf den Karteireiter CSS: hier erfahren wir, welche Eigenschaft das Element von welcher Regel erhält, überschriebene Eigenschaften sind als unwirksam besonders hervorgehoben, und auch die Eigenschaften, welche von den Elternelementen ererbt sind, werden als solche extra aufgelistet. Der Karteireiter Metrics versorgt uns mit Informationen über die grafischen Anzeigeigenschaften des ausgewählten Elements. Mittels einer grafischen Darstellung werden Randabstände, Ränder, Polsterung, Breite und Höhe auf einen Blick anschaulich gemacht; darunter die Hierarchie der Elternelemente und in tabellarischer Form die aktuellen JS-Positionseigenschaften (offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight).

Fazit

Mit den Webentwickler-Tools hat Opera jetzt faktisch mit Firefox gleichgezogen, für den es ja schon länger ein solches Werkzeug gibt. Da Opera aber in Bezug auf Konformität mit den Webstandards kein anderer Browser gleichkommt, werden in Zukunft womöglich mehr Webentwickler als bisher bei der Webentwicklung Opera den Vorzug vor Firefox geben.

Weiterführende Links

Kommentar: 1