#javascript #html #node.js #console
Вопрос:
Я ищу способ сделать консоль видимой и способной принимать входные данные со стороны клиента node.js электронное приложение. Чтобы быть ясным, это приложение, которое я разработал для собственного личного использования, чтобы помочь создавать диаграммы и отчеты из локальных файлов Excel, поэтому безопасность не является проблемой.
Мои данные сохранены в виде объектов JS, которые загружают мои диаграммы и таблицы. Однако время от времени мне нужно получать доступ к данным из объекта, который не заслуживает создания процесса на стороне клиента из-за его редкости. Есть ли способ сделать консоль видимой на клиентской стороне моего приложения, чтобы я мог быстро просматривать данные из своих глобальных объектов в консоли?
Спасибо, Сихорд
Ответ №1:
Вы можете переопределить console.log поведение по умолчанию, чтобы вместо этого печатать на странице:
console.log = function(text){ document.body.insertAdjacentHTML('beforeend', `lt;div class='log'gt;lt;div class='text'gt;${text}lt;/divgt;lt;div class='time'gt;${new Date().toLocaleString()}lt;/divgt;lt;/divgt;`) } 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', `lt;div class='log'gt;lt;div class='text'gt;${text}lt;/divgt;lt;div class='time'gt;${new Date().toLocaleString()}lt;/divgt;lt;/divgt;`) } window.onerror = function(text){ document.body.insertAdjacentHTML('beforeend', `lt;div class='log danger'gt;lt;div class='text'gt;${text}lt;/divgt;lt;div class='time'gt;${new Date().toLocaleString()}lt;/divgt;lt;/divgt;`) } 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} lt;input id="input"gt;lt;button id="btn"gt;Executelt;/buttongt; lt;brgt;lt;brgt; Try entering something like: console.log('hi') Комментарии:
1. Спасибо, это, безусловно, полезно! Тем не менее, я хотел бы также иметь возможность вводить данные, как если бы я использовал инструменты разработки Chrome. Поэтому я мог бы, например, найти определенное значение в объекте через консоль, так как это одноразовый захват данных. Есть какие-нибудь мысли по этому поводу?
2. Красивые. Большое вам спасибо! Не так важно, но могу ли я получить какие-либо ошибки, вызванные консолью для печати? Если я введу неверное значение ключа объекта или что-то в этом роде и т. Д…. Во всяком случае, помечено как отвеченное!
3. @sychordCoder Я обновил свой ответ, чтобы также обрабатывать ошибки 🙂 Просто прислушайтесь к
errorсобытию.