YUI Library Home

YUI Library Examples: Logger Control: Configuring LogReader

Logger Control: Configuring LogReader

Demonstrations of LogReader configurations.

Compact Output

INFO 1931ms (+812) 10:49:48 AM: LogReader  instance0: LogReader initialized
INFO 1119ms (+0) 10:49:47 AM: Get: Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+0) 10:49:47 AM: Get: attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+1119) 10:49:47 AM: Get: _next: q0, loaded: undefined
INFO 0ms (+0) 10:49:46 AM: global: Logger initialized

Example: Compact Ouput

Log a simple message

By default, log messages are printed to the console with a good deal of whitespace for better readability. In this example, verbose output has been disabled so each message gets output on a single line without wrapping.

Sample Code

1<body> 
2<div id="compact"></div> 
3 
4<script type="text/javascript"> 
5var myCompact = new YAHOO.widget.LogReader("compact", {verboseOutput:false}); 
6myCompact.setTitle("Compact Output"); 
7</script> 
8</body> 
9             
view plain | print | ?

Footer Disabled

INFO 1950ms (+19) 10:49:48 AM:
LogReader  instance1
LogReader initialized
INFO 1931ms (+812) 10:49:48 AM:
LogReader  instance0
LogReader initialized
INFO 1119ms (+0) 10:49:47 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+0) 10:49:47 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+1119) 10:49:47 AM:
Get
_next: q0, loaded: undefined
INFO 0ms (+0) 10:49:46 AM:
global
Logger initialized

Example: Footer Disabled

Log a simple message

By default, the footer displays checkboxes for easy filtration of log messages by category and by source, as well as buttons to pause/resume output and clear the console. In this example, the footer is hidden from the UI, but filters can still be enabled or disabled programmatically.

Hide "info" Category Show "info" Category

Sample Code

1<body> 
2<div id="compact"></div> 
3 
4<script type="text/javascript"> 
5var myFooterDisabled = new YAHOO.widget.LogReader("nofooter", {footerEnabled:false}); 
6myFooterDisabled.setTitle("Footer Disabled"); 
7</script> 
8</body> 
9             
view plain | print | ?

Oldest On Top

INFO 0ms (+0) 10:49:46 AM:
global
Logger initialized
INFO 1119ms (+1119) 10:49:47 AM:
Get
_next: q0, loaded: undefined
INFO 1119ms (+0) 10:49:47 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+0) 10:49:47 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1931ms (+812) 10:49:48 AM:
LogReader  instance0
LogReader initialized
INFO 1950ms (+19) 10:49:48 AM:
LogReader  instance1
LogReader initialized
INFO 1951ms (+1) 10:49:48 AM:
LogReader  instance2
LogReader initialized

Example: Oldest On Top

Log a simple message

By default, new messages get prepended at the top of the console. In this example, new messages get appended at the bottom of the console.

Sample Code

1<body> 
2<div id="oldestOnTop"></div> 
3 
4<script type="text/javascript"> 
5var myOldestOnTop = new YAHOO.widget.LogReader("oldestOnTop", {newestOnTop:false}); 
6myOldestOnTop.setTitle("Oldest On Top"); 
7</script> 
8</body> 
9         
view plain | print | ?

Undraggable

INFO 1952ms (+1) 10:49:48 AM:
LogReader  instance3
LogReader initialized
INFO 1951ms (+1) 10:49:48 AM:
LogReader  instance2
LogReader initialized
INFO 1950ms (+19) 10:49:48 AM:
LogReader  instance1
LogReader initialized
INFO 1931ms (+812) 10:49:48 AM:
LogReader  instance0
LogReader initialized
INFO 1119ms (+0) 10:49:47 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+0) 10:49:47 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+1119) 10:49:47 AM:
Get
_next: q0, loaded: undefined
INFO 0ms (+0) 10:49:46 AM:
global
Logger initialized

Example: Undraggable

Log a simple message

Although the Drag and Drop Utility is available on the page, draggability of this LogReader has been disabled.

Sample Code

1<body> 
2<div id="undraggable"></div> 
3 
4<script type="text/javascript"> 
5var myUndraggable = new YAHOO.widget.LogReader("undraggable", {draggable:false}); 
6myUndraggable.setTitle("Undraggable"); 
7</script> 
8</body> 
9         
view plain | print | ?

Filtered LogReader: Global Messages Only

INFO 1119ms (+0) 10:49:47 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+0) 10:49:47 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+1119) 10:49:47 AM:
Get
_next: q0, loaded: undefined
INFO 0ms (+0) 10:49:46 AM:
global
Logger initialized

Filtered LogReader: LogReader Messages Only

INFO 1954ms (+1) 10:49:48 AM:
LogReader  instance5
LogReader initialized
INFO 1953ms (+1) 10:49:48 AM:
LogReader  instance4
LogReader initialized
INFO 1952ms (+1) 10:49:48 AM:
LogReader  instance3
LogReader initialized
INFO 1951ms (+1) 10:49:48 AM:
LogReader  instance2
LogReader initialized
INFO 1950ms (+19) 10:49:48 AM:
LogReader  instance1
LogReader initialized
INFO 1931ms (+812) 10:49:48 AM:
LogReader  instance0
LogReader initialized
INFO 1119ms (+0) 10:49:47 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+0) 10:49:47 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+0) 10:49:47 AM:
Get
_next: q0, loaded: undefined

Example: Filtered Output

Log a simple message

The first LogReader will show only global info messages. The second LogReader will only show info messages coming from the "LogReader" class.

Sample Code

1<body> 
2<div id="filtered"></div> 
3 
4<script type="text/javascript"> 
5var myFiltered1 = new YAHOO.widget.LogReader("filtered"); 
6var myFiltered2 = new YAHOO.widget.LogReader("filtered"); 
7myFiltered1.hideCategory("warn"); 
8myFiltered1.hideCategory("error"); 
9myFiltered1.hideCategory("time"); 
10myFiltered1.hideCategory("window"); 
11myFiltered2.hideCategory("warn"); 
12myFiltered2.hideCategory("error"); 
13myFiltered2.hideCategory("time"); 
14myFiltered2.hideCategory("window"); 
15myFiltered1.hideSource("LogReader"); 
16myFiltered2.hideSource("global"); 
17myFiltered1.setTitle("Filtered LogReader: Global Messages Only"); 
18myFiltered2.setTitle("Filtered LogReader: LogReader Messages Only"); 
19</script> 
20</body> 
21         
view plain | print | ?

3 Second Ouput Buffer

INFO 1960ms (+6) 10:49:48 AM:
LogReader  instance6
LogReader initialized
INFO 1954ms (+1) 10:49:48 AM:
LogReader  instance5
LogReader initialized
INFO 1953ms (+1) 10:49:48 AM:
LogReader  instance4
LogReader initialized
INFO 1952ms (+1) 10:49:48 AM:
LogReader  instance3
LogReader initialized
INFO 1951ms (+1) 10:49:48 AM:
LogReader  instance2
LogReader initialized
INFO 1950ms (+19) 10:49:48 AM:
LogReader  instance1
LogReader initialized
INFO 1931ms (+812) 10:49:48 AM:
LogReader  instance0
LogReader initialized
INFO 1119ms (+0) 10:49:47 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+0) 10:49:47 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+1119) 10:49:47 AM:
Get
_next: q0, loaded: undefined
INFO 0ms (+0) 10:49:46 AM:
global
Logger initialized

Example: Buffered

Log a simple message

Output buffer has been increased to 3 seconds. Therefore, messages are printed to the screen every 3 seconds.

Sample Code

1<body> 
2<div id="paused"></div> 
3 
4<script type="text/javascript"> 
5var myBuffered = new YAHOO.widget.LogReader("buffered", {outputBuffer:3000}); 
6myPaused.setTitle("3 Second Output Buffer"); 
7</script> 
8</body> 
9         
view plain | print | ?

Paused LogReader

INFO 1961ms (+1) 10:49:48 AM:
LogReader  instance7
LogReader initialized
INFO 1960ms (+6) 10:49:48 AM:
LogReader  instance6
LogReader initialized
INFO 1954ms (+1) 10:49:48 AM:
LogReader  instance5
LogReader initialized
INFO 1953ms (+1) 10:49:48 AM:
LogReader  instance4
LogReader initialized
INFO 1952ms (+1) 10:49:48 AM:
LogReader  instance3
LogReader initialized
INFO 1951ms (+1) 10:49:48 AM:
LogReader  instance2
LogReader initialized
INFO 1950ms (+19) 10:49:48 AM:
LogReader  instance1
LogReader initialized
INFO 1931ms (+812) 10:49:48 AM:
LogReader  instance0
LogReader initialized
INFO 1119ms (+0) 10:49:47 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+0) 10:49:47 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+1119) 10:49:47 AM:
Get
_next: q0, loaded: undefined
INFO 0ms (+0) 10:49:46 AM:
global
Logger initialized

Example: Paused

Resume this LogReader | Pause this LogReader | Log a simple message

Output has been paused.

Sample Code

1<body> 
2<div id="paused"></div> 
3 
4<script type="text/javascript"> 
5var myPaused = new YAHOO.widget.LogReader("paused"); 
6myPaused.pause(); 
7myPaused.setTitle("Paused LogReader"); 
8</script> 
9</body> 
10         
view plain | print | ?

Collapsed LogReader

Example: Collapsed

Log a simple message

The LogReader console has been collapsed.

Sample Code

1<body> 
2<div id="collapsed"></div> 
3 
4<script type="text/javascript"> 
5var myCollapsed = new YAHOO.widget.LogReader("collapsed"); 
6myCollapsed.collapse(); 
7myCollapsed.setTitle("Collapsed LogReader"); 
8</script> 
9</body> 
10         
view plain | print | ?

Example: Hidden

Show this LogReader | Hide this LogReader | Log a simple message

The entire LogReader console has been hidden.

Sample Code

1<body> 
2<div id="hidden"></div> 
3 
4<script type="text/javascript"> 
5var myHidden = new YAHOO.widget.LogReader("hidden"); 
6myHidden.hide(); 
7myHidden.setTitle("Hidden LogReader"); 
8</script> 
9</body> 
10         
view plain | print | ?

Styled via Custom CSS

INFO 1965ms (+1) 10:49:48 AM:
LogReader  instance10
LogReader initialized
INFO 1964ms (+2) 10:49:48 AM:
LogReader  instance9
LogReader initialized
INFO 1962ms (+1) 10:49:48 AM:
LogReader  instance8
LogReader initialized
INFO 1961ms (+1) 10:49:48 AM:
LogReader  instance7
LogReader initialized
INFO 1960ms (+6) 10:49:48 AM:
LogReader  instance6
LogReader initialized
INFO 1954ms (+1) 10:49:48 AM:
LogReader  instance5
LogReader initialized
INFO 1953ms (+1) 10:49:48 AM:
LogReader  instance4
LogReader initialized
INFO 1952ms (+1) 10:49:48 AM:
LogReader  instance3
LogReader initialized
INFO 1951ms (+1) 10:49:48 AM:
LogReader  instance2
LogReader initialized
INFO 1950ms (+19) 10:49:48 AM:
LogReader  instance1
LogReader initialized
INFO 1931ms (+812) 10:49:48 AM:
LogReader  instance0
LogReader initialized
INFO 1119ms (+0) 10:49:47 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+0) 10:49:47 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 1119ms (+1119) 10:49:47 AM:
Get
_next: q0, loaded: undefined
INFO 0ms (+0) 10:49:46 AM:
global
Logger initialized

Example: Styled via Custom CSS

Log a simple message

The UI has been customized via custom CSS.

Sample Code

1<head> 
2<style type="text/css"> 
3#styled {font-family:verdana;} 
4#styled .info {background-color:blue;} 
5#styled .warn {background-color:green;} 
6#styled .error {background-color:red;} 
7#styled .time {background-color:orange;} 
8#styled .window {background-color:yellow;} 
9</style> 
10</head> 
11 
12<body> 
13<div id="styled"></div> 
14 
15<script type="text/javascript"> 
16var myStyled = new YAHOO.widget.LogReader("styled"); 
17myStyled.setTitle("Styled via Custom CSS"); 
18</script> 
19</body> 
20         
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

More Logger Control Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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