1 <html> 2 <body onload="onLoad()"> 3 <script> 4 5 function log(message) { 6 var div = document.createElement('div'); 7 div.innerText = message; 8 document.getElementById('console').appendChild(div); 9 } 10 11 function strike(id) { 12 document.getElementById(id).style.textDecoration = "line-through" 13 } 14 15 function 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 25 var primeWorker; 26 var invalidWorker; 27 var count; 28 var timer; 29 30 function 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 47 function onTimer() { 48 primeWorker.postMessage(count); 49 count+=2; 50 } 51 52 function onMessage(event) { 53 if (event.data[1]) { 54 log(event.data[0]); 55 if (event.data[0] === 5) 56 strike('s6'); 57 } 58 } 59 60 function onError(event) { 61 log('Error in worker: ' + event.message); 62 strike('s8'); 63 } 64 65 function causeError() { 66 primeWorker.postMessage('forty two'); 67 } 68 69 function 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
