在网站中嵌入JS控制台

Embed JS Console within website

本文关键字：JS 控制台 网站      更新时间：2023-09-26

我想在网站中嵌入一个JS-Console，以便进行扩展调试。是否有可用的库或钩子？如何捕获控制台.log消息？

如何捕获控制台.log消息？

您可以猴子修补真正的console.log方法，并对输入执行任何您喜欢的操作：

var realConsoleLog = console.log;
console.log = function () {
    var message = [].join.call(arguments, " ");
    // Display the message somewhere... (jQuery example)
    $(".output").text(message);
    realConsoleLog.apply(console, arguments);
};

这是一个工作示例。它像往常一样在 .output 元素以及控制台中记录对console.log的调用。

您可以覆盖控制台.log

<div id="console"></div>

脚本：

if (window.console) console = { 
    log: function(){
        var output='',
            console=document.getElementById('console');
        for (var i=0;i<arguments.length;i++) {
            output+=arguments[i]+' ';
        }
        console.innerText+=output+"'n";
    }
};
//test
var test=12345;
console.log('test', 'xyz', test);

您可以使用eval()函数来计算字符串中的javascript，然后将该输出打印到某个div。这将为您提供 REPL 的一些功能。

const consoleElm = document.querySelector('#console');
const clearButton = document.querySelector('#clear');
clearButton.addEventListener('click', (event) => {
	consoleElm.innerHTML = '';
});
const consoleForm = document.querySelector('#console-form');
consoleForm.addEventListener('submit', (event) => {
	event.preventDefault();
  const command = event.target.querySelector('#command').value;
  const value = eval(command);
  consoleElm.innerHTML += (value === undefined ? 'undefined' : value) + ''n';
});
<div>
  <form id="console-form">
    <input type="text" id="command">
    <input type="submit" value="Run Command">
    <button id="clear" type="button">Clear</button>
  </form>
  <hr>
  <pre id="console"></pre>
</div>

相关文章：