Un outil pour l'intégration Web : Yaml Debug

L'outil modifie l'affichage et les contenus d'une page Web pour mettre en évidence sa structure : noms des balises HTML, organisation des div, accessibilité, etc.

Dirk Jesse, à l'origine du "framework" HTML-CSS Yaml, propose depuis mi-février un outil nommé Yaml Debug. Ce dernier propose quelques fonctionnalités intéressantes proches de celles de l'extension Web Developer de Chris Pederick.

Un "bookmarklet" pour tous les navigateurs modernes

Un avantage de Yaml Debug : il fonctionne comme un bookmarklet, c'est-à-dire un code JavaScript court enregistré comme marque-page (ou favoris ou signet) du navigateur.

our la petite histoire, lorsqu'on se trouve sur une page et qu'on clique sur le marque page, le code JavaScript du bookmarklet va récupérer un script JavaScript plus imposant qui constitue l'application elle-même. Le script est exécuté directement dans la page Web sur laquelle on travaille.

Ce fonctionnement lui permet de fonctionner avec de nombreux navigateurs récents : Firefox, Safari, Opera, et même Internet Explorer 7 dans une certaine mesure. C'est aussi le cas d'un autre outil disponible comme bookmarklet : Firebug lite (le petit frère de l'extension pour Firefox du même nom).

Installation de YAML Debug

Sur la page (en anglais) consacrée à Yaml Debug, il faudra enregistrer le lien "Yaml Debug" dans la colonne en haut à droite comme marque-page/favori/signet. Vous pouvez aussi le faire glisser directement vers votre barre de marque-pages. Attention, ce lien n'est pas très visible dans la page !

Fonctionnalités

C'est un outil relativement simple, et le plus simple est encore de l'essayer et de faire le tour des fonctionnalités. Cela devrait vous prendre quelques minutes, une dizaine tout au plus.

Yaml Debug fait penser non pas à Firebug, mais à certaines fonctions de Web Developer : il modifie l'affichage et les contenus de la page pour mettre en évidence le nom des balises HTML, la structure des div, etc.

Yaml Debug permet aussi de mettre en évidence quelques points en rapport avec l'accessibilité : attributs alt vides ou manquants (une distinction entre les deux aurait été utile...), présence d'attributs de rôle Aria, etc. L'auteur nous avertit que Yaml Debug n'est pas un outil de test ou de validation de l'accessibilité, mais ces quelques fonctionnalités sont appréciables.

Yaml Debug permet enfin d'avoir accès directement aux différents fichiers CSS (dans la page, en fausse pop-up, avec coloration syntaxique !). On peut aussi, en cliquant sur le nom d'un fichier CSS, désactiver l'application des styles de ce fichier, ce qui peut être très utile dans certains cas.

Article publié sous licence Creative Commons par Florent V.  sur le site du collectif Alsacreations.