用于调试STB机顶盒的一款轻量级输出console库

前言：最近工作涉及到了机顶盒的调试，由于机顶盒属于IPTV的B/S架构，厂商封装的浏览器内核中直接屏蔽掉了alert以及console方法，导致调试代码时除了抓包以外没有太好的方法，一开始想用VConsole，发现兼容性以及实用性不太适合STB调试，所以花了几天时间撸了一个简单轻量级的console输出库。

下载

直接下载aconsole.min.js

或者

npm i aconsole // 引入dist/aconsole.min.js

使用方法

var _aconsole = new Aconsole();
_aconsole.show()
_aconsole.log("hello world")
_aconsole.trace("hello world")
_aconsole.debug("hello world")
_aconsole.error("hello world")
_aconsole.trace("hello world")
_aconsole.info("hello world")

生成实例的时候可以传入自定义对象配置项

var _aconsole = new Aconsole({
	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)",
});

方法

以下是支持的所有方法：

• show() && hide()
• log(data, level) // level: 1: error, 2: warn, 3: info, 4: log, 5: debug, 6: trace
• trace(data)
• debug(data)
• error(data)
• info(data)
• trace(data)
• getDom() // 得到日志dom
• clearAll() // 清除日志
• clear() // 清除当前聚焦的日志, (focus: true)
• pageDown() && pageUp() // 日志翻页
• moveDown() && moveUp() // 聚焦模式下移动焦点 (focus: true)
• toggle() // 格式化当前焦点的日志当当前日志输出为对象的时候 (focus: true)

由于机顶盒调试局限性，可以把遥控的键盘事件与以上方法进行绑定，达到调试效果

// 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();
    }
  });

focus模式

在开启focus模式后输出日志会自动获取焦点，配合moveDown() && moveUp() + 键位操作可以移动日志焦点，达到清除单一日志，以及开启toggle()

toggle()方法

当设置focus:true，如果输出的日志信息为Array或者Object时，通过toggle()方法可以对输出的信息进行格式化呈现，便于查看。
例:

var _aconsole = new Aconsole({ focus: true })
_aconsole.show()
_aconsole.log({
	name: "xiaoming",
	age: 14,
	lovenums: [1,2,34,34,435,465,546,4567,4567]
})

输出如下：

_aconsole.toggle()

以上就是aconsole现有的功能，如果有更棒的想法，欢迎issues