I'm looking for a way to have the console visible and able to accept input from the client side of a node.js electron app. To be clear, it is an app I developed for my own personal use to help build charts and reports from local excel files, so security is not a problem.
I have my data saved as JS objects that feed my charts and tables. However, every once in a while I need to access data from an object that doesn't merit creating a client side process because of its rarity. Is there a way I can have the console visible in the client side of my app so I can quickly look up data from my global objects in the console?
Thanks, Sychord
You can override console.log's default behavior to instead print to the page:
console.log = function(text){
document.body.insertAdjacentHTML('beforeend', `<div class='log'><div class='text'>${text}</div><div class='time'>${new Date().toLocaleString()}</div></div>`)
}
console.log('Hello World!')
console.log('Log #2').log{display:flex;justify-content:space-between;padding:15px 20px;border-bottom:1px solid grey;margin-bottom:5px}.log .text{font-weight:bold}To let the user input just like they would in the console, you can use eval to evaluate their JS:
console.log = function(text){
document.body.insertAdjacentHTML('beforeend', `<div class='log'><div class='text'>${text}</div><div class='time'>${new Date().toLocaleString()}</div></div>`)
}
window.onerror = function(text){
document.body.insertAdjacentHTML('beforeend', `<div class='log danger'><div class='text'>${text}</div><div class='time'>${new Date().toLocaleString()}</div></div>`)
}
btn.addEventListener('click', function(){
eval(input.value)
}).log{display:flex;justify-content:space-between;padding:15px 20px;border-bottom:1px solid grey;margin-bottom:5px}.log .text{font-weight:bold}.danger{background-color:tomato}<input id="input"><button id="btn">Execute</button>
<br><br>
Try entering something like: console.log('hi')