Simulate Browser Console Logs On Webpage - jQuery console.js

Simulate Browser Console Logs On Webpage - jQuery console.js
File Size: 21.9 KB
Views Total: 50
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

console.js is a jQuery plugin that displays highly customizable console messages with different log levels on the page.

It can be used to output debug messages directly on the page, without the user having to open the browser console.

Licensed under the GPLv3.

How to use it:

1. Add jQuery library and the console.js plugin's files to the page.

<link rel="stylesheet" href="/path/to/dist/jquery.console.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.console.min.js"></script>

2. Initialize the plugin on the container element where the console message is to be displayed.

<div class="consoleContainer"></div>
let instance = $(".consoleContainer").console({ 
    // options here
});

3. Output console messages with different levels:

  • Empty: Default
  • 0: Emergency
  • 1: Alert
  • 2: Critical
  • 3: Error
  • 4: Warning
  • 5: Notice
  • 6: Info
  • 7: Debug
instance.log('Console Message Here', msgLevel);

4. Determine whether or not to display timestamps. Default: true.

let instance = $(".consoleContainer").console({ 
    showTimestamp: true,
    timestampOnLeft: false, // right
});

5. Control whether messages are added to the top or bototm of the stack. Default: 'down'.

let instance = $(".consoleContainer").console({ 
    msgDirection: "up"
});

6. Specify the number of console messages to keep. Default: 10000.

let instance = $(".consoleContainer").console({ 
    history: 500
});

7. Determine the time to wait before closing console messages. Default: 0.

let instance = $(".consoleContainer").console({ 
    timeout: 0,
    fadeOutTime: 400,
});

8. Customize the console levels.

let instance = $(".consoleContainer").console({ 
    levels: [
      "emergency", "alert", "critical", "error",
      "warning", "notice", "info", "debug"
    ],
    defaultLevel: 6,
});

9. Determine whether or not to tag odd and even entries. Default: false.

let instance = $(".consoleContainer").console({ 
    tagOddEven: true
});

This awesome jQuery plugin is developed by EatonCiaran. For more Advanced Usages, please check the demo page or visit the official website.