YUI Library Examples: Console: Creating a Console for debugging

Console: Creating a Console for debugging

Markup not required

The primary purpose of the Console is to aid in debugging your application. As such, it doesn't make much sense to require your page to include markup for something that is not bound for production.

However, Console is built on the Widget framework, so for this example, we'll illustrate three ways to place a Console instance on the page:

Providing a boundingBox node reference.
Providing both boundingBox and contentBox references.
Using the default rendering behavior.

For the first two cases, we need to set up some markup. We'll throw in some placeholder content for the third.

Then instantiate the Console instances.

Log some messages

In your code, inserting calls to Y.log(..) will cause the content of those log messages to be broadcast to every Console instance present in the YUI instance. We'll illustrate this by creating some buttons to log various types of messages.

A touch of CSS

For this example, it was more appropriate for the Consoles to be nested in the content for coherency. To facilitate this, the default absolute positioning for the first two Consoles was overridden to static. Also, some page styles cascaded to the Consoles, so a handful of other styles needed to be forcibly reapplied using more specific selectors. The CSS is included below.

Full Code Listing

Markup

JavaScript

// Create a YUI instance and request the console module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("console", function (Y) {

// To eliminate duplicate reporting in native console in supporting browsers
Y.config.useBrowserConsole = false;

// Create and render the three Console instances
var basic, newOnBottom, customStrings;

basic = new Y.Console({
    boundingBox: '#basic'
}).render();

newOnBottom = new Y.Console({
    boundingBox: '#add_to_bottom',
    contentBox:  '#add_to_bottom > div',
    newestOnTop: false,
    visible: false
}).render();

customStrings = new Y.Console({
    strings: {
        title : 'Console with custom strings!',
        pause : 'Wait',
        clear : 'Flush'
    },
    visible: false
}).render();

// Set up the button listeners
function toggle(e,cnsl) {
    if (cnsl.get('visible')) {
        cnsl.hide();
        this.set('innerHTML','show console');
    } else {
        cnsl.show();
        this.set('innerHTML','hide console');
    }
}

Y.get('#toggle_basic').on('click',    toggle, null, basic);
Y.get('#toggle_atb').on('click',      toggle, null, newOnBottom);
Y.get('#toggle_cstrings').on('click', toggle, null, customStrings);

Y.get('#info').on('click', function () {
    Y.log(Y.get('#info_text').get('value'), 'info');
});
Y.get('#warn').on('click', function () {
    Y.log(Y.get('#warn_text').get('value'), 'warn');
});
Y.get('#error').on('click', function () {
    Y.log(Y.get('#error_text').get('value'), 'error');
});

});

YUI Library Examples: Console: Creating a Console for debugging

Console: Creating a Console for debugging

Markup not required

Log some messages

A touch of CSS

Full Code Listing

Markup

JavaScript

CSS

Console Examples:

More Console Resources:

YUI Library Examples: Console: Creating a Console for debugging

Console: Creating a Console for debugging

Basic Console

New messages added to bottom

Custom strings

Log some messages

Markup not required

Log some messages

A touch of CSS

Full Code Listing

Markup

JavaScript

CSS

Console Examples:

More Console Resources: