YAML Debug - Öffentlicher Betatest http://www.highresolution.info/weblog/entry/yaml_debug_oeffentlicher_betatest/ 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. de-de Dirk Jesse Copyright 2009 2009-02-16T;10:10:43+00:00 Kommentar von Dirk Jesse http://www.highresolution.info/weblog/entry/yaml_debug_oeffentlicher_betatest/ @Jared Danke für den Hinweis. Ist korrigiert. @Jared

Danke für den Hinweis. Ist korrigiert.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Jared http://www.highresolution.info/weblog/entry/yaml_debug_oeffentlicher_betatest/ 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? 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?

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Ansgar Hein http://www.highresolution.info/weblog/entry/yaml_debug_oeffentlicher_betatest/ 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. 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.

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Dirk Jesse http://www.highresolution.info/weblog/entry/yaml_debug_oeffentlicher_betatest/ 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 :-). 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 :-).

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Thomas Weise http://www.highresolution.info/weblog/entry/yaml_debug_oeffentlicher_betatest/ 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! 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!

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Martin Grandrath http://www.highresolution.info/weblog/entry/yaml_debug_oeffentlicher_betatest/ Eine tolle Ergänzung zu Firebug.&nbsp; 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. 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.

]]> 2012-01-18T;11:39:34+00:00