Conzole

v0.1.0 by Pierluigi Pesenti


Conzole is a debug panel built in javascript that wraps javascript native console object methods and functionality in a panel displayed inside the page. Include it once and see it the same every time you open up the page, in every browser, on mobile etc.

It also adds some unique functions as the “watching” list. It let you watch variables as many browsers debug console does. But setting up the watches via javascript is much easier, can be conditional and you don't have to do it every time you launch the browser.

Usage

Include the script just after the <body> open tag:

    </head>
    <body>
        <script type="text/javascript" src="conzole.js"></script>
        <!-- rest of body content -->
    

By default panel is closed. In this demo conzole.open() is being called.

Panel managment

Drag left edge to resize panel.

Press bound keys to accomplish the following tasks (active when focus is not isnide a input item).

Keyboard bindings:

Test keypress while focusing an input field will not trigger conzole methods:

Otherwise call specific methods via javascript:




Basic

Notice the javascript native "console" is called.

or


You can pass multiple arguments to the functions having them concatenated by spaces

Timers

Notice the javascript native "console" is called.




Watch

Primitive variable types (integer, string) are passed by value. Update of the values must be explicitly called every time by re-setting the watching variable.
Object and array variables are passed by reference. conzole.watching variable will refer to the original object and display changes.