you would need to override the window.console object.
window.oldConsole = windows.console;
var newConsole = {
element: document.querySelector('#mydiv');
assert = function() {
console.assert(arguments); // w3schools.com/js/js_function_parameters.asp parameter overloading
},
clear = function() {
....
console.clear();
}
count = function() {},
countReset = function() {},
debug = function() {},
dir = function() {},
dirxml = function() {},
error = function() {},
group = function() {},
groupCollapsed = function() {},
groupEnd = function() {},
info = function() {},
log = function() {},
profile = function() {},
profileEnd = function() {},
table = function() {},
time = function() {},
timeEnd = function() {},
timeLog = function() {},
timeStamp = function() {},
trace = function() {},
warn = function() {},
}
windows.console = newConsole;
besides that I don't think it's possible. They don't 'emit' error events hence you cannot intercept and suppress or propagate them.
I am agnostic if that's a good or bad thing but to my knowledge some javascript developers argue strongly against overriding global libraries.
addendum:
as Marco Alka mentioned in his response
It is not necessary to overwrite the whole object. Only overwrite the methods you need:
// store ref to original method in variable
const originalConsoleError = console.error;
// overwrite ref to method with custom function
console.error = function(...args) {
// get your out-div
const myDiv = document.querySelector('#error');
// write error to div
if (myDiv) {
myDiv.innerText += args.join(' ');
myDiv.innerHTML += '<br>';
}
// call original method
return originalConsoleError.apply(this, args);
};
one side note the ... operator needs a transpiler since it's not supported everywhere developer.mozilla.org/en-US/docs/Web/JavaScript/R…