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.
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 it can be rendered into a containing element just as any other Widget. We'll do that for the first two Consoles, then for the third we'll call render with no input, allowing the default 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> <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().use("console", "console-filters", "dd-plugin", function (Y) { // Create and render the three Console instances var basic, newOnBottom, customStrings; basic = new Y.Console({ style: 'block' // keeps the Console in the page flow as a block element }).render( "#basic" ); // note the inline render() newOnBottom = new Y.Console({ style: 'inline', // keeps the Console in the page flow as an inline element newestOnTop: false, visible: false // hidden at instantiation }).render( "#add_to_bottom" ); customStrings = new Y.Console({ strings: { title : 'Console with custom strings!', pause : 'Wait', clear : 'Flush', collapse : 'Shrink', expand : 'Grow' }, visible: false // hidden at instantiation }).plug(Y.Plugin.ConsoleFilters) .plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] }) .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().use("console", "console-filters", "dd-plugin", function (Y) { // Create and render the three Console instances var basic, newOnBottom, customStrings; ... function report(e,type) { Y.log(this.get('value'),type); } // Set the context of the event handler to the input text node // for convenience and pass the message type as a second arg Y.on('click', report, '#info', Y.one('#info_text'), 'info'); Y.on('click', report, '#warn', Y.one('#warn_text'), 'warn'); Y.on('click', report, '#error', Y.one('#error_text'), 'error'); });
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> <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().use("console", "console-filters", "dd-plugin", function (Y) { // Create and render the three Console instances var basic, newOnBottom, customStrings; basic = new Y.Console({ style: 'block' // keeps the Console in the page flow as a block element }).render( "#basic" ); newOnBottom = new Y.Console({ style: 'inline', // keeps the Console in the page flow as an inline element newestOnTop: false, visible: false }).render( "#add_to_bottom" ); customStrings = new Y.Console({ strings: { title : 'Draggable Console with filters!', pause : 'Wait', clear : 'Flush', collapse : 'Shrink', expand : 'Grow' }, visible: false }).plug(Y.Plugin.ConsoleFilters) .plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] }) .render(); // Set up the button listeners function toggle(e,cnsl) { if (cnsl.get('visible')) { cnsl.hide(); this.set('innerHTML','show console'); } else { cnsl.show(); cnsl.syncUI(); // to handle any UI changes queued while hidden. this.set('innerHTML','hide console'); } } function report(e,type) { Y.log(this.get('value'),type); } // Display a message in the Console for reference Y.log("Click the buttons below to log messages"); // Pass the corresponding Console instance to the handler as a second arg Y.on('click', toggle, '#toggle_basic', null, basic); Y.on('click', toggle, '#toggle_atb', null, newOnBottom); Y.on('click', toggle, '#toggle_cstrings', null, customStrings); // Set the context of the event handler to the input text node // for convenience and pass the message type as a second arg Y.on('click', report, '#info', Y.one('#info_text'), 'info'); Y.on('click', report, '#warn', Y.one('#warn_text'), 'warn'); Y.on('click', report, '#error', Y.one('#error_text'), 'error'); });
CSS
/* Override default positioning for two of the example Consoles */ #basic, #add_to_bottom { margin-bottom: 1em; } /* Reapply some style settings that were overridden by the page chrome */ #demo .yui3-console .yui3-console-title { border: 0 none; color: #000; font-size: 13px; font-weight: bold; margin: 0; text-transform: none; } #demo .yui3-console .yui3-console-entry-meta { margin: 0; }
