Outil code => schéma de l'imbrication

Bonjour,

Je recherche un outil qui dessinerait les imbrications* d'un code sur base d'un fichier html préalablement uploadé.

Comme ceci :
http://www.alsacreations.com/xmedia/doc/full/html5-imbrication.png

Pouvez-vous me communiquer ce qu'il existe, sachant que je trouve la fonctionnalité "entourer" du module Firefox "Webdeveloper" un peu maigre et très peu claire?

Merci d'avance !
Modifié par Reka (29 Apr 2015 - 21:32)

A ma connaissance il n'y a pas d'outil qui fasse cela, tu peux toujours essayer en copie-collant ce bout de code dans la console javascript de ton navigateur (et appuyer sur entrer) :

Array.prototype.forEach.call(document.querySelectorAll('*'), function(el){
    var type = document.createElement('div');
    type.innerHTML = el.tagName;
    type.style.position = 'absolute';
    type.style.top = '0';
    type.style.left = '0';
    el.style.padding = '20px';
    el.style.border = '2px solid grey';
    el.style.background = 'white';
    el.style.position = 'relative';
    el.appendChild(type);
});

Merci Freez, je vais tester ça !