Quando si esegue il debugging di uno script jQuery è di fondamentale importanza tenere traccia degli elementi e della loro struttura. Una pratica raccomandata è quella di inviare dei messaggi alla console JavaScript del browser per ispezionare gli elementi, sia che essi siano stati creati dinamicamente sia che siano già presenti nella struttura del DOM. Vediamo come semplificare al massimo questo processo.
Possiamo creare il seguente plugin, log():
(function($) {
$.fn.log = function() {
var that = this;
var selector = that.selector;
var context = that.context;
var element = that[0];
var attrs = element.attributes;
var name = element.tagName.toLowerCase();
var contents = that.html();
var logContent = '';
return that.each(function() {
logContent += '[name]: ' + name;
logContent += ' [selector]: ' + selector;
logContent += ' [context]: ' + context;
logContent += ' [attributes]: ';
if(attrs.length > 0) {
for(var i = 0; i < attrs.length; i += 1) {
var attrName = attrs[i].name;
var attrValue = attrs[i].value;
logContent += attrName + ': ' + attrValue + ' ';
}
} else {
logContent += 'no attributes ';
}
logContent += ' [contents]: ' + contents;
console.log(logContent);
});
};
})(jQuery);
Questo semplice plugin invia alla console JavaScript il nome dell'elemento, il suo selettore, il suo contesto, i suoi eventuali attributi con i rispettivi valori e i suoi contenuti HTML.
Vediamo un esempio. Data la seguente struttura:
<ul id="test">
<li id="a" class="a" title="a">A</li>
<li>B</li>
<li id="c" class="c">C</li>
</ul>
Possiamo usare il plugin in questo modo:
$(function() {
$('li', '#test').each(function() {
$(this).log();
});
});
E avremo il seguente output nella console:
[caption id="attachment_1071" align="aligncenter" width="700" caption="L'output del plugin log() nella console del browser"]
[/caption]