Pour fonctionner, le script nécessite d'insérer quelques commentaires HTML dans le code généré, qui seront utilisés pour visualiser facilement les blocs dans le navigateur.

Côté serveur; dans la fonction chargée de l'affichage du template name, si le debug des templates est activé, j'encadre le code retourné par deux commentaires qui contiennent un identifiant unique avec un préfixe (ici debugt):

if (config("DebugTemplate") == "true") {
    $debugid = uniqid("debugt-");
    $res = "<!-- TEMPLATE DEBUG START for $name $debugid -->" . $res . "<! TEMPLATE DEBUG END for $name $debugid >";
}
return $res;

Ensuite, il "suffit" d'exécuter quelques lignes de JavaScript (via une bookmarklet ou une commande Ubiquity qui recherchent tous les commentaires (via un XPath), extraient la portion de code qu'ils encadrent en utilisant l'identifiant unique, et font apparaître visuellement ces blocs. Pour déterminer la taille et la position des blocs, j'utilise les coordonnées et la taille des premiers et derniers éléments à l'intérieur des commentaires.

Le script est attaché au billet, je vous laisse le lire et l'adapter à vos besoins. Virez les commentaires, compactez-le, etc.

Pour l'utiliser comme bookmarklet, déposez le script sur un serveur et créez un marque page contenant le script suivant:

 javascript:(function(){var _s=document.createElement('script');_s.setAttribute('src','http://url/xxx.js');document.getElementsByTagName("body")0.appendChild(_s);})()

en remplaçant xxx.js par l'adresse de votre script.

Pour l'utiliser avec Ubiquity, reprenez simplement le code de la fonction dans une commande.

Evidemment, je doute que le script fonctionne avec un autre navigateur que Firefox 3, si vous l'adaptez pour Webkit n'hésitez pas à me le signaler.

Des questions ?