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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2463 天前的主题，其中的信息可能已经有所发展或是发生改变。

介绍

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