如何将控制台添加到客户端页面

Question

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

Answer 1

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