aconsole

npm install aconsole

<script src="path/to/aconsole.min.js"></script>
<script>
  // init Aconsole

  var _aconsole = new Aconsole();
  _aconsole.show();
  _aconsole.log("hello world");
  _aconsole.trace("hello world");
  _aconsole.debug("hello world");
  _aconsole.info("hello world");
  _aconsole.warn("hello world");
  _aconsole.error("hello world");
  // example: match key event
  document.addEventListener("keydown", function (event) {
    var code = event.keyCode;
    if (code == 13) {
      // _mconsole.clearAll();
      _mconsole.toggle();
      // _mconsole.clear();
    }
    if (code == 32) {
      _mconsole.log(document.createElement("div"), 2);
    }
    if (code == 34) {
      _mconsole.pageDown();
    }
    if (code == 33) {
      _mconsole.pageUp();
    }
    if (code == 40) {
      _mconsole.moveDown();
    }
    if (code == 38) {
      _mconsole.moveUp();
    }
  });
</script>

var options = {
  position: "left", // 日志输出位置
  size: "50%", // 日志所占屏幕大小
  id: "console", // 日志dom id
  parent: "body", // 捆绑父元素(body, ID, class)
  focus: true, // 聚焦模式, 默认: false
  zindex: 9999, // 默认: 9999
  spread: true, // 默认: false
  bgcolor: "rgba(85,85,85,.8)",
};
new Aconsole(options); // unnecessarily