onscreen-console：一個沒卵用的 console 工具

介紹

這是在給沙盒遊戲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 的（逃