这是在给沙盒游戏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 的(逃
1
xiqingongzi 2018-02-26 11:48:24 +08:00 1
还是蛮有用的,有些时候可以拿来作为 debug。目前有点不完美的地方是没有自动补全,调试时可能不是很方便。
|
2
Rocka 2018-02-26 12:09:41 +08:00
nwjs 和 electron 都是可以打开开发者控制台的啊 ... (逃
|
3
Lxxyx 2018-02-26 12:35:38 +08:00 2
可以看看 vConsole
|