YAML Debug is ...

... an assistive tool for web developers, that allows you to quickly review code quality and semantic structure of any website (particularly those based on YAML) as well as testing it against common oversights.

This tool is not intended to be a reliable test environment for the accessibility of websites!

Supported Browsers

YAML Debug fully supports Firefox 3.x, Opera 9.x and Webkit browsers. There are some minor problems with Safari 3.x, which doesn't allow disabling imported style sheets.

There is only limited support for Internet Explorer 7 due to the fact that most highlighting features are based on CSS 2.1 selectors.

Get the Bookmarklet

Drag the following link to your favourites (or right-click and choose: «add to favourites» in the context menu)

YAML Debug

Version: 0.9.3 beta (open beta test)

Features

Webpage Information

YAML Debug informs you whether your webpage will be rendered in Quirks Mode or in Standard Mode, based on the detected Doctype (including experimental detection for HTML 5). It detects the content encoding and counts all external style sheets, script elements and images on your webpage.

Code Quality Tests

You can check your webpage against missing or empty alt attributes in <img> elements, deprecated HTML elements (based on HTML 4, appendix A3.1.2), find empty elements (e.g. <p></p>) and elements that contain inline styles (e.g. style="color: #f00").

Stylesheet Options

In the style sheet tab, all external and embedded style sheets are listed in source order. By clicking on a style sheet, it can be disabled or enabled. Furthermore you can view every external style sheet or send it directly to the W3C CSS validation service.

Information: Based on the location of the stylesheet you want to view, YAML Debug offers a syntax highlighted view (located on the same domain) or it opens a popup window (cross domain location), because of limitations of Ajax requests. The popup display is only available in Mozilla browsers.

Content & Screen Layout Tests

YAML Debug lets you easily visualize the semantic code structure of any webpage, giving you a quick overview whether it has meaningful semantics or not. The layout structure visualizes the skeleton of your screen layout (based on <div> elements), including special highlighting for YAML's subtemplates and .floatbox classes. Additionally you can add a background grid to <body> to test your webpage against typical viewport sizes.

Accessibility Tests

Although this tool is not intended to be a reliable accessibility test, these features can help web developers to detect accessibility issues on their webpages. YAML Debug allows to show title and lang attributes, highlights named anchors and especially marks those, that are referenced from within the same webpage (e.g. skip links).

The WAI-ARIA option shows all defined ARIA roles, states and properties on your webpage. If an element contains one of the properties aria-describedby, aria-labeledby or aria-owns, the related elements will also be highlighted when hovering over these properties.

Hyperlinks

Finally, the URLs of hyperlinks can be displayed.

Feedback

If you have any comments, bug reports or feature requests, please let me know.

ToDo

This is the first public beta release. Therefore there might be some bugs left that will have to be fixed in the first. Besides this, I count on your feedback to add more features to this small tool.

Thanks go to ...

It's always a good idea to say thank you to somebody ...

Donation

Well, if you are highly pleased with tool and you want to support its further developlement (or just do me a flavor), perhaps you would like to take a look at my Amazon wish list?