JavaScript Library To Browser Logging Without Opening Console | logee.js

LogeeJS is a regular JavaScript library that extends the console API and allows basic logging without opening the browser console.

LogeeJS creates a drag-and-drop box at the top of your page that displays log messages with styles. All current console methods behave as they do in the browser console, and some display logs in the Logee box as well. Methods not in the backup console object to console.log in the browser console.

Note: This work is still in progress. The functionality has been tested in the latest version of Chrome and Firefox but the proper test is not yet included.

How to make use of it:

1. Load the ‘logee.min.css‘ style sheet and ‘logee.min.js’ javascript in your HTML document.

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

2. Start logee.js and you are ready to go.

Logee.init();

3. JavaScript to display custom log messages in the dialog.

// 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');

4. Clear console logs.

console.clear();

5. The default user options that can be accessed.

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  
  
};

Control

Logee box header contains:

• A button to clear the console,
• Two buttons to increase/decrease the font size
• A button to minimize/maximize Logee box

Additionally, you can :

• Click on the header to drag the Logee box around the screen
• Click on the small resizer in the bottom right corner of the footer to resize Logee box
• Press Ctrl+L to show/hide Logee box

custom console log dialog, LogeeJS Plugin/Github

See Demo And Download

Official Website(nem035): Click Here

This superior jQuery/javascript plugin is developed by nem035. For extra advanced usage, please go to the official website.