1<html> 2<body onload="onLoad()"> 3<script> 4 5function log(message) { 6 var div = document.createElement('div'); 7 div.innerText = message; 8 document.getElementById('console').appendChild(div); 9} 10 11function strike(id) { 12 document.getElementById(id).style.textDecoration = "line-through" 13} 14 15function onLoad() { 16 if (!Worker.prototype.postMessage) { // fake workers 17 strike('s1'); 18 strike('s2'); 19 log('[using fake workers]'); 20 } else { 21 log('[using real workers]'); 22 } 23} 24 25var primeWorker; 26var invalidWorker; 27var count; 28var timer; 29 30function startWorkers() { 31 startButton.disabled = true; 32 33 primeWorker = new Worker('resources/worker-primes.js'); 34 primeWorker.onmessage = onMessage; 35 primeWorker.onerror = onError; 36 primeWorker.postMessage(2); 37 count = 3; 38 39 timer = setInterval(onTimer, 1000); 40 try { 41 invalidWorker = new Worker('non-existent-worker.js'); 42 } catch(e) { 43 } 44 log('Started worker'); 45} 46 47function onTimer() { 48 primeWorker.postMessage(count); 49 count+=2; 50} 51 52function onMessage(event) { 53 if (event.data[1]) { 54 log(event.data[0]); 55 if (event.data[0] === 5) 56 strike('s6'); 57 } 58} 59 60function onError(event) { 61 log('Error in worker: ' + event.message); 62 strike('s8'); 63} 64 65function causeError() { 66 primeWorker.postMessage('forty two'); 67} 68 69function stopWorker() { 70 log('Stopping worker...'); 71 if (timer) { 72 clearInterval(timer); 73 timer = 0; 74 } 75 primeWorker.terminate(); 76 startButton.disabled = false; 77} 78 79</script> 80 81<h1>Tests debugging of HTML5 Workers</h1> 82 83<ol> 84 85<li id="s1">Open DevTools, Scripts Panel; Tick Debug on Workers sidebar.</li> 86<li id="s2">Reload the page.</li> 87<li id="s3"><button onclick="startWorkers()" id="startButton">Start Worker</button></li> 88<li id="s4">Observe 2 workers appear in the worker sidebar pane (including non-existent-worker.js)"</li> 89<li id="s5">Observe worker-primes.js and primes.js appear in scripts drop-down box.</li> 90<li id="s6">Assure primes are being logged to test console below.</li> 91<li id="s7">Set a breakpoint on one of worker scripts, assure it's hit.</li> 92<li id="s8">Try causing an error in worker, observe it's logged in DevTools console and in test console below. 93 <button onclick="causeError()">Cause Error</button> 94<li id="s9"><button onclick="stopWorker()">Stop Worker</button></li> 95 96</ol> 97 98<div id="console" style="font-family: courier; background-color: black; color: green; width: 80em; height: 25em; overflow: scroll"> 99</div> 100 101</body> 102</html> 103