Question

我在codepen.io中，并且创建了自己的控制台。我知道jQuery firebug或类似的东西存在，但是我不想使用它。无论如何，在控制台中，我试图添加一些可以直接从控制台运行命令的位置。这是一个代码段和一个指向codepen的链接。如果我的要求没有道理，请在下面评论。

var $c = $('.game');
var ctx = $c[0].getContext('2d');
/*Console stuff*/{
var $console = $('.console');
var console = {
	log: function(txt) {
		$console.append(txt + '<br>');
	},
	clear: function() {
		$console.text(' ');
	}
};

$(function() {
	$console.hide();
});
var bKeys = [];

$('body').keydown(function(e) {
	if (bKeys.includes(e.which) === false) {
		bKeys.push(e.which);
	}
});

$('body').keyup(function(e) {
	bKeys.pop(e.which);
});

setInterval(function() {
	if (bKeys.includes(18) && bKeys.includes(67)) {
		$console.toggle();
	}
}, 100);}

.game {
 	background-color: #f1f1f1;
	display: block;
	margin: 0 auto;
	position: relative;
	top: 50px;
}
.console {
	position: absolute;
	right: 0px;
	top: 0px;
	background-color: #fff;
	width: 300px;
	height: 100%;
	box-shadow: 0px 0px 5px #444;
	overflow-y: auto;
}
.run {
	position: fixed;
	bottom: 0px;
	width: 295px;
}
body {
	margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas class='game' width='700' height='400'></canvas>
<div class='console'><input class='run' type='text' placeholder='Run a command...'/>Console: <br> </div>

Answer 1

如果要像每个浏览器都内置一样创建新的调试器面板，则需要做很多事情。如果要允许实际上运行任何JS代码，则可以使用eval(userInputText)。如果您不验证userInputText并且不处理错误，这可能很危险。

但是，如果您只想允许从固定列表中调用预定义的命令，那么这里是一个开始的想法：

在输入中添加事件处理程序，以检测其内容何时更改。
读出内容，这将是键，命令的名称。
创建允许/可能的命令的对象/数组/字典。键/索引应该是命令的名称，值是一个函数。
输入更改后，请对其进行验证，然后运行类似commandStorage[userInputText]()的操作。
您可以扩展它以传递参数，添加复杂的调用等等。

从临时控制台运行功能

1 个答案: