-1

I basically want to intercept all console traffic and show it in my own component in my browser window. I want to do what codepen and jsbin do - they have a console window directly embedded in their page. I could not find anything worthwhile on the interwebz. Please help me.

Divide by Zero
  • 1,343
  • 1
  • 14
  • 37
  • 1
    That is really simple. Hint: `console` is a global property of `window` in a browser context and you can override its function. – marekful Aug 01 '18 at 12:41
  • 1
    You can find a solution on this post https://stackoverflow.com/questions/19636423/embed-js-console-within-website – zagoa Aug 01 '18 at 12:43

1 Answers1

1

Nearly all functions of the JS engine can be replaced, this includes console.

So you just create your own, eg..

var oLog = window.console.log;

console.log = (s) => {
  var d = document.createElement("div");
  d.classList.add("logger");
  d.innerText = s;
  document.body.appendChild(d);
  oLog(s); //if you still want to call old
}

console.log("hello");
console.log("there");
.logger {
  background-color: pink;
}
Keith
  • 22,005
  • 2
  • 27
  • 44