我可以使用 Chrome 开发工具衡量网络工作者的表现吗？答案

【问题标题】：Can I measure the performance of a webworker using Chrome dev tools?我可以使用 Chrome 开发工具衡量网络工作者的表现吗？
【发布时间】：2017-07-19 16:56:29
【问题描述】：

我有一个项目，其中很多总计算时间都花在了工作人员内部 - 主线程只是等到一堆工作人员完成。但我想看看我的代码的哪一部分最慢。

所以逻辑上我使用开发工具来衡量性能：

抱歉质量不好，但请注意，我测量了 11000 毫秒的性能，但只显示了大约 6500 毫秒的自我时间。所以大约有 4500 毫秒我看不到。

通常我使用这个工具来确定我应该改进代码的哪一部分来完善流程，因为它显示了 ms 一行一行

有什么方法可以查看网络工作者的表现？

【问题讨论】：

尝试将performance.now() 添加到console.log()？
您可以在脚本中查看您拥有的工人，并从那里为该工人打开开发控制台
@juvian 如何做到这一点？
试试umaar.com/dev-tips/89-debug-per-thread
@juvian 我尝试了该链接中的内容，但它不允许我看到性能

标签： javascript web-worker

【解决方案1】：

虽然衡量工作人员工作的最佳方法是分析没有工作人员的工作，但您可能会遗漏一些事情，例如花在传输和使用主线程的消息上的时间。在使用 chrome 开发控制台玩了一段时间后，最终发现在分析器中，您可以在主线程下方的时间轴中查看工作线程执行情况，在调用树中，您可以从主线程更改为 DedicatedWorker 线程：

【讨论】：

这个下拉菜单在最新的 Chrome 中不再存在？ github.com/ChromeDevTools/devtools-frontend/issues/… 编辑：哦，您只需单击时间轴中的线程，它就会将数据加载到该线程的自下而上/调用树面板中。
@Joe 很高兴知道 ^^
试图在 2021 年找到这个......在时间轴中，您需要折叠“主要”条目，然后您才能看到您的工人。展开工作人员会将其设置为在下方面板中处于活动状态。