Just create your own console at the bottom of the screen. This is a quick solution but its better than making alerts all over the place. Make sure to put this in the root html file (bottom) or convert to all JS and put in the root JS file (top).
<div id="console"></div>
<style media="screen">
#console {
resize: both;
height :200px;
overflow: scroll;
background: white;
color: black;
border: 1px solid black;
width: 95vw;
padding: 5px;
margin: auto;
}
</style>
<script type="text/javascript">
logger = (...params) => {
const newLog = document.createElement("div");
newLog.textContent = params.reduce((str, param) => {
if (typeof param === 'string') return `${str} ${param}`;
return `${str} ${JSON.stringify(param)}`;
}, '');
document.getElementById('console').appendChild(newLog);
}
window.onerror = (error) => {
const newLog = document.createElement("div");
newLog.style.color = 'red';
newLog.textContent = error;
document.getElementById('console').appendChild(newLog);
};
console.log = logger;
console.warn = logger;
</script>