Visual Console

This is a demo page for the Visual Console Github Repository

Test It Out

Log Me Info Me Warn Me Error Me Debug Me Count Me Count Reset Start Timer End Timer Alert Me Clear Console

Features

• code Embed this in online code editors like CodePen to debug your console in real time.
• stay_primary_portrait Check your page across devices - even on mobile!
• desktop_windows Debugging your CSS in full screen, no need to change your window size to make room for the developer tools.

• book_online Selecting specific elements from the page to debug them.
• verified_user Local page console history - private by default.
• clear_all Clearing the console doesn't erase everything, your past code is just a click away.

Getting Started

To add Visual Console to your project, add this line to any page you want the console to appear:

<script src="https://adir-sl.github.io/Visual-Console/vconsole.js"></script>

If weight is an issue in your project, there's also the minified version (18.6KB):

<script src="https://adir-sl.github.io/Visual-Console/vconsole.min.js"></script>

How to Disable Visual Console?

When you're done debugging your page and your page is ready for production, it is advised to keep the Visual Console code but comment it out, like the example below, this way you can always uncomment it if you find a new bug, but it will show nothing to the user and will give no error in the actual JavaScript console.

<!-- <script src="https://adir-sl.github.io/Visual-Console/vconsole.js"></script> -->

Start Visual Console Without the Panel?

After loading the script, you can always add to your code this script:

<script>
    toggleConsole();
</script>

Keyboard Shortcuts

• Toggle Visual Console - ~
• Run code - Enter
• Select element from page - Ctrl+H