A tool for web integration: Yaml Debug


The tool modifies the display and contents of a Web page to highlight its structure: HTML tag names, div organization, accessibility, etc.

Dirk Jesse, at the origin of the HTML-CSS Yaml framework, offers since mid-February a tool named Yaml Debug. The latter offers some interesting features close to those of the Web Developer extension by Chris Pederick.

An advantage of Yaml Debug: it works like a bookmarklet, that is to say a short JavaScript code saved as a bookmark in the browser.

For the record, when you are on a page and you click on the bookmarklet, the JavaScript code of the bookmarklet will retrieve a larger JavaScript script that constitutes the application itself. The script is executed directly in the Web page on which we work.

This operation allows it to work with many recent browsers: Firefox, Safari, Opera, and even Internet Explorer 7 to some extent. This is also the case of another tool available as a bookmarklet : Firebug lite (the little brother of the Firefox extension of the same name).

Overview of the display of a CSS file with Yaml Debug. Yaml Debug

On the Yaml Debug page, you will have to save the “Yaml Debug” link in the top right column as a bookmark/favorite/bookmark. You can also drag it directly to your bookmarks bar. Be careful, this link is not very visible in the page!

It’s a relatively simple tool, and the easiest thing to do is to try it out and see what it does. It should take you a few minutes, about ten at the most.

Yaml Debug is not like Firebug, but like some features of Web Developer: it modifies the display and the contents of the page to highlight the name of HTML tags, the structure of divs, etc.

yaml debug 2
Overview of the Debug Options tab of Yaml Debug. Yaml Debug

Yaml Debug also allows to highlight a few points related toaccessibility: empty or missing alt attributes (a distinction between the two would have been useful…), presence of Aria role attributes, etc. The author warns us that Yaml Debug is not a tool for testing or validating accessibility, but these few features are appreciable.

Finally, Yaml Debug allows you to have direct access to the different CSS files (in the page, in a fake pop-up, with syntax highlighting!). You can also, by clicking on the name of a CSS file, disable the application of the styles of this file, which can be very useful in some cases.

Article published under Creative Commons license by Florent V. on the Alsacreations collective website.


Leave a Comment