16. Februar 2009
YAML kommt bereits seit einigen Versionen mit einem speziellen Debug-Stylesheet daher, welches einerseits ermöglicht, die Layoutstruktur zu visualisieren, andererseits auch darüber Auskunft gibt, ob die CSS-Datei iehacks.css im Internet Explorer korrekt eingebunden ist. Ebenfalls seit einiger Zeit liegt das Debug-Stylesheet dem Downloadpaket bei, sondern es konnte auch über ein kleines Bookmarklet in jede beliebige Seite eingebunden werden. So schön der Gedanke auch ist, so unübersichtlich ist das Ergebnis, wenn ein solches Debug-Stylesheet zuviele Informationen enthält. Deshalb habe ich im Verlauf der letzten Wochen YAML Debug vollständig überarbeitet und eine eigenständige Applikation daraus entwickelt.
Die neue Applikation basiert auf jQuery und wird per Bookmark auf jeder beliebigen Seite hinzugeladen. Die Funktionalität umfasst Informationen über den Rendering-Mode, die Anzahl eingebundener externer Stylesheets, Scripts und Bilder. Per Klick können veraltete Elemente oder auch Elemente mit Inline-Styles hervorgehoben werden. Ebenso ist es möglich, sich auf einen Klick einen Überblick über die Layoutstruktur (DIV-Verschachtelung) oder die semantische Auszeichnung der Inhalte direkt im Layout zu verschaffen. WAI-ARIA roles, states und properties können hervorgehoben werden, Relationen z.B. über aria-labelledby macht das Tool durch das Hovern mit der Maus über die jeweilige Eigenschaft sichtbar. Schließlich gibt YAML Debug auch Auskunft über alle eingebundenen Stylesheets. Alle externen Stylesheets können zudem deaktiviert, angezeigt oder direk an den Validierungsdienst des W3C gesandt werden.
Einen vollständigen Überblick über den Funktionsumfang gibt es auf der zugehörigen kleinen Microsite, die ich diesem Projekt spendiert habe. Von dort kann dann auch das Bookmarklet bezogen werden. Aus der Browserwelt werden momentan Firefox 3, Opera 9.x und Safari 3.x/Webkit voll unterstützt, wobei der Safari 3.x aktuell das Deaktiveren von per @import eingebundenen Stylesheets verweigert. Der Internet Explorer 7 erhält momentan nur eine sehr eingeschränkte Unterstützung. Hier habe ich mich aufgrund der doch umfangreichen Abweichungen vom Standard (sowohl bei CSS, als auch bei JavaScript) auf die Bereitstellung der Stylesheet-Infos beschränkt, um gerade bei YAML-basierten Layouts eine einfache Kontrolle der korrekten Einbindung der Patch-Dateien zu ermöglichen. Auf die JS-Nachprogrammierung der ansonsten per CSS funktionierenden Hervorhebungsoptionen habe ich zunächst verzichtet, da es sich bei YAML Debug um ein Markup-Analysetool handelt und dieser ist im Normalfall in allen Browsern identisch. Demzufolge sollte man für seine Tests einen der o.g. voll unterstützten Browser verwenden.
Ich wünsche Euch viel Spaß mit dem Tool und freue über jegliches Feedback, sowohl hier in den Kommentaren als auch über die Projektseite.
Für Feedback (Meinungen, Bugmeldungen oder Wünsche für weitere oder verbesserte Funktionen) habe ich auf der Projektseite ein Kontaktformular eingerichtet, von welchem ihr hoffentlich rege Gebrauch macht. Die aktuelle Version 0.9 ist noch im Betastadium und ich möchte durch den öffentlichen Test mehr Informationen und vor allem Featurewünsche sammeln, um das Tool Schritt für Schritt zu vervollständigen. Ab YAML 3.1.1 wird es im Übrigen auch das bisherige debug.css ablösen.
Nachtrag: Als Spielwiese eignen sich besonders gut die YAML-Layoutbeispiele oder die Seite Einfach für Alle, die bereits mit WAI-ARIA angereichert ist und sich daher die Funktionalität des Tools dort sehr schön testen läst.
Montag, 16.02.09 (15:30 Uhr)
Eine tolle Ergänzung zu Firebug. Vielen Dank dafür!
Ein Wishlist-item hätte ich: Beim “background grid” wäre es toll, wenn man die Schrittweite einstellen könnte, so dass man Spaltenabstände und -breiten bzw. Zeilenabstände prüfen könnte.
Dienstag, 17.02.09 (08:46 Uhr)
Eine feine Sache!
YAML-Debug setzt genau da an, was ich bisher bei der Webdeveloper-Toolbar noch vermisst hatte: mehrere Dinge in einem popupartigem, verkleinerbarem Fensterchen gleichzeitig testen zu können.
Gefällt mir sehr gut und da das Teil wohl noch erweiterbar ist könnte das ne echte Konkurrenz für die Webdeveloper-Toolbar werden.
Da hier Featurewünsche willkommen sind, möcht ich kurz im Stil von “wünsch dir was” paar Wünsche nennen:
-Javascript de/aktivierbar
-Styleinformationen anzeigen (sozusagen den “Style-Pfad”)
-Images ohne Dimensionen anzeigen
-Formularfelder füllen beim Testen
-weiß nich ob sowas machbar ist: beim Coden das Fenster automatisch aktualisieren lassen, wenn der Quellcode geändert wurde…
Eventuell an der jetztigen Version änderbar: beim Validieren der erkannten CSS-Dateien öffnet sich der Validator im selbem Fenster, dadurch ist dann YAML-Debug wieder weg, nach dem Zurückklicken.
Also, wie gesagt, ich find das Teil echt gut!
Dienstag, 17.02.09 (10:00 Uhr)
Hallo Thomas,
danke für die Hinweise. Zwei Deiner Wünsche sind bereits erfüllt. Zum einen öffnet sich der Validator jetzt in einem neuen Fenster und die Pfade der einzelnen Stylesheets werden bereits angezeigt, wenn Du mit der Maus über den Namen des Stylesheet hoverst und kurz wartest bis das Title-Attribut angezeigt wird.
JavaScript wird aus JavaScript heraus vermutlich nicht deaktivierbar sein. Spätestens beim Aktivieren gäbe es aber Probleme :-).
Dienstag, 17.02.09 (20:34 Uhr)
Mal wieder eine klasse Idee von Dir! Ein paar Kleinigkeiten hätte ich noch anzumäkeln, aber das ist (wie immer) Jammern auf höchstem Niveau und ohne Rücksicht auf Verluste:
- Validate und View-Links könnte man auf Wunsch oder standardmäßig in neuem Fenster / Tab öffnen lassen, ich will ja weiterprüfen und da kann der Validator im Hintergrund werkeln
- von den empty elements würde ich
< a name=“xyz” >ausnehmen- die Farben für das Hervorheben von Attributen sind ne gute Idee, aber ich würde noch eine zusätzliche Hintergrundfarbe definieren, falls es auf hellem Hintergrund steht
Und jaaaaaa, ich bekenne mich schuldig ... hätte ich Dir a) früher im Beta-Test und b) per Mail schicken können. Scusi.
Freitag, 20.02.09 (17:06 Uhr)
Hallo Dirk,
ich bin nach wievor von der Idee dieses Bookmarklets begeistert ;-) ein kleiner Fehler ist mir allerdings aufgefallen:
Wenn man das Background-Grid anzeigen lässt steht da 2mal nebeneinander die Auflösung 1680x1050 :-) Eigentlich kommt nach 1680x1050 doch die 1920x1200 oder?
Montag, 23.02.09 (23:12 Uhr)
@Jared
Danke für den Hinweis. Ist korrigiert.