在 Safari Web Inspector 中调试 Web Worker
Posted
技术标签:
【中文标题】在 Safari Web Inspector 中调试 Web Worker【英文标题】:Debugging Web Workers in Safari Web Inspector 【发布时间】: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 阅读我上面的评论 【参考方案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
,但是我真的很想设置断点并拥有完整的调试体验。以上是关于在 Safari Web Inspector 中调试 Web Worker的主要内容,如果未能解决你的问题,请参考以下文章
更改/自定义 Safari 的 Web Inspector 字体
默认情况下,Safari Web Inspector出现在新窗口中
css Safari 7和9 - 自定义Web Inspector字体
在 UIWebView 的 Safari Web Inspector 中查看 Javascript 源代码