这是在给沙盒游戏LOMS提 PR 时做的一个小工具,用于给那些没有 console 的 B/C 端(nw.js 和 electron)应用提供一个 onscreen 的 console。(唔,游戏缺人手,大家可以关注一下,链接在这https://www.v2ex.com/t/393852)
先放个 demo 图吧,你也可以去这里体验。
onscreen-console 改写了原生的 console 对象的 log、warn 和 error 方法,启用了 onscreen-console 以后,直接使用 console.log 、console.warn 和 console.error 就可以了。
npm i -S onscreen-console
import oConsole from 'onscreen-console';
// 启用 onscreen-console
oConsole.enable();
// 显示 console 面板
// 默认启用时显示,也有按键显示,可不调用该方法
oConsole.show();
// 按你平时那样用就好
console.log('This is a log');
console.warn('This is a warn');
console.error('This is a error');
// 或者抛出错误
throw new Error('Error thrown');
// 隐藏 console 面板
oConsole.hide();
// 禁用 onscreen-console
oConsole.disable();
也可以直接在 html 中引入,min 文件在Release下载,放在onscreen-console/dist/min/onscreen-console.min.js
里,并且给 window 绑了 oConsole 对象,直接用就可以了。
<script type="text/javascript" src="onscreen-console.min.js"></script>
<script type="text/javascript">
// 启用 onscreen-console
oConsole.enable();
// 显示 console 面板
// 默认启用时显示,也有按键显示,可不调用该方法
oConsole.show();
// 按你平时那样用就好
console.log('This is a log');
console.warn('This is a warn');
console.error('This is a error');
// 或者抛出错误
throw new Error('Error thrown');
// 隐藏 console 面板
oConsole.hide();
// 禁用 onscreen-console
oConsole.disable();
</script>
命令行的话其实是用 eval 做的,如果要添加全局变量,需要自己绑在 window 对象上,才能访问到。像这样const test = 1; window.test = test;
项目地址https://github.com/Siubaak/onscreen-console,其实我只是来求 star 的(逃
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.