Custom Console Log Dialog In Pure JavaScript – logee.js

Preview:

Description:

Just another console logger JS library that displays the console messages in a customizable, draggable, resizable dialog box.

How to use it:

Load the stylesheet ‘logee.min.css’ and JavaScript ‘logee.min.js’ in your html document.

<script src="logee.min.js"></script>
<link href="logee.min.css" rel="stylesheet">

Initialize the logee.js and you’re ready to go.

Logee.init();

The JavaScript to display custom log messages in the dialog box.

// displays each argument on a new line, colored by its type
console.log('Log String', 1234, true); 
// displays each argument on a new line, colored in orange
console.warn('This', 'is', 'a', 'warning', 'msg'); 
// displays a full json with syntax highlighting
console.log({name: 'Nemanja', age: 123 });
// logs in the console but not in the Logee box
console.log('something');

Clear the console logs.

console.clear();

Default user accessible options.

const userAccessibleOptions = {
  // flag determining if the user can use the launch shortcut
  useLaunchShortcut     : true, 
  // keyboard key that shows/hides Logee when pressed while holding ctrl
  launchKeyString       : 'L',  
  // determines if Logee should be attached to the console or has to be used independently
  shouldAttachToConsole : true  
  
};