Perf 时间线 CLI
生成 Chrome 性能时长的命令行接口 .
自豪地建造了:
演示
生成一个时间表, 看看有多少 版式 并使用 大号。 。 。 .
动机
Chrome DevTools 的性能面板是用于创建页面加载时限的行业标准 了解一个网站是如何形成的。 能够点击几个按钮生成一个 时间线, 从命令行创建一个性能时间线, 将功能扩展为适应 不同的工作流程.
在建立这个工具之前,我在从Chrome产生时间表时,遇到了一些问题 DevTools 性能面板.
- UI有时缓慢而无反应,特别是在调试CPU使用率高的站点时.
- 由于一些站点的构造方式,很难获得"干净"的时间表. 如果装入 a 页面,然后点击“启动剖析并重新装入页面”按钮,您的时间表往往包括跟踪 卸下当前页面的事件.
- 在方案方面不可能产生时间表。 例如,当试图找到 性能回归, 您可能想要为项目的最后 10 个构建创建时间表 . 这项任务需要DevTools内部大量额外的UI步骤.
Perf 时间线试图通过提供快速接口生成来改善开发者的经验 执行时间表.
先决条件
Perf Timeline CLI要求节点8+和当前版本的Chrome来查看所生成的时间表.
安装
npm install -g @condenast/perf-timeline-cli
使用量
使用默认生成一个性能时长
perf-timeline generate https://www.wired.com
在拖动网络时生成一个性能时间表
perf-timeline generate https://www.wired.com \
--emulate-network-conditions \
--latency 150 \
--upload-throughput 0.75 \
--download--throughput 1.6
拖动 CPU 时生成一个性能时间表
perf-timeline generate https://www.wired.com \
--set-cpu-throttling-rate \
--rate 4
生成带有截图的性能时间表
perf-timeline generate https://www.wired.com \
--screenshots
生成一个性能时间表并保存到自定义位置
perf-timeline generate https://www.wired.com \
--path ~/my-timeline.json
图标
generate
generate 为传递到命令的 URL 创建性能时间表 。 时间轴已保存
作为 trace.json 在当前目录中。 时间条件可以使用
理由如下.
立场
url(需要;没有默认) - 用于生成性能时间表的 URL
启动选项
发射选项传递给 puppeteer.launch() 命令。 目前并非所有选项
已支持。 支持的选项如下。 详情请参见 傀儡
文档。 。 。 .
--ignore-https-errors(可选;false- 什么时候--ignore-https-errors通过, 一个 HTTPS 错误将被忽略 。 这导致Chrome遇到 HTTPS 问题时出现默认错误行为 将被忽略.--headless(选项;true- 默认情况下,Perf Timeline CLI运行在"无头" 模式(即无可见 浏览器 UI. 要看到浏览器在生成时间线时, 请通过--headless false页:1generate命令。 请注意:--no-headless是同义词--headless false。 。 。 .
网络模拟选项
网络模拟选项允许您在指定的网络下生成一个性能时长
条件。 要启动网络模拟 你必须通过 --emulate-network-conditions 旗帜
附加配置选项。 这些选项镜像 Chrome Headless' emulateNetworkConditions 参数。 。 。 .
支持所有选项 。 请注意,关于使用CLI案的一些论点已扩充到:
改进产品经验(例如,通过各种参数,我们每秒大位数而不是字节数)
页:1.
--emulate-network-conditions(可选;false- 确定网络条件 生成时段, 您必须通过--emulate-network-conditions旗帜。 这个旗帜 允许遵守其他网络模拟选项。 除非 此旗帜已设定 .--offline(可选;false- 通过--offline标记为generate命令模拟 一个网络断开.--latency(可选;0- 发出请求和答复信头之间人工、最小的间隔 收到时以毫秒(毫秒)表示.--download-throughput(可选 :-1) - 以每秒兆位计的最大下载速度. 说明 Chrome Headless的版本这个参数每秒使用字节. Perf 时间线 CLI 每集使用兆位元 其次,这是比较常见的网络吞吐量衡量标准.-1禁用节奏.--upload-throughput(可选 :-1) - 每秒最大上传速度以兆位为单位. 说明 Chrome Headless的版本这个参数每秒使用字节. Perf 时间线 CLI 每集使用兆位元 其次,这是比较常见的网络吞吐量衡量标准.-1禁用节奏.--connection-type(可选 :none- 所谓基础网络连接的标签 类型。 支持的值在 Chrome Headless 下记录ConnectType文档。 。 。 .
设置 CPU 调速率选项
CPU Throttling 速率模拟选项允许您在
指定 CPU 条件。 要启动CPU模拟, 你必须通过 --set-cpu-throttling-rate
标记并附加配置选项。 这些选项镜像 Chrome Headless'
setCPUThrottlingRate 参数。 。 。 .
所有选项都被支持.
--set-cpu-throttling-rate(可选;false- 确定网络条件 生成时段, 您必须通过--set-cpu-throttling-rate旗帜。 这个旗帜 允许遵守其他 CPU Throttling 速率选项。 他们会被完全忽略 除非此旗帜已经设定.--rate(可选;1- 设置CPU调速率。 数字代表减速 系数(例如,2是“2x”减速).
跳转到选项
Goto 选项映射 page.goto() 方法从 Puppeteer 的选项。 这些选项允许您
来配置如何处理页面导航。 目前支持所有选项。 注意
url 选项 page.goto 由 url,将位置参数传递给 generate。 。
无法在此覆盖此选项 。 见 page.goto 文档 为了更多
细节.
--timeout(可选;30) - 最多数秒内加载页面直至时间线 生成被停止。 注意, 如果您模仿了网络或CPU, 或者您在稍后设置--wait-until值,您应当增加--timeout提高成功的机会 生成时间线 .--wait-until(可选;load)-导航成功事件. 皮普捷尔"等待直到" 这一事件是为了完成时间表.load, (中文(简体) ),domcontentloaded, (中文(简体) ),networkidle0,以及networkidle2被支持。 请注意:--timeout优先于--wait-until如果--wait-until事件在--timeout时间已到达, 出现错误 将不生成时间表 .
追踪选项
追踪选项允许您配置 Pippeteer 的选项 page.tracing.start()
方法。 所有选项都被支持. 见 page.tracing.start 文档 为了更多
细节.
--path(可选;./trace.json) - 保存跟踪的文件路径.--screenshots(可选;false- 通过--screenshots旗帜导致Chrome服用 生成时间线时的页面截图 。 这些截图嵌入了追踪中 文件,并在查看性能时显示在 DevTools 中.--categories(可选;[]) - 时间线中要捕捉的痕量事件类别列表. 此参数作为分类的逗号分隔列表来传递. 如果您愿意, 此选项是有用的 以减少跟踪文件的整体大小。 请注意,仅限于某些类别 在 DevTools 的视图中, 给您留下一个似乎没有任何显示的时间线 表现面板。 查看可能的类别的最佳方式是查看原始的踪迹并寻找 页:1cat事件价值.
谢谢
这个项目建立在巨人的肩上. 这只是一个方便包装器 围绕一些非常令人振奋的项目,包括:
贡献者
见 捐助者 谁 参与编写这一工具.