在 Safari Web Inspector 中调试 Web Worker答案

【问题标题】：Debugging Web Workers in Safari Web Inspector在 Safari Web Inspector 中调试 Web Worker
【发布时间】：2015-08-20 09:40:14
【问题描述】：

Chrome 的开发工具非常适合调试网络工作者，因为我可以“浏览”该 JavaScript 环境并设置断点。甚至控制台也能按预期工作。

在 Safari 上，情况完全不同。来自网络工作者的console.log 甚至不会在控制台中打印。我看到加载了工作脚本并在其上放置了一个断点，但它没有中断。我什至没有看到用importScripts 加载的脚本。

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

我认为这并不重要，但我使用的是 Safari 8。

【问题讨论】：

您是否有理由需要使用 Safari？您是否正在调查 Safari 特定的问题？
我公司的产品支持 Safari（和所有主要浏览器），我们希望让客户和支持工程师能够解决问题，无论是什么网络浏览器。
Chrome、FireFox、Opera、IE、Edge；所有在控制台中显示来自网络工作者的消息。苹果浏览器？ “哈！我们知道得更清楚，你不需要那个……”
所有浏览器看起来都很好，只有Safari有问题，所以需要专门在Safari中调试。
@KyawTun 阅读我上面的评论

标签： javascript debugging safari web-worker

【解决方案1】：

在您的源代码中插入debugger; 代码

用法：将其插入到要添加断点的任何位置，当开发者控制台自动打开时，执行将在该行暂停

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

欲了解更多信息，请参阅Debugger Documentation on mozilla.org

【讨论】：

以后一定要为您的链接提供一个描述性的名称或标题。
@Daniel A. White，嗨，这对你有用吗？如果是，您可以点赞这篇文章吗？？
在 Safari 中不执行任何操作 (
你并不总是控制所有的源代码......在某些情况下我不能使用调试器语句......我只是不明白为什么苹果不能得到这个对...在 Chrome 中工作正常...但我被困在一个 IOS 包装器项目中...

【解决方案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 进行调试

【讨论】：

我确实知道postMessage，但是我真的很想设置断点并拥有完整的调试体验。