Catturare Console.log() in un “div” con JavaScript

Come certamente saprai, durante il test di un determinato script o codice possono presentarsi problemi o errori, a cui bisogna subito correre ai ripari. Programmando in JavaScript, spesso gli sviluppatori fanno uso della console di debug o di output presente nei browser web, che forniscono un riscontro immediato sull’esecuzione del codice.

Gli stessi sviluppatori programmano i loro codici affinché restituiscano messaggi di avviso, o “log” in determinati momenti prestabiliti. Questo consente di valutare se lo script venga eseguito correttamente.

Un ottimo strumento dunque, presente nativamente nei browser web per la navigazione internet.

In alcuni casi può capitare di aver la necessità di catturare i log generati dalla console, magari mostrandoli in un apposito elemento HTML, come un <div> o un semplice paragrafo. Con JavaScript è possibile farlo, e in questa guida vedremo come.

Come catturare i logs dalla console di output con JavaScript

Con JavaScript è possibile manipolare qualsiasi cosa sia presente in un pagina web, ma anche tutto quello che accade “attorno” ad essa.

Nel nostro caso specifico, il compito da assegnare a JavaScript, sarà quello di catturare i comandi generati dal codice console.log() in un div HTML (o a scelta qualsiasi altro elemento/tag HTML).

Per far questo definiremo un semplice contenitore su cui verrà eseguita una semplice funzione in puro JavaScript.

HTML

Come primo passaggio, creeremo il div su cui verranno “catturati/copiati” i logs generati dalla console di debug del browser. A questo elemento assegneremo un selettore “id” specifico, che ci servirà più avanti.

Il codice:

<div id="container"></div>

Se la console non genererà logs, il div resterà vuoto.

JavaScript

Lo script vero e proprio, che servirà a rilevare e catturare i logs generati dalla console tramite il comando JavaScript “console.log()” è racchiuso nel codice sottostante. La funzione verrà eseguita ogni qual volta venga generato un log dalla console primaria del browser, e mostrata all’interno del div precedentemente creato.

var div = document.getElementById('container');
window.console.log = function(message) {
      div.insertAdjacentHTML("beforeend", message+"<br>");
}

Con questo script, ogni log verrà visualizzato a schermo in maniera sequenziale, uno dopo l’altro.

N.B. La cattura è valida esclusivamente per comandi eseguiti tramite il comando “console.log()”. Nel div non verranno considerati errori o logs di altro genere. Se vuoi realizzare una console di debug vera e propria all’interno della tua pagina web, potrebbe interessarti questo articolo.

Leggi anche: Come velocizzate l’indicizzazione delle pagine web su Google.

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


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA