-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
233 lines (215 loc) · 8.46 KB
/
index.html
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html>
<head>
<title>Conzole</title>
<style>
body {
background: #f0f0f0;
font-family: Helvetica, sans-serif;
padding: 0 1em;
}
a {
text-decoration: none;
color: #900; font-weight: bold;
}
a:hover {
text-decoration: underline;
}
button {
font-family: Consolas, monospace;
border: 1px solid #aaa;
border-radius: 5px;
padding: .35em 1em;
border-bottom-width: 3px;
cursor: pointer;
font-size: 14px;
margin: 0 1em .3em 1em;
}
button:hover {
background-color: #d0d0d0;
}
header {
background: #444;
color: #fc0; font-family: Consolas, monospace;
width: 30%;
min-width: 5em;
font-size: 32px;
margin: 1em 0 1em -1em; border-radius: 11px;
}
header h1, header h2 {
padding: 10px 32px; margin: 0;
}
header h1 {
font-size: 32px;
margin-bottom: 0; padding-bottom: 0;
}
header h2 {
font-size: 12px; font-family: Helvetica, Arial, sans-serif;
margin-top: 0; padding-top: 0; font-weight: normal;
}
header span.author {
color: #AA9;
}
hr {
border: none; background: none; height: 0; visibility: hidden; clear: both;
}
p {
margin-right: 400px;
}
pre, span.pre {
background: #e0e0e0; font-size: 12px; font-family: Consolas, monospace;
padding: 1em; border: 1px solid #ccc;
}
pre em {
color: #777;
}
span.pre {
display: inline; padding: .3em .8em;
}
ul {
list-style: none; padding: 0; margin: 1em;
}
li {
border-bottom: 1px solid #ccc;
padding: .3em .8em;
}
.downloads {
margin: 0; padding: 0;
}
.downloads li {
float: left; border: none; border-right: 1px solid #999;
}
.downloads li.last {border: none;}
</style>
<script type="text/javascript">
window.onload=function() {
var b00=document.getElementById('b00');
var b01=document.getElementById('b01');
var b02=document.getElementById('b02');
var b03=document.getElementById('b03');
listen('click', b00, function() {conzole.open();});
listen('click', b01, function() {conzole.close();});
listen('click', b02, function() {conzole.toggle();});
listen('click', b03, function() {conzole.setWidth(parseInt(Math.random()*1000))});
var b10=document.getElementById('b10');
var b10b=document.getElementById('b10b');
var b11=document.getElementById('b11');
var b12=document.getElementById('b12');
var b13=document.getElementById('b13');
listen('click', b10, function() {console.log('a log');});
listen('click', b10b, function() {console.debug('a log');});
listen('click', b11, function() {console.info('an info');});
listen('click', b12, function() {console.warn('a warn');});
listen('click', b13, function() {console.error('an error');});
listen('click', b14, function() {console.log(3, ' multiplied by ', 2, 'equals', 6);});
var b20=document.getElementById('b20');
var b21=document.getElementById('b21');
listen('click', b20, function() {console.time('timer1');});
listen('click', b21, function() {console.timeEnd('timer1');});
var b30=document.getElementById('b30');
var b31=document.getElementById('b31');
listen('click', b30, function() {console.time('timer2');});
listen('click', b31, function() {console.timeEnd('timer2');});
var b40=document.getElementById('b40');
var b41=document.getElementById('b41');
var b42=document.getElementById('b42');
listen('click', b40, function() {conzole.watching.foo=Math.random();});
listen('click', b41, function() {conzole.watching.foo=null});
listen('click', b42, function() {delete conzole.watching.foo;});
var a=Math.random()*100;
var o={foo:5, bar:100, baz:'boo', caz:true};
var interval=setInterval(function() {
a=parseInt(Math.random()*100);
o.foo=parseInt(Math.random()*9);
o.bar=Math.round(Math.random()*10000)/10000;
}, 50);
conzole.watching.SomeVariable=a;
conzole.watching.SomeObject=o;
console.log('Welcome to Conzole. This is my first console log.');
conzole.open();
}
function listen(e, el, f) {
if (el.addEventListener) el.addEventListener(e,f,false);
else if (el.attachEvent) return el.attachEvent('on'+e,f);
else alert('Cannot listen events.');
}
</script>
</head>
<body>
<script type="text/javascript" src="conzole.js"></script>
<header>
<h1>Conzole</h1>
<h2>v0.1.0 <span class="author">by Pierluigi Pesenti</span></h2>
</header>
<ul class="downloads">
<li><a href="https://github.com/Oaxoa/Conzole/zipball/master" id="download-zip" class="button"><span>Download .zip</span></a></li>
<li><a href="https://github.com/Oaxoa/Conzole/tarball/master" id="download-tar-gz" class="button"><span>Download .tar.gz</span></a></li>
<li class="last"><a href="https://github.com/Oaxoa/Conzole" id="view-on-github" class="button"><span>View on GitHub</span></a></li>
</ul>
<hr />
<p>
Conzole is a debug panel built in javascript that wraps javascript native console object methods and functionality in a panel displayed inside the page.
Include it once and see it the same every time you open up the page, in every browser, on mobile etc.
</p><p>It also adds some unique functions as the “watching” list. It let you watch variables as many browsers debug console does. But setting up the watches via javascript is much easier, can be conditional and you don't have to do it every time you launch the browser.
</p>
<div>
<h2>Usage</h2>
<p>Include the script just after the <span class="pre"><body></span> open tag:</p>
<pre>
</head>
<body>
<strong><script type="text/javascript" src="conzole.js"></script></strong>
<em><!-- rest of body content --></em>
</pre>
<p>By default panel is closed. In this demo <span class="pre">conzole.open()</span> is being called.</p>
</div>
<div>
<h2>Panel managment</h2>
<p>Drag left edge to resize panel.</p>
<p>Press bound keys to accomplish the following tasks (active when focus is not isnide a input item).</p>
<p>Keyboard bindings:</p>
<ul>
<li>'z' toggle panel;</li>
<li>'c' clear panel content;</li>
<li>'u' toggle panel active/paused;</li>
<li>'t' show alternate timings (current time/time elapsed from previous message)</li>
</ul>
<p>Test keypress while focusing an input field will not trigger conzole methods: </p>
<p><input /></p>
<p><input type="password" /></p>
<p><textarea></textarea></p>
<p>Otherwise call specific methods via javascript:</p>
<button id="b00">conzole.open()</button><br />
<button id="b01">conzole.close()</button><br />
<button id="b02">conzole.toggle()</button><br />
<button id="b03">conzole.setWidth(parseInt(Math.random()*1000))</button>
</div>
<div>
<h2>Basic</h2>
<p>Notice the javascript native "console" is called. </p>
<button id="b10">console.log('a log')</button> or <button id="b10b">console.debug('a log')</button><br />
<button id="b11">console.info('an info')</button><br />
<button id="b12">console.warn('a warn')</button><br />
<button id="b13">console.error('an error')</button>
<p>You can pass multiple arguments to the functions having them concatenated by spaces</p>
<button id="b14">console.log(3, 'multiplied by', 2, 'equals', 6);</button>
</div>
<div>
<h2>Timers</h2>
<p>Notice the javascript native "console" is called. </p>
<button id="b20">console.time('timer1')</button><br />
<button id="b21">console.timeEnd('timer1')</button>
<hr />
<button id="b30">console.time('timer2')</button><br />
<button id="b31">console.timeEnd('timer2')</button>
</div>
<div>
<h2>Watch</h2>
<p>Primitive variable types (integer, string) are passed by value. Update of the values must be explicitly called every time by re-setting the watching variable.<br />
Object and array variables are passed by reference. conzole.watching variable will refer to the original object and display changes.</p>
<button id="b40">conzole.watching.foo=Math.random()</button><br />
<button id="b41">conzole.watching.foo=null</button><br />
<button id="b42">delete conzole.watching.foo</button>
</div>
</body>
</html>