在Safari Web Inspector中调试Web Worker

Question

Chrome的开发工具非常适合调试web workers，因为我可以“浏览”到JavaScript环境中并设置断点。甚至连控制台也能像预期的那样工作。

在Safari上，情况则完全不同。来自web worker的console.log甚至不会在控制台中打印。我看到worker脚本已加载，并在其上放置了一个断点，但它没有中断。我甚至看不到与importScripts一起加载的脚本。

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

我并不认为这有什么关系，但我使用的是Safari8。

Answer 1

在源代码中插入debugger;代码

用法:在想要添加断点的地方插入它，当开发人员控制台自动打开时，执行将在该行暂停

var a = 50;
a = a + 5;
debugger; //--> execution is paused here
a = a - 5;

有关更多信息，请参阅Debugger Documentation on mozilla.org

Answer 2

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

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

//
// 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为它做了一个包装器here，它应该至少允许您使用console.log进行调试