debugger-fake-workers.html - Android社区 - https://www.androidos.net.cn/

<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>