ConsoleBox

Dev Console in HTML

Features

• zero dependency
• using standard
• adapt to parent
• console style
• ANSI escape friendly

Usage

HTML

• container should have relative position
• container should have specific height
• if no consoleBox skeleton it will use body
• consoleBox skeleton is absolute cover style

Skeleton:

<div id="any_relative_container">
  <!-- skeleton -->
  <div id="console_box">
    <div id="console_output">
      <div id="console_out"></div>
    </div>
    <div id="console_input">
      <input id="console_in" type="text" autocapitalize="none" autocomplete="off">
    </div>
  </div>
</div>

Programatic:

consoleBox(PARENT_NODE);

JS

Basic

consoleBox.log('Todo');

Overriding

window.defaultConsole = window.console
delete window.console;
// use
window.console = consoleBox;
// restore
window.console = window.defaultConsole;

Roadmap

• console.[log,info,warn,debug,error]
• console.dir[xml]
• console.group[End|Collapse]
• console.table
• console.time[End|log|stamp|line[End]]
• console.count[Reset]
• console.trace
• console.memory
• console.profile[End]
• console.clear
• console.context
• console.createTask
• console.markTimeline +
• console.exception +
• CTRL+Enter for multiline
• remember variable

License

MIT