YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Console: Creating a Console for debugging

Note: This is YUI 3.x. Looking for YUI 2.x?

## Console: Creating a Console for debugging

This example walks through the basics of setting up and logging messages to a YUI Console instance. Three Console instances are created with slightly different configurations. All calls to `Y.log(..)` will be broadcast to every Console.

View example in new window.

#### Basic Console

#### New messages added to bottom

#### Custom strings

Rendered in default location (top right)

#### Log some messages

### 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:

1. Providing a `boundingBox` node reference.
2. Providing both `boundingBox` and `contentBox` references.
3. 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.

<h4>Basic Console</h4> <div id="basic"></div> <h4>New messages added to bottom</h4> <div id="add_to_bottom"><div></div></div> <h4>Custom strings</h4> <p><em>Rendered in default location (top right)</em></p>

Then instantiate the Console instances.

// Create a YUI instance and request the console module and its dependencies YUI({base:"../../build/", timeout: 10000}).use("console", function (Y) { // Create and render the three Console instances var basic, newOnBottom, customStrings; basic = new Y.Console({ boundingBox: '#basic' }).render(); // note the inline render() newOnBottom = new Y.Console({ boundingBox: '#add_to_bottom', contentBox: '#add_to_bottom > div', newestOnTop: false, visible: false // hidden at instantiation }).render(); customStrings = new Y.Console({ strings: { title : 'Console with custom strings!', pause : 'Wait', clear : 'Flush', collapse : 'Shrink', expand : 'Grow' }, visible: false // hidden at instantiation }).render(); });

### 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.

// 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; ... 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'); }); });

### 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

<div id="demo"> <h4>Basic Console</h4> <div id="basic"></div> <p> <button type="button" id="toggle_basic">hide console</button> </p> <h4>New messages added to bottom</h4> <div id="add_to_bottom"><div></div></div> <p> <button type="button" id="toggle_atb">show console</button> </p> <h4>Custom strings</h4> <p><em>Rendered in default location (top right)</em></p> <p> <button type="button" id="toggle_cstrings">show console</button> </p> <h4>Log some messages</h4> <p> <input type="text" id="info_text" value="I'm an info message!"> <button type="button" id="info">log info message</button> </p> <p> <input type="text" id="warn_text" value="I'm a warning!"> <button type="button" id="warn">log warning</button> </p> <p> <input type="text" id="error_text" value="I'm an error!"> <button type="button" id="error">log error</button> </p> </div>

#### 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'); }); });

#### CSS

/* Override default positioning for two of the example Consoles */ #basic, #add_to_bottom { position: static; } /* Reapply some style settings that were overridden by the page chrome */ #demo .yui-console .yui-console-title { border: 0 none; color: #000; font-size: 13px; font-weight: bold; margin: 0; text-transform: none; } #demo .yui-console .yui-console-entry-meta { margin: 0; }

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings