TVConsole在IPTV机顶盒端开发的应用

概述

IPTV机顶盒开发有很多的坑，爬不完的坑，当然其他开发也是一样……哈哈哈。今天我来说一下IPTV-B/S模式开发中调试的坑。如果你开发过机顶盒项目（以下都特指B/S模式）[没开发过的肯定也不会看这篇文章]，那你肯定经历过这种时候……写完一堆代码，然后浏览器上初步看一遍，哇，完美！赶紧上传服务器，使用机顶盒跑一下，免得代码自动消失了，哈哈哈。一顿 cd ll cp rm -rf / 操作后，启动机顶盒，咦~黑屏，肯定是缓存原因，代码还未更新到，肯定不是我代码的错……等等再重启下，还是黑屏？？？what？？难道真的代码出错？？？怎么办？断点调试下吧（这种方式心里想想就好了）机顶盒上根本打不开控制台好吧！！！此处建议尽早放弃，不过为了工作，毕竟工作使我快乐，还是不放弃吧……继续爬坑。打不开控制台，无法调试，那就console.log呗，多加一些，看看哪些打印了，哪些没打印呗，这不就一样能定位嘛！但……无法打开控制台！！！泪崩……怎么办，那就只能用最另一种宇宙最强的JS API document.getElementById 我打印到页面上总行吧，好吧，遇到比较正常的问题的话，用这种方式也就完美解决了！哎，送了口气……终于解决了！页面总算是打开了，但是……居然焦点不能移动……啊，要崩溃，坑定代码哪里又报错，机顶盒的浏览器真是小气啊，啥高级属性都不能用，又怎么办？

TVConsole

来了，来了，它来了。TVConsole是一个js组件，将其引入页面中，可以显示出一个面板，也就是一个简易的浏览器控制台，就像这样。

tvconsole控制台

这看起来是不是很像一个东西？对，没错，就是VConsole腾讯开发的一款移动端的控制台调试器，最初是用于微信公众号、小程序开发这方便调试用，后来，当程序员都发现了这个东西后，You Know，好东西总是会被用于很多地方，也就普及了。我也就基于这套东西，再包装了一层，用于机顶盒。

为什么再封装？

其实不止是封装，我还修改了一点源代码，这也造成了源码的污染，不利于升级。未来准备采用插件开发，不污染源码，也可以随着主框架的升级而伴随升级。
回归主题，为什么要封装？因为机顶盒开发不同于其他移动端和PC，移动端和PC都可以很容易触发 touch click等事件，但是机顶盒不吃你这套，所有操作都是 遥控器，对，就是这东西！要想点击，那就得重新监听 document.onkeydown 事件，然后触发逻辑。所以咯，再封装了一层。

不讲代码，只讲使用

这里不讲代码，但是你可以在这里TVConsole https://gitee.com/underline/TVConsole
查看代码啊！已经上传码云。
使用：

• 下载 dist/tvconsole.min.js
• 引入到页面 建议在head中引入
• 初始化一个实例 var tvconsole = new TVConsole()
• 此后可以触发 tvconsole.show() 显示界面
• 更多方法，请看这里https://gitee.com/underline/TVConsole

进入界面后都是一些按键操作，按键后面板右上角会显示你的按键，目前支持的按键有（并持续更新）：

• 1： 显示Log面板
• 11： 显示Log下的All面板，12： 显示Log下的Log面板，以此类推
• 2： 显示System面板
• 21 ：显示System下的All面板，以此类推
• #： 隐藏控制台面板
• *：展开控制台打印的Object信息
• **：收起控制台打印的Object信息

暂时完了……在开发的路上越走越远