![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/n29bug.jpg\")
Con l’aumentare dei dispositivi mobili, lo sviluppo ed il debugging web \u00e8 divenuto pi\u00f9 complesso che mai: dobbiamo supportare pi\u00f9 browser e pi\u00f9 piattaforme, ci sono molte pi\u00f9 dimensioni di schermo e risoluzioni e stiamo creando applicazioni all’interno del browser invece dei noiosi siti vetrina di un tempo.<\/p>\n
Fortunatamente, abbiamo anche a disposizione degli strumenti migliori. La console JavaScript \u00e8 una caratteristica standard per la maggior parte dei browser. Sia JavaScript che il DOM HTLM offrono nativamente l’error handling. Ci sono anche servizi ed applicazioni che ci aiutano a fare il debug da remoto dei nostri siti.<\/p>\n
In questo articolo tratter\u00f2 l’error thowing and handling, il code injection ed il debugging per mobile. Per maggiori informazioni sul debugging, si veda l’articolo del 2009 di Hallvord R.M. Steen e Chris Mills, Advanced Debugging With JavaScript<\/a>.<\/p>\n JavaScript vi permette di tenere traccia e di gestire gli errori attraverso una combinazione di istruzioni L’error throwing \u00e8 utile per cogliere gli errori a runtime, come ad esempio, una funzione che ha gli argomenti sbagliati. Nell’esempio sottostante, Proviamo a richiamare Fig 1: La error console di Dragonfly<\/p>\n<\/div>\n In Dragonfly di Opera (illustrato qui sopra), possiamo vedere il messaggio di errore ed il corrispondente numero di riga, relativo allo script. Tenete sempre a mente che in questi esempi stiamo inserendo il JavaScript nella nostra pagina HTML.<\/p>\n Fig. 2: La error console di Firebug<\/p>\n<\/div>\n Firebug include anche il messaggio dell’errore lanciato ed il numero di riga, ma relativamente al documento.<\/p>\n Tutti gli oggetti error hanno tre propriet\u00e0 standard:<\/p>\n Al momento in cui scrivo, gli oggetti error in Firefox includono anche due propriet\u00e0 non standard: Anche la propriet\u00e0 Fig 3: La propriet\u00e0 stack rivela il \u201cthrow error\u201d nel codice.<\/p>\n<\/div>\n La propriet\u00e0 Non dovete per forza lanciare (throw) un oggetto error. Potreste, ad esempio, lanciare un messaggio: Utilizzare Anche il Document Object Model offre un meccanismo per catturare gli errori: l’evento Quando viene attivato l’evento Si pu\u00f2 accedere a questi argomenti in uno dei due modi seguenti:<\/p>\n Nell’esempio seguente, useremo Fig 4: Il nostro errore appare come un alert in Internet Explorer 9<\/p>\n<\/div>\n Qui Avvertimento: il supporto per Una delle caratteristiche pi\u00f9 potenti disponibile ad oggi nei tool per il debug \u00e8 la console JavaScript. E’ praticamente una riga di comando (CLI) per JavaScript. Con essa potete fare il dump dei dati o inserire del JavaScript per esaminare il motivo per cui il codice si comporta in maniera inaspettata.<\/p>\n Firefox<\/strong> \u00e8 un caso speciale. Per anni, gli sviluppatori hanno utilizzato l’estensione Firebug<\/a>. Tuttavia, Firefox 4 ha aggiunto una console nativa (Tools > Web Console oppure Menu > Web Developer > Web Console).<\/p>\n Firebug supporta completamente le Console API<\/a> e ha delle caratteristiche di debugging CSS pi\u00f9 robuste. Suggerisco di installarlo, sebbene la Web Console sia un tool adatto alle necessit\u00e0 di base.<\/p>\n Negli esempi qui sotto utilizzo il tool di debug di Opera, Dragonfly<\/a> (ebbene s\u00ec, lavoro per Opera). Questi esempi, comunque, funzionano in maniera simile in Chrome, Safari, Firefox, Firebug e Internet Explorer.<\/p>\n Diamo un’altra occhiata al codice dei nostri esempi precedenti. Aggiungiamo una nuova riga \u2014 Rapida nota riguardante il metodo Fig 5: La console Dragonfly<\/p>\n<\/div>\n L’errore che abbiamo lanciato \u00e8 scritto ancora nella console. Ma introduciamo del JavaScript che funziona correttamente. Inseriremo Fig 6: La console Dragonfly con il codice introdotto<\/p>\n<\/div>\n Come potete vedere, abbiamo sovrascritto il valore Fig 7: Una pagina con il codice introdotto<\/p>\n<\/div>\n Adesso cambiamo completamente il valore di Fig 8: Cambiamo il codice nella console<\/p>\n<\/div>\n Vedete che 47 viene scritto nella console ed \u00e8 anche il nuovo Fig 9: Modificare il DOM<\/p>\n<\/div>\n Ora, possiamo perfino ridefinire la nostra funzione Fig 10: Sovrascrivere una funzione con la console JavaScript<\/p>\n<\/div>\n Il nuovo Fig 11: I risultati della sovrascrittura di una funzione<\/p>\n<\/div>\n La console JavaScript offre un potente tool per la comprensione del funzionamento del nostro codice. E’ ancora pi\u00f9 potente quando la si usa con i dispositivi mobili.<\/p>\n<\/div>\n Il debug del codice su un dispositivo mobile \u00e8 ancora uno dei punti pi\u00f9 dolenti. Ma, ancora una volta, adesso abbiamo dei tool. Dragonfly di Opera e la sua feature per il debug remoto fornisce agli sviluppatori un modo per debuggare i siti mobile dalla propria postazione desktop. Recentemente, WebKit ha aggiunto il remote debugging<\/a> al suo core e Google Chrome l’ha gi\u00e0 inserito nei suoi developer tool.<\/p>\n Gli sviluppatori indipendenti offrono prodotti simili per altri browser. Tra questi citiamo Bugaboo<\/a>, una app iOS per il debug basata su Safari, JS Console<\/a> che \u00e8 disponibile sul web o come app iOS e Weinre<\/a> per i browser basati su WebKit.<\/p>\n Esaminiamone due: Dragonfly remote debug<\/strong> e JSConsole<\/strong>.<\/p>\n Il punto di forza di Dragonfly \u00e8 che vi si pu\u00f2 fare il debug dei CSS o degli header (si veda il Network tab) oltre che di JavaScript. Per\u00f2 richiede l’installazione di Opera sul proprio desktop e di Opera Mobile<\/a> sul proprio device.<\/p>\n Entrambe i device devono poi essere connessi alla stessa rete locale. Vi servir\u00e0 anche l’indirizzo IP della macchina su cui \u00e8 in esecuzione Dragonfly. Poi completate i seguenti passi:<\/p>\n Fig 12: Il pannello di remote debugging in Dragonfly<\/p>\n<\/div>\n<\/li>\n Fig 13: La debug console di Opera Mobile<\/p>\n<\/div>\n<\/li>\n\nError throwing and catching<\/h2>\n
throw<\/code> e try<\/code>\u2026catch<\/code> e tramite l’oggetto error<\/code>.<\/p>\nadd()<\/code> accetta due parametri. Far\u00e0 il throw di un errore se gli argomenti che le vengono passati sono nulli o se non sono n\u00e9 un numero n\u00e9 una stringa numerica. [Gli \u201ca capo\u201d sono segnati con \u00bb, \u2014Ed.<\/em>]<\/p>\n \nfunction add(x,y){\n if( isNaN(x) || isNaN(y) ){\n throw new Error(\"Hey, I need two numbers to add!\");\n } else {\n\t \/\/ ensure we're adding numbers not concatenating \u00bb\nnumeric strings.\n\t return (x * 1) + (y * 1);\n }\n}\n<\/pre>\nadd()<\/code> usando degli argomenti non validi. Faremo il catch dell’errore \u201clanciato\u201d utilizzando un blocco try<\/code>\u2026catch<\/code> e lo manderemo in output sulla console:<\/p>\n \nvar a;\n \ntry{\n a = add(9);\n} catch(e) {\n console.error( e.message );\n}\n<\/pre>\n![\"La](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/catching_errors_dfl.png\")
<\/p>\n![\"La](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/catching_errors_fb.png\")
<\/p>\n\n
constructor<\/code>: ritorna un riferimento alla funzione Error che ha creato il prototipo dell’istanza,<\/li>\nmessage<\/code>: il messaggio lanciato, il messaggio che passate come argomento,<\/li>\nname<\/code>: il tipo di errore, solitamente error<\/code>, a meno di usare un tipo pi\u00f9 specifico<\/a>.<\/li>\n<\/ul>\nfileName<\/code> e lineNumber<\/code>. Internet Explorer include due propriet\u00e0 non standard proprietarie: description<\/code> (che funziona in maniera simile a message<\/code>) e number<\/code> (che d\u00e0 in output il numero di linea).<\/p>\nstack<\/code> non \u00e8 standard, ma \u00e8 pi\u00f9 o meno supportata dalle versioni pi\u00f9 recenti di Chrome, Firefox e Opera. Traccia l’ordine delle chiamate di funzione, con i corrispondenti numeri di linea ed argomenti. Modifichiamo il nostro esempio per allertare stack<\/code> invece:<\/p>\n \nvar a;\n \ntry{\n a = add(9);\n} catch(e) {\n alert( e.stack );\n}\n<\/pre>\n![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/opera_stack_trace.png\")
<\/p>\nstack<\/code> rivela il punto in cui \u00e8 presente il codice throw Error<\/code> (in questo caso, alla riga 7) e su quale riga l’errore \u00e8 stato fatto scattare (in questo caso, la riga 15).<\/p>\nthrow \"The value of x or y is NaN.\"<\/code>. Lanciare un errore, tuttavia, d\u00e0 maggiori informazioni nella maggior parte dei browser.<\/p>\ntry<\/code>\u2026catch<\/code> pu\u00f2 comunque avere un effetto negativo sulla riduzione della dimensione del codice e sulla performance. Sebbene sia comodo per il debugging, il vostro codice pronto per andare in produzione dovrebbe utilizzare try<\/code>\u2026catch<\/code> in maniera molto limitata, se non addirittura evitarlo.<\/p>\n<\/div>\n\nGestione degli errori con l’evento
window.onerror<\/code><\/h2>\nwindow.onerror<\/code>. A differenza di try<\/code>\u2026catch<\/code>, potete impostare un gestore di eventi per window.onerror<\/code> che catturi gli errori che voi non<\/em> lanciate. Questo accade se cercate di invocare una funzione non definita o se provate ad accedere ad una variabile indefinita.<\/p>\nwindow.onerror<\/code>, il browser far\u00e0 un controllo per vedere se c’\u00e8 disponibile una funzione handler. Se non ve ne sono, il browser mostrer\u00e0 l’errore all’utente. Se invece ce n’\u00e8 una disponibile, la funzione handler riceve tre argomenti:<\/p>\n\n
\n
arguments<\/code> che \u00e8 nativo e localmente disponibile per tutte le funzioni JavaScript, oppure<\/li>\narguments<\/code>. Tuttavia, per favorire la leggibilit\u00e0, dovreste utilizzare i named parameters:<\/p>\n \n \nwindow.onerror = function(){\n alert(arguments[0] +'\\n'+arguments[1]+'\\n'+arguments[2]);\n}\n \ninit(); \/\/ undefined and triggers error event.\n<\/pre>\n![\"Il](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/onerror_ie.png\")
<\/p>\ninit()<\/code> non \u00e8 stato ancora definito. come risultato, l’evento onerror<\/code> verr\u00e0 attivato nei browser che lo supportano.<\/p>\nwindow.onerror<\/code> \u00e8 limitato. Chrome 10+ e Firefox (inclusa la versione mobile) lo supportano. Internet Explorer lo supporta, ma i messaggi d’errore veramente utili si trovano solo dalla versione 9+. Sebbene gli ultimi build di WebKit supportino window.onerror<\/code>, le versioni recenti di Safari e le versioni leggermente pi\u00f9 vecchie di Android WebKit non lo supportano. Anche Opera non lo supporta perfettamente. Aspettatevi che le cose cambino man mano che la specifica di HTML5 si evolve ed i produttori di browser adeguano di conseguenza le loro implementazioni.<\/p>\n<\/div>\n\nModificare JavaScript al volo usando l’interfaccia a riga di comando<\/h2>\n
Lanciare la Console JavaScript<\/h3>\n
\n
var a = document.querySelector('#result');<\/code>\u2014, che assume un elemento con il valore dell’id impostato in \u201cresult.\u201d<\/p>\nquerySelector()<\/code>: questo e querySelectorAll()<\/code> fanno parte delle selectors API<\/a> del DOM<\/abbr>. querySelector()<\/code> ritorna il primo elemento uguale al selettore CSS<\/abbr><\/a>. Entrambe i metodi sono supportati dalle ultime versioni della maggior parte dei browser. Potreste anche usare document.getElementById('result')<\/code>, ma document.querySelector()<\/code> \u00e8 pi\u00f9 efficiente:<\/p>\n \nfunction add(x,y){\n if( isNaN(x) || isNaN(y) ){\n throw new Error(\"Hey, I need two numbers to add!\");\n } else {\n \/\/ ensure we're adding numbers not concatenating numeric strings.\n return (x * 1) + (y * 1);\n }\n}\n \nvar a = document.getElementById('result');\n \ntry{\n a.innerHTML = add(9);\n} catch(e) {\n console.error(e.message);\n}\n<\/pre>\n![\"La](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/console_dragonfly.png\")
<\/p>\na.innerHTML = add(21.2, 40);<\/code> nella nostra console:<\/p>\n![\"La](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/console_dragonfly_injected_code_con.png\")
<\/p>\ninnerHTML<\/code> di a<\/code>:<\/p>\n![\"Una](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/console_dragonfly_injected_code.png\")
<\/p>\na<\/code>. Inseriamo a = document.querySelector('h1'); a.innerHTML = add(45,2);<\/code> nella console:<\/p>\n![\"Cambiamo](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/console_dragonfly_injected_code2.png\")
<\/p>\ninnerHTML<\/code> del nostro elemento h1<\/code>:<\/p>\n![\"Modificare](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/console_dragonfly_injected_code3.png\")
<\/p>\nadd()<\/code>. Facciamo in modo che add()<\/code> ritorni il prodotto di due argomenti e poi aggiorni l’elemento h1<\/code>. Inseriamo function add(){ return arguments[0] * arguments[1]; }<\/code> nella console, seguito da a.innerHTML = add(9,9);<\/code>:<\/p>\n![\"Sovrascrivere](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/console_dragonfly_injected_code4.png\")
<\/p>\ninnerHTML<\/code> del nostro elemento h1<\/code> \u00e8 adesso 81, ossia il risultato della nostra funzione add<\/code> ridefinita:<\/p>\n![\"I](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/console_dragonfly_injected_code5.png\")
<\/p>\n\nDebugging da remoto per mobile<\/h2>\n
Remote debugging con Opera Dragonfly<\/h3>\n
\n
![\"The](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/remote_debug_btn.png\")
,<\/li>\n![\"Il](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/remote_debugging_dragonfly.png\")
<\/p>\nopera:debug<\/code> nella barra degli indirizzi\n![\"la](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/remote_debugger_ondevice.png\")
<\/p>\n
![\"I](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/dragonfly_ip.png\")
<\/p>\n![\"Un'alert](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/remote_debug_opera.png\")
<\/p>\n![\"Invio](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/06\/jsconsole.png\")
<\/p>\n