YUI 3.x Home -

YUI Library Examples: Console: Creating a Console for debugging

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.

  1. <h4>Basic Console</h4>
  2. <div id="basic"></div>
  3.  
  4. <h4>New messages added to bottom</h4>
  5. <div id="add_to_bottom"><div></div></div>
  6.  
  7. <h4>Custom strings</h4>
  8. <p><em>Rendered in default location (top right)</em></p>
<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.

  1. // Create a YUI instance and request the console module and its dependencies
  2. YUI({base:"../../build/", timeout: 10000}).use("console", "console-filters", "dd-plugin", function (Y) {
  3.  
  4. // Create and render the three Console instances
  5. var basic, newOnBottom, customStrings;
  6.  
  7. basic = new Y.Console({
  8.     boundingBox: '#basic',
  9.     style: 'block' // keeps the Console in the page flow as a block element
  10. }).render(); // note the inline render()
  11.  
  12. newOnBottom = new Y.Console({
  13.     boundingBox: '#add_to_bottom',
  14.     contentBox:  '#add_to_bottom > div',
  15.     style: 'inline', // keeps the Console in the page flow as an inline element
  16.     newestOnTop: false,
  17.     visible: false   // hidden at instantiation
  18. }).render();
  19.  
  20. customStrings = new Y.Console({
  21.     strings: {
  22.         title : 'Console with custom strings!',
  23.         pause : 'Wait',
  24.         clear : 'Flush',
  25.         collapse : 'Shrink',
  26.         expand : 'Grow'
  27.     },
  28.     plugins: [ Y.Plugin.Drag, Y.Plugin.ConsoleFilters ], // add some plugins
  29.     visible: false  // hidden at instantiation
  30. }).render();
  31.  
  32. });
// Create a YUI instance and request the console module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("console", "console-filters", "dd-plugin", function (Y) {
 
// Create and render the three Console instances
var basic, newOnBottom, customStrings;
 
basic = new Y.Console({
    boundingBox: '#basic',
    style: 'block' // keeps the Console in the page flow as a block element
}).render(); // note the inline render()
 
newOnBottom = new Y.Console({
    boundingBox: '#add_to_bottom',
    contentBox:  '#add_to_bottom > div',
    style: 'inline', // keeps the Console in the page flow as an inline element
    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'
    },
    plugins: [ Y.Plugin.Drag, Y.Plugin.ConsoleFilters ], // add some plugins
    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.

  1. // Create a YUI instance and request the console module and its dependencies
  2. YUI({base:"../../build/", timeout: 10000}).use("console", "console-filters", "dd-plugin", function (Y) {
  3.  
  4. // Create and render the three Console instances
  5. var basic, newOnBottom, customStrings;
  6.  
  7. ...
  8.  
  9. function report(e,type) {
  10.     Y.log(this.get('value'),type);
  11. }
  12.  
  13. // Set the context of the event handler to the input text node
  14. // for convenience and pass the message type as a second arg
  15. Y.on('click', report, '#info',  Y.one('#info_text'),  'info');
  16. Y.on('click', report, '#warn',  Y.one('#warn_text'),  'warn');
  17. Y.on('click', report, '#error', Y.one('#error_text'), 'error');
  18.  
  19. });
// Create a YUI instance and request the console module and its dependencies
YUI({base:"../../build/", timeout: 10000}).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

  1. <div id="demo">
  2.     <h4>Basic Console</h4>
  3.     <div id="basic"></div>
  4.     <p>
  5.         <button type="button" id="toggle_basic">hide console</button>
  6.     </p>
  7.  
  8.     <h4>New messages added to bottom</h4>
  9.     <div id="add_to_bottom"><div></div></div>
  10.     <p>
  11.         <button type="button" id="toggle_atb">show console</button>
  12.     </p>
  13.  
  14.     <h4>Custom strings</h4>
  15.     <p><em>Rendered in default location (top right)</em></p>
  16.     <p>
  17.         <button type="button" id="toggle_cstrings">show console</button>
  18.     </p>
  19.  
  20.     <h4>Log some messages</h4>
  21.     <p>
  22.         <input type="text" id="info_text" value="I'm an info message!">
  23.         <button type="button" id="info">log info message</button>
  24.     </p>
  25.     <p>
  26.         <input type="text" id="warn_text" value="I'm a warning!">
  27.         <button type="button" id="warn">log warning</button>
  28.     </p>
  29.     <p>
  30.         <input type="text" id="error_text" value="I'm an error!">
  31.         <button type="button" id="error">log error</button>
  32.     </p>
  33. </div>
<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

  1. // Create a YUI instance and request the console module and its dependencies
  2. YUI({base:"../../build/", timeout: 10000}).use("console", "console-filters", "dd-plugin", function (Y) {
  3.  
  4. // Create and render the three Console instances
  5. var basic, newOnBottom, customStrings;
  6.  
  7. basic = new Y.Console({
  8.     boundingBox: '#basic',
  9.     style: 'block' // keeps the Console in the page flow as a block element
  10. }).render();
  11.  
  12. newOnBottom = new Y.Console({
  13.     boundingBox: '#add_to_bottom',
  14.     contentBox:  '#add_to_bottom > div',
  15.     style: 'inline', // keeps the Console in the page flow as an inline element
  16.     newestOnTop: false,
  17.     visible: false
  18. }).render();
  19.  
  20. customStrings = new Y.Console({
  21.     strings: {
  22.         title : 'Draggable Console with filters!',
  23.         pause : 'Wait',
  24.         clear : 'Flush',
  25.         collapse : 'Shrink',
  26.         expand : 'Grow'
  27.     },
  28.     plugins: [ Y.Plugin.Drag, Y.Plugin.ConsoleFilters ], // add some plugins
  29.     visible: false
  30. }).render();
  31.  
  32. // Set up the button listeners
  33. function toggle(e,cnsl) {
  34.     if (cnsl.get('visible')) {
  35.         cnsl.hide();
  36.         this.set('innerHTML','show console');
  37.     } else {
  38.         cnsl.show();
  39.         this.set('innerHTML','hide console');
  40.     }
  41. }
  42.  
  43. function report(e,type) {
  44.     Y.log(this.get('value'),type);
  45. }
  46.  
  47. // Display a message in the Console for reference
  48. Y.log("Click the buttons below to log messages");
  49.  
  50. // Pass the corresponding Console instance to the handler as a second arg
  51. Y.on('click', toggle, '#toggle_basic',    null, basic);
  52. Y.on('click', toggle, '#toggle_atb',      null, newOnBottom);
  53. Y.on('click', toggle, '#toggle_cstrings', null, customStrings);
  54.  
  55. // Set the context of the event handler to the input text node
  56. // for convenience and pass the message type as a second arg
  57. Y.on('click', report, '#info',  Y.one('#info_text'),  'info');
  58. Y.on('click', report, '#warn',  Y.one('#warn_text'),  'warn');
  59. Y.on('click', report, '#error', Y.one('#error_text'), 'error');
  60.  
  61. });
// Create a YUI instance and request the console module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("console", "console-filters", "dd-plugin", function (Y) {
 
// Create and render the three Console instances
var basic, newOnBottom, customStrings;
 
basic = new Y.Console({
    boundingBox: '#basic',
    style: 'block' // keeps the Console in the page flow as a block element
}).render();
 
newOnBottom = new Y.Console({
    boundingBox: '#add_to_bottom',
    contentBox:  '#add_to_bottom > div',
    style: 'inline', // keeps the Console in the page flow as an inline element
    newestOnTop: false,
    visible: false
}).render();
 
customStrings = new Y.Console({
    strings: {
        title : 'Draggable Console with filters!',
        pause : 'Wait',
        clear : 'Flush',
        collapse : 'Shrink',
        expand : 'Grow'
    },
    plugins: [ Y.Plugin.Drag, Y.Plugin.ConsoleFilters ], // add some plugins
    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');
    }
}
 
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

  1. /* Override default positioning for two of the example Consoles */
  2. #basic, #add_to_bottom {
  3.     margin-bottom: 1em;
  4. }
  5.  
  6. /* Reapply some style settings that were overridden by the page chrome */
  7. #demo .yui-console .yui-console-title {
  8.     border: 0 none;
  9.     color: #000;
  10.     font-size: 13px;
  11.     font-weight: bold;
  12.     margin: 0;
  13.     text-transform: none;
  14. }
  15. #demo .yui-console .yui-console-entry-meta {
  16.     margin: 0;
  17. }
/* 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 .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;
}

More Console Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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