1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
{{>console-yui-config-css}}
<div class="intro">
<p>This example illustrates how to configure your YUI instance to ignore certain log messages to aid in reducing the signal-to-noise ratio when debugging.</p>
<p>Log messages filtered out from the YUI config are permanently ignored. If you want to be able to temporarily hide and reshow messages, use the <a href="../console-filters/">ConsoleFilters plugin</a>. It is not uncommon to set up `logInclude` or `logExclude` in the YUI configuration and use the ConsoleFilters plugin.</p>
<p>Log messages can be ignored based on the source (e.g. `event` or `attribute`) or based on their log level (info, warn, error).</p>
</div>
<div class="example yui3-skin-sam">
{{>console-yui-config-markup}}
{{>console-yui-config-js}}
</div>
<h3>Setting up filters in the YUI configuration</h3>
<p>The configuration object passed to the YUI constructor supports a few settings that can help manage Console output while debugging. These configuration options are `logExclude`, `logInclude`, `logLevel`, `filter`, and `filters`.</p>
<p>This example will show the use of the `logInclude`, `logExclude`, and `logLevel` configurations.</p>
<p>An example configuration might look like this:</p>
```
YUI({
filter : 'debug', // request -debug versions of modules for log statements
logExclude : {
event : true, // Don't broadcast log messages from the event module
attribute : true, // or the attribute module
widget : true // or the widget module
},
logLevel : 'error', // Show only errors in the Console
useBrowserConsole : false // Don't use the browser's native console
}).use('overlay','anim','console', function (Y) {
/* Console instances will default to logLevel = "info" */
});
```
<p>`logExclude` and `logInclude` prevent the logging subsystem from broadcasting filtered log messages. `logLevel`, on the other hand is used by Console instances to filter messages received from the subsystem.</p>
<p>Updating `Y.config.logExclude` or `Y.config.logInclude` at runtime will immediately change the subsystem filtering, but will not recover messages previously sent from that source.</p>
```
YUI({
logExclude : {
event : true
}
}).use('console', function (Y) {
/* In here, Y.config refers to the config object passed to the constructor */
// Stop broadcasting log messages from the attribute module
Y.config.logExclude.attribute = true;
// Start broadcasting log messages from the event module again
delete Y.config.logExclude.event;
});
```
<p>When a Console is instantiated, barring explicit `logLevel` attribute configuration, the `logLevel` will be adopted from the YUI instance's configured `logLevel`, or `Y.Console.LOG_LEVEL_INFO` ("info") as a fallback. Unlike `logExclude`, changing the value in the YUI configuration will only affect instantiated Consoles from that point on. Additionally, you can manually override the `logLevel` a Console instance will display by updating its `logLevel` attribute.</p>
```
YUI({ logLevel : "warn" }).use('console', function (Y) {
var yconsole_1 = new Y.Console(); // logLevel == "warn"
var yconsole_2 = new Y.Console({
logLevel : "info" // override at construction
});
// This will not affect yconsole_1 or yconsole_2
Y.config.logLevel = "error";
var yconsole_3 = new Y.Console(); // logLevel == "error"
yconsole_1.set("logLevel", "info"); // update this instance
});
```
<p>The interactive portion of this example illustrates the effect of various filter settings against logged messages. In a real application, it is most likely that the logging configuration won't be changed at runtime but set once in the YUI configuration at construction.</p>
<p>The most relevant portion of the <a href="#full_code_listing">code for the demo above</a> is the updating of the YUI config and Console attribute.</p>
```
// Create and render the Console
var yconsole = new Y.Console({
boundingBox: '#console', // anchored to the page for the demo
style: "block"
}).render();
...
// Source include or exclude select
Y.on("change", function () {
if (this.get("value") === "logInclude") {
delete Y.config.logExclude;
} else {
delete Y.config.logInclude;
}
updatePreview();
}, "#incexc");
// These functions are called from a delegated event handler.
// See the Full Code Listing for how they are called.
function updateSourceFilters(source, checked) {
var disposition = Y.one("#incexc").get("value"),
cfg = Y.config[disposition]; // Y.config.logInclude or logExclude
if (checked) {
if (!cfg) {
cfg = Y.config[disposition] = {};
}
cfg[source] = true; // e.g. Y.config.logInclude.sourceA = true;
} else {
delete cfg[source];
if (!Y.Object.size(cfg)) {
delete Y.config[disposition];
}
}
updatePreview();
}
function updateLogLevel(level, checked) {
if (checked) {
Y.config.logLevel = level;
yconsole.set("logLevel", level);
updatePreview();
}
}
```
<h3 id="full_code_listing">Full Code Listing</h3>
<h4>Markup</h4>
```
{{>console-yui-config-markup}}
```
<h4>JavaScript</h4>
```
{{>console-yui-config-js}}
```
<h4>CSS</h4>
```
{{>console-yui-config-css}}
```