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

Question

我正在寻找一种使控制台可见并能够接受来自 node.js 电子应用程序客户端的输入的方法。需要说明的是，这是我为个人用途开发的应用程序，用于帮助从本地 excel 文件构建图表和报告，因此安全性不是问题。

我将数据保存为 JS 对象，用于提供图表和表格。但是，每隔一段时间我就需要从一个对象访问数据，但由于其稀有性，不值得创建客户端进程。有没有一种方法可以让控制台在我的应用程序的客户端可见，以便我可以在控制台中快速查找全局对象的数据？

谢谢，合弦

Answer 1

您可以覆盖 console.log 的默认行为，改为打印到页面：

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}

为了让用户像在控制台中一样输入，您可以使用 eval 来评估他们的 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')

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

How to add console to client side page

html

javascript

console

node.js