How to add console to client side page-CodePudding

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

CodePudding user response：

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')