在Safari Web Inspector中调试Web Workers

Question

Chrome的Dev Tools非常适合调试Web worker,因为我可以"浏览"JavaScript环境并设置断点.即使控制台也按预期工作.

在Safari上,这是一个完全不同的故事.console.log来自Web worker甚至不在控制台中打印.我看到工作脚本已加载,我在其上放置了一个断点,但它没有破坏.我甚至没有看到加载的脚本importScripts.

如何使用Safari的Web Inspector解决问题？

不是我认为这很重要,但我使用的是Safari 8.

Answer 1

您可以使用 postMessage 代替 console.log。postMessage 应该允许您将调试消息发送到 safari 控制台。

这是关于如何做到这一点的一个很好的例子，我将主要思想粘贴在下面：

//
// In the Main thread
//
var worker = new Worker('/path/of/webworker/code.js')
worker.onmessage = function (e) {
  var result = JSON.parse(e.data);
  if(result.type == 'debug') {
    console.log(result.msg);
  } else if(result.type == 'response') {
    // ... use result.answer ...
  }
}


//
// In the WebWorker
//
function debug(msg) {                                                           
  postMessage(JSON.stringify({type:'debug',msg:msg}));                          
}

onmessage = function (e) {
  var inputData = e.data;
  // work on input data
  debug('Working OK');
  // work some more
  // ...
  postMessage(JSON.stringify({type:'response', answer:42}));
};

如果你不想使用 postMessage，David Flanagan在这里为它做了一个包装器，它至少应该允许你使用 console.log 进行调试