Simulate Browser Console Logs On Webpage - jQuery console.js

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.