Come creare una Debug Console con JavaScript

La programmazione richiede sempre molta attenzione da parte dello sviluppatore, anche per dettagli più piccoli e apparentemente meno importanti, che se mal programmati possono influire negativamente su tutto il lavoro.

In questi casi, un developer si affida sempre alla console di debug, che accompagna quasi sempre i software per la programmazione o, nel caso di JavaScript, il browser web.

In contesti speciali, differenti dal comune uso dei browser, la console dei logs è fondamentale da tenere sott’occhio, per testare ogni passaggio e rilevare eventuali errori di progettazione, così da correggerli il prima possibile.

Per visualizzare la console nei browser può rivelarsi scomodo per molti, per questo motivo voglio dedicare questo articolo alla creazione di una console personalizzata da inserire nelle proprie pagine web, così da aversa sempre a portata di mano in qualunque momento.

La console che sto per descrivere è molto simile a quella che potrai trovare nell’editor di Codewith.it

console personalizzata di Codewith.it
Console personalizzata di Codewith.it

JavaScript Console “Fai da te”

Cos’è una console di debugging?

Una console di debugging, o “logs console” o semplicemente “console“, è una piattaforma di testing del codice di programmazione. Nel caso specifico di JavaScript, è spesso utilizzata per visualizzare errori, variabili e funzioni non definite, errori di sintassi o per la generazione manuale di logs, con il comando “console.log(...);“.

Tutti i browser moderni integrano tale piattaforma, così da fornire una panoramica completa degli eventi agli sviluppatori di applicazioni web.

console di debug di brave
Esempio di Console in Brave Browser

Per aprire la console nei browser basta premere il pulsante “F12” da tastiera o la combinazione “CTRL+MAIUSC+I“.

Ora che abbiamo compreso in grandi linee in cosa consiste in “debug console“, andiamo a vedere come crearne una personalizzata in HTML, CSS e JavaScript che acquisisca i messaggi dalla console originale del browser.

Il codice

Per creare una console JavaScript, dovremo istruire l’elemento a riprendere automaticamente tutti i messaggi, gli avvertimenti e i logs generati dalla console del browser; in seguito questi “messaggi” dovranno essere visualizzati in un apposito elemento HTML, che si aggiornerà poi di volta in volta.

HTML

Iniziamo con l’HTML, con la creazione della console vera e propria, che farà da base per il resto.

<div id="consoleDiv">
  <div id="debugDiv">  
  </div>
</div>

Come puoi vedere, l’elemento è costituito da ben poche righe di codice. Per questioni pratiche l’area di debug (“debugDiv”) è contenuta in un contenitore (“console”); grazie a questo risulterà molto più facile aggiungere pulsanti o altri elementi in futuro.

CSS

Questo passaggio è opzionale e servirà esclusivamente a migliorare esteticamente la console e a rendere più leggibile il contenuto.

/* Contenitore */
#consoleDiv {
  position: fixed;
  z-index: 44444;
  bottom: 0;
  right: 0;
  left:0;
  margin:auto;
  width: 500px;
  height: auto;
  color: black;
  background-color: transparent;
}
/* area di debug */
#debugDiv {
  overflow: auto;
  max-height: 200px;
  box-shadow:0px 0px 5px #00000033;
}

/* stile di base dei logs*/
.con {
  height:auto;
  padding:4px 8px;
  margin:0;
  background-color:white;
  border-bottom: 2px solid black;
  margin:1px 0;
}
.con:hover {
  background-color:lightgray;
}

/* Log generico*/
.con-log {
  border-left:4px solid lightgrey;
}

/* Log di errore */
.con-err {
  background-color:rgb(255,61,61);
  color:white;
}

/* Altri logs*/

.con-info {
  border-left:4px solid lightblue;
}
.con-warn {
  border-left:4px solid orange;
}
.con-dir {
  border-left:4px solid lightgreen;
}
.con-debug {
  border-left:4px solid white;
}

Personalizza questi elementi come preferisci.

JavaScript

Ora passiamo allo script vero e proprio.

var div = document.getElementById("debugDiv");

//rileva console logs
window.console.log = function(message) {
  div.insertAdjacentHTML("beforeend","<p class='con con-log'><span style='color:lightgray;'>> </span>" + message + "</p>");
};
window.console.debug = function(message) {
  div.insertAdjacentHTML("beforeend","<p class='con con-debug'>" + message + "</p>");
};
window.console.info = function(message) {
  div.insertAdjacentHTML("beforeend","<p class='con con-info'>" + message + "</p>");
};
window.console.error = function(message) {
  div.insertAdjacentHTML("beforeend","<p class='con con-err'>Error: " + message + "</p>");
};
window.console.warn = function(message) {
  div.insertAdjacentHTML("beforeend","<p class='con con-warn'>" + message + "</p>");
};
window.console.dir = function(message) {
  div.insertAdjacentHTML("beforeend","<p class='con con-dir'>" + message + "</p>");
};

// errore di sistema
window.onerror = function(message, url, line, col) {
  div.insertAdjacentHTML("beforeend","<p class='con con-err'>Error: " + message + "<br> on line " +  line + ":" + col +"</p>");
  return false;
}

Con questo script, tutti i logs (di differente tipo) generato dal sistema o creato manualmente, farà si che essi vengano visualizzati anche nella nostra console.

Copia e incolla il codice così com’è. Attento a cambiare i nomi (selettori) degli elementi, potrebbero generarsi errori.

Puoi provare la console in Codewith.it e scaricare/trovare il codice in questa pagina.

Potrebbe interessarti: Clonare elementi con JavaScript

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

CAPTCHA