Sovrascrivere console.log in JavaScript
01 aprile 2019
Recentemente mi è capitato di dover fare debug dei JavaScript su un sito che girava su un IPAD.
Non avendo a disposizione un MAC per fare debug su IPAD, ho dovuto trovare un alternativa.
L'alternativa è stata quella di modificare il codice nell'ambiente di sviluppo per sovrascrivere la funzione console.log di JavaScript.
Lo scopo era poter reindirizzare l'output su un elemento html in pagina, in modo da poter vedere i messaggi direttamente su IPAD.
La prima cosa è stata inserire in pagina un elemento html in una posizione comoda e sicuramente visibile a video, ad esempio dopo il tag body:
poi ho aggiunto questo JavaScript che fa l'override della funzione console.log:
a questo punto ho potuto mettere dei console.log in punti strategici del codice, e, con tanta fatica e reload, fare debug:
Non avendo a disposizione un MAC per fare debug su IPAD, ho dovuto trovare un alternativa.
L'alternativa è stata quella di modificare il codice nell'ambiente di sviluppo per sovrascrivere la funzione console.log di JavaScript.
Lo scopo era poter reindirizzare l'output su un elemento html in pagina, in modo da poter vedere i messaggi direttamente su IPAD.
La prima cosa è stata inserire in pagina un elemento html in una posizione comoda e sicuramente visibile a video, ad esempio dopo il tag body:
HTML
<body>
<div id="debug"></div>
...
JavaScript
var console = {};
console.log = function(v){
var el = document.getElementById('debug'),
elChild = document.createElement('div');
elChild.innerHTML = v;
el.appendChild(elChild);
};
window.console = console;
// faccio sempre stampare la data attuale per essere sicuro che i JS siano gli ultimi modificati
console.log('start ' + ( new Date()));
JavaScript
console.log(variabile);
L'override di console.log accetta un solo parametro, eventuali altri parametri verranno ignorati
Fate attenzione che se ci sono degli errori relativi ad istruzioni non supportate, ad esempio l'uso della keyword const, let o arrow function lo script non viene eseguito e quindi non viene stampato niente a video.
Quindi va prima fatto un check del codice per verificare che non si stiano usando feature non supportate.
Quindi va prima fatto un check del codice per verificare che non si stiano usando feature non supportate.