Una console di debug con JavaScript

Lavorando allo sviluppo di pagine Web e praticamente obbligatorio utilizzare uno strumento di sviluppo integrato nel browser. Tutti i browser di ultima generazione dispongono di una funzionalita come questa. Ad esempio, se lavoriamo con Firefox avremo a disposizione gli strumenti di debug offerti da Firebug, installabile come componente aggiuntivo. Se invece usiamo Chrome possiamo usare lo strumento integrato nel browser per default, accessibile dal menu delle opzioni cliccando su strumenti e poi strumenti per sviluppatori.

Lavorando allo sviluppo di pagine Web è praticamente obbligatorio utilizzare uno strumento di sviluppo integrato nel browser. Tutti i browser di ultima generazione dispongono di una funzionalità come questa. Ad esempio, se lavoriamo con Firefox avremo a disposizione gli strumenti di debug offerti da Firebug, installabile come componente aggiuntivo. Se invece usiamo Chrome possiamo usare lo strumento integrato nel browser per default, accessibile dal menù delle opzioni cliccando su strumenti e poi strumenti per sviluppatori. Infine, nel caso di Internet Explorer, sotto il menù strumenti troviamo la voce strumenti di sviluppo , richiamabile anche tramite il tasto F12.

In tutti questi casi abbiamo l’opportunità di usare uno strumento molto comodo per investigare i componenti HTML, analizzare le proprietà CSS, fissare breakpoints del codice JavaScript eccetera. La documentazione relativa all’utilizzo di questi strumenti è facilmente reperibile sul Web, per cui non è necessario ripeterla qui: se non conosciamo queste funzionalità, suggeriamo di iniziare ad usarle quanto prima.

Quello che ci interessa discutere riguarda le proprietà dell’oggetto JavaScript window.console: questo è infatti uno degli oggetti più interessanti tra quelli resi disponibili dagli strumenti di sviluppo accennati sopra. Quando installiamo Firebug su Firefox, o più semplicemente usiamo uno strumento di sviluppo integrato nel browser, di fatto aggiungiamo alcune proprietà all’oggetto window di JavaScript. Questo capita senza che ce ne rendiamo conto, perché quando scriviamo:

il comando viene interpretato come

l’uso di messaggi di log sulla console è molto comodo, perché rappresenta una via di mezzo tra la soluzione “vecchia scuola” (uso dell’alert) e quella moderna (piazzamento di breakpoint e debug del codice). Lo svantaggio della console è quello di non poter visualizzare agevolmente più di 4 o 5 righe: se vogliamo visualizzare più righe rischiamo di “coprire” troppo la pagina su cui stiamo lavorando. In alternativa possiamo aprire la console in una nuova finestra, ma se lavoriamo con un solo monitor anche questo può risultare scomodo.

Per ovviare a questo ed altri problemi presentiamo un sistema, realizzato in JavaScript, che permette di inserire una console di debug direttamente nella pagina. La console che vedremo permette lo switch tra tre tipi di output: un nuovo documento, la normale console dell’oggetto window, oppure il contenuto interno di una textarea. Il vantaggio è quello di poter inserire una console flessibile e dinamica direttamente nella pagina sulla quale stiamo lavorando.

Quello che vogliamo ottenere è qualcosa del genere:

  Figura 1 – Console di debug multi-canaleconsole_01

Il codice JavaScript

Il codice JavaScript

L’idea è quella di inserire nella pagina un elemento HTML textarea da usarsi come console alternativa. Il codice JavaScript permetterà di effettuare lo switch cliccando semplicemente su un pulsante, in modo da selezionare la console dove indirizzare i messaggi. Il codice JavaScript è il seguente:

La variabile consoleMode si occupa di memorizzare lo stato corrente, ovvero qual è l’output della console attualmente selezionata. Ovviamente nella pagina dovremo inserire anche due pulsanti per attivare le funzioni switchConsole e clearNow, che si occupano rispettivamente di eseguire lo switch e pulire la console (necessario solo quando usiamo la textarea). A scapito di equivoci riportiamo anche il codice HTML minimale:

Approfondimenti

Approfondimenti

Se guardiamo al codice JavaScript di pagina precedente noteremo l’utilizzo della funzione checkConsole per verificare l’esistenza della console offerta dagli strumenti di sviluppo integrati nel browser. Ciò è necessario per due motivi: il primo è che alcuni browser di vecchia generazione potrebbero non disporre degli strumenti di sviluppo o, più semplicemente, essi non sono stati installati. Il secondo motivo è che alcuni browser, anche di nuova generazione, rendono disponibile l’oggetto window.console solamente quando tale strumento è attivo.
Questo è il caso, ad esempio, di molte versioni di Internet Explorer, che finché non premiamo il tasto F12 (strumenti di sviluppo) non riconoscono l’oggetto window.console, come mostrato in figura.

Figura 2 – La console su Internet Explorer (non attiva)console_02

In questo caso la funzione checkConsole riconosce la situazione e la segnala all’utente. Basterà attivare lo strumento di sviluppo affinché tutto funzioni correttamente.

 Figura 3 – La console su Internet Explorer (attiva)

Queste considerazioni suggeriscono di approfondire le proprietà dell’oggetto window.console. Per indagare le proprietà caratteristiche di questo oggetto e confrontarle tra i diversi browser, possiamo usare lo snippet riportato qui sotto:console_03

dove abbiamo eseguito due cicli for (ne sarebbe bastato uno) allo scopo di enfatizzare la distinzione tra le chiavi delle proprietà e i rispettivi valori.

Se eseguiamo la funzione showConsoleProperties noteremo come il numero delle proprietà attribuite all’oggetto window.console cambia da browser a browser. Questo è un ottimo esercizio per capire meglio cosa succede quando usiamo il metodo console.log, anticipando così le possibili problematiche cross-browser.