onscreen-console:一个没卵用的 console 工具

2018-02-26 11:35:38 +08:00
 qiuyk

介绍

这是在给沙盒游戏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 的(逃

2842 次点击
所在节点    JavaScript
5 条回复
xiqingongzi
2018-02-26 11:48:24 +08:00
还是蛮有用的,有些时候可以拿来作为 debug。目前有点不完美的地方是没有自动补全,调试时可能不是很方便。
Rocka
2018-02-26 12:09:41 +08:00
nwjs 和 electron 都是可以打开开发者控制台的啊 ... (逃
Lxxyx
2018-02-26 12:35:38 +08:00
可以看看 vConsole
qiuyk
2018-02-26 12:54:42 +08:00
@Rocka 是的 233 只是举个例子
qiuyk
2018-02-26 13:13:52 +08:00
@Lxxyx 学习了 慢慢完善一下

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/432682

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX