javascript - 如何在 javascript 中获取 chrome 性能指标

Question

如果我使用 Chrome 开发工具，我可以执行以下操作:

1. 打开 chrome 开发工具(右键单击 chrome 中的页面 => 检查)
2. 导航到“性能”标签
3. 点击录制按钮
4. 点击我的网络应用程序中的按钮
5. 停止表演记录

然后我在 chrome 的“摘要”选项卡中得到了一个不错的小馅饼:

我的问题是:

如何在 javascript 中开始记录、停止记录并获取这些汇总值(加载、脚本等)？

如果有人能给我一个小代码示例，那就太好了。

我的问题不是我如何处理页面导航，因为我使用的是 C# selenium。我想做的是开始性能记录，使用 webdriver 执行一些步骤，停止记录并测量性能。

Answer 1

有两种方法可以做到这一点:

第一个:

我建议查看 puppeteer .这是一个由 google chrome 的人完成的项目，它支持 tracing。正如你在这里看到的https://pptr.dev/#?product=Puppeteer&version=v1.13.0&show=api-class-tracing他们有办法检索生成的跟踪，您应该将其写入您的计算机以便以后使用。

调用 tracing.start({}) 使用 path 指定要将跟踪写入的文件。

调用 tracing.stop() 可以很容易地与 fs 库集成，将 Buffer 输出转换为一个文件稍后您可以使用 chrome dev tools 阅读，以防您不想使用带有 path 参数的 start 函数。

唯一的缺点是，您无法真正重用您的 Selenium 脚本，您将不得不或多或少地从头开始，即使 Puppeteer 声称更容易。

第二个(有点难):

使用类似于此库的东西。 https://github.com/paulirish/automated-chrome-profiling

它是用 JS 编写的，如果您按照包的安装步骤运行命令 node get-timeline-trace.js 并加载生成的文件 (profile-XXXXXXXX.devtools.trace) 到 chrome 分析器，您将得到一个非常好的报告。

我看到的唯一问题是你必须找到一种方法来执行你的 selenium 脚本，将 chrome 实例传递给它，我不知道这有多容易(也许 PID 可以？)