blob: 6a7cb032edc57ebcc192bc71d60189deef0c61bd (
plain)
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
|
<html>
<body onload="onLoad()">
<script>
function log(message) {
var div = document.createElement('div');
div.innerText = message;
document.getElementById('console').appendChild(div);
}
function strike(id) {
document.getElementById(id).style.textDecoration = "line-through"
}
function onLoad() {
if (!Worker.prototype.postMessage) { // fake workers
strike('s1');
strike('s2');
log('[using fake workers]');
} else {
log('[using real workers]');
}
}
var primeWorker;
var invalidWorker;
var count;
var timer;
function startWorkers() {
startButton.disabled = true;
primeWorker = new Worker('resources/worker-primes.js');
primeWorker.onmessage = onMessage;
primeWorker.onerror = onError;
primeWorker.postMessage(2);
count = 3;
timer = setInterval(onTimer, 1000);
try {
invalidWorker = new Worker('non-existent-worker.js');
} catch(e) {
}
log('Started worker');
}
function onTimer() {
primeWorker.postMessage(count);
count+=2;
}
function onMessage(event) {
if (event.data[1]) {
log(event.data[0]);
if (event.data[0] === 5)
strike('s6');
}
}
function onError(event) {
log('Error in worker: ' + event.message);
strike('s8');
}
function causeError() {
primeWorker.postMessage('forty two');
}
function stopWorker() {
log('Stopping worker...');
if (timer) {
clearInterval(timer);
timer = 0;
}
primeWorker.terminate();
startButton.disabled = false;
}
</script>
<h1>Tests debugging of HTML5 Workers</h1>
<ol>
<li id="s1">Open DevTools, Scripts Panel; Tick Debug on Workers sidebar.</li>
<li id="s2">Reload the page.</li>
<li id="s3"><button onclick="startWorkers()" id="startButton">Start Worker</button></li>
<li id="s4">Observe 2 workers appear in the worker sidebar pane (including non-existent-worker.js)"</li>
<li id="s5">Observe worker-primes.js and primes.js appear in scripts drop-down box.</li>
<li id="s6">Assure primes are being logged to test console below.</li>
<li id="s7">Set a breakpoint on one of worker scripts, assure it's hit.</li>
<li id="s8">Try causing an error in worker, observe it's logged in DevTools console and in test console below.
<button onclick="causeError()">Cause Error</button>
<li id="s9"><button onclick="stopWorker()">Stop Worker</button></li>
</ol>
<div id="console" style="font-family: courier; background-color: black; color: green; width: 80em; height: 25em; overflow: scroll">
</div>
</body>
</html>
|
