{{>console-basic-css}}

<div class="intro">

<p>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.</p>

</div>

<div class="example yui3-skin-sam">

{{>console-basic-markup}}

{{>console-basic-js}}

</div>

<h3>Markup not required</h3>

<p>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.</p>

<p><em>However</em>, 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.</p>

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

```

<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 corner of page)</em></p>

```

<p>Then instantiate the Console instances.</p>

```

// 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();

});

```

<h3>Log some messages</h3>

<p>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.</p>

```

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

});

```

<h3 id="full_code_listing">Full Code Listing</h3>

<h4>Markup</h4>

```

{{>console-basic-markup}}

```

<h4>JavaScript</h4>

```

{{>console-basic-js}}

```

<h4>CSS</h4>

```

{{>console-basic-css}}

```